Conversation
There was a problem hiding this comment.
Pull request overview
This PR removes Prettier as a dependency and replaces it with ESLint's @stylistic/eslint-plugin to achieve the same formatting behavior with significantly better performance (20-50% faster based on the benchmarks provided). The change is a major version bump from 2.5.6 to 3.0.0, indicating a breaking change since projects using this config will need to remove their Prettier configuration files.
Changes:
- Replaced Prettier with
@stylistic/eslint-pluginfor code formatting, mapping all Prettier rules to equivalent ESLint stylistic rules - Added eslint-plugin-tailwindcss to handle Tailwind CSS class ordering directly in ESLint instead of through prettier-plugin-tailwindcss
- Removed all Prettier-related dependencies and configuration files
Reviewed changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated version to 3.0.0, replaced prettier dependencies with @stylistic/eslint-plugin and eslint-plugin-tailwindcss |
| yarn.lock | Added new stylistic and tailwind plugin dependencies, removed all prettier-related packages |
| configs/default.js | Replaced prettier plugin with @stylistic plugin and added all formatting rules to match previous prettier behavior |
| configs/react-tailwind.js | New configuration file for Tailwind CSS class ordering with graceful fallback if plugin not found |
| react.js | Added react-tailwind configuration to React preset |
| prettierrc.js | Removed file - no longer needed without Prettier |
| .prettierrc.js | Removed file - no longer needed without Prettier |
| .gitignore | Removed exception for .prettierrc.js since it no longer exists |
| README.md | Removed .prettierrc.js setup instructions from installation section |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
configs/react-tailwind.js
Outdated
| @@ -0,0 +1,22 @@ | |||
|
|
|||
| try { | |||
| const tailwind = require('eslint-plugin-tailwindcss'); | |||
There was a problem hiding this comment.
There are two spaces after the equals sign. This should be a single space for consistency with the rest of the codebase.
| const tailwind = require('eslint-plugin-tailwindcss'); | |
| const tailwind = require('eslint-plugin-tailwindcss'); |
configs/react-tailwind.js
Outdated
| 'tailwindcss': tailwind | ||
| }, | ||
| rules: { | ||
| 'tailwindcss/classnames-order': ['error', { callees : ['classnames', 'tw', 'clsx', 'ctl', 'cva', 'tv', 'cn', 'cx'] }] |
There was a problem hiding this comment.
There's extra space after 'callees' before the colon. This should be removed for consistency.
| 'tailwindcss/classnames-order': ['error', { callees : ['classnames', 'tw', 'clsx', 'ctl', 'cva', 'tv', 'cn', 'cx'] }] | |
| 'tailwindcss/classnames-order': ['error', { callees: ['classnames', 'tw', 'clsx', 'ctl', 'cva', 'tv', 'cn', 'cx'] }] |
configs/default.js
Outdated
| '@stylistic/comma-dangle': ['error', 'never'], | ||
| '@stylistic/arrow-parens': ['error', 'as-needed'], | ||
| '@stylistic/object-curly-spacing': ['error', 'always'], | ||
| '@stylistic/indent': ['error', 2, { 'VariableDeclarator': 'first', 'outerIIFEBody': 1, 'MemberExpression': 1, 'ArrayExpression': 1, 'flatTernaryExpressions': true, 'offsetTernaryExpressions': true }], |
There was a problem hiding this comment.
There's a double space after 'first', before the comma. This should be a single space.
| '@stylistic/indent': ['error', 2, { 'VariableDeclarator': 'first', 'outerIIFEBody': 1, 'MemberExpression': 1, 'ArrayExpression': 1, 'flatTernaryExpressions': true, 'offsetTernaryExpressions': true }], | |
| '@stylistic/indent': ['error', 2, { 'VariableDeclarator': 'first', 'outerIIFEBody': 1, 'MemberExpression': 1, 'ArrayExpression': 1, 'flatTernaryExpressions': true, 'offsetTernaryExpressions': true }], |
| ``` | ||
| 2. `.prettierrc.js` | ||
|
|
||
| `eslint.config.js` se for "type": "module" no package.json: |
There was a problem hiding this comment.
é o mesmo nome do arquivo para os dois mesmo?
| `eslint.config.js` se for "type": "module" no package.json: | |
| `eslint.config.mjs` se for "type": "module" no package.json: |
What?
Remoção do prettier. Tentei diminuir o máximo de impacto nas mudanças para ter o mesmo comportamento do prettier sem grandes alterações, o único caso que não consegui manter igual é a indentação de types.
Não será necessário mudar nada nos projeto que for implementado. apenas remover os arquivos do prettier que agora serão desnecessários.
Beta para testar: 3.0.0-beta.1
Why?
Em projetos grandes o prettier tem se mostrado muito lento, com essa alteração consegui ter o mesmo comportamento do prettier com um ganho de 20~50% de performance;
Before:
After: