UPDATE 2023: ESLint is deprecating formatting rules and recommend you use a source code formatter instead.
tl;dr: Use eslint-config-prettier in eslint, and run prettier separately. You can ignore the rest.
From v8.53.0 onwards, you will see a deprecation warning if those formatting rules are enabled in your config. You should still use eslint-config-prettier to disable conflicting rules until the rules are removed in a new major release.
ESLint contains many rules and those that are formatting-related might conflict with Prettier, such as arrow-parens, space-before-function-paren, etc. Hence using them together will cause some issues. The following tools have been created to use ESLint and Prettier together.
prettier-eslint |
eslint-plugin-prettier |
eslint-config-prettier |
|
|---|---|---|---|
| What it is | A JavaScript module exporting a single function. | An ESLint plugin. | An ESLint configuration. |
| What it does | Runs the code (string) through prettier then eslint --fix. The output is also a string. |
Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output. | This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb. |
| How to use it | Either calling the function in your code or via prettier-eslint-cli if you prefer the command line. |
Add it to your .eslintrc. |
Add it to your .eslintrc. |
| Is the final output Prettier compliant? | Depends on your ESLint config | Yes | Yes |
Do you need to run prettier command separately? |
No | No | Yes |
| Do you need to use anything else? | No | You may want to turn off conflicting rules using eslint-config-prettier. |
No |
For more information, refer to the official Prettier docs.
It's the recommended practice to let Prettier handle formatting and ESLint for non-formatting issues, prettier-eslint is not in the same direction as that practice, hence prettier-eslint is not recommended anymore. You can use eslint-plugin-prettier and eslint-config-prettier together.
Videos
UPDATE 2023: ESLint is deprecating formatting rules and recommend you use a source code formatter instead.
tl;dr: Use eslint-config-prettier in eslint, and run prettier separately. You can ignore the rest.
From v8.53.0 onwards, you will see a deprecation warning if those formatting rules are enabled in your config. You should still use eslint-config-prettier to disable conflicting rules until the rules are removed in a new major release.
ESLint contains many rules and those that are formatting-related might conflict with Prettier, such as arrow-parens, space-before-function-paren, etc. Hence using them together will cause some issues. The following tools have been created to use ESLint and Prettier together.
prettier-eslint |
eslint-plugin-prettier |
eslint-config-prettier |
|
|---|---|---|---|
| What it is | A JavaScript module exporting a single function. | An ESLint plugin. | An ESLint configuration. |
| What it does | Runs the code (string) through prettier then eslint --fix. The output is also a string. |
Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output. | This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb. |
| How to use it | Either calling the function in your code or via prettier-eslint-cli if you prefer the command line. |
Add it to your .eslintrc. |
Add it to your .eslintrc. |
| Is the final output Prettier compliant? | Depends on your ESLint config | Yes | Yes |
Do you need to run prettier command separately? |
No | No | Yes |
| Do you need to use anything else? | No | You may want to turn off conflicting rules using eslint-config-prettier. |
No |
For more information, refer to the official Prettier docs.
It's the recommended practice to let Prettier handle formatting and ESLint for non-formatting issues, prettier-eslint is not in the same direction as that practice, hence prettier-eslint is not recommended anymore. You can use eslint-plugin-prettier and eslint-config-prettier together.
- Use
eslint-config-prettierto turn-off eslint rules that are unnecessary or might conflict with Prettier. See 1st line in readme: eslint-config-prettier. - Use
eslint-plugin-prettierto run Prettier as an Eslint-rule. See 1st line in readme: eslint-plugin-prettier - Use both to take advantage of both tools. See recommended configuration: eslint-plugin-prettier.
This way you use
pluginto run Prettier as an Eslint-rule, andconfigto turn-off eslint rules that are unnecessary or might conflict with Prettier. - You can ignore
prettier-eslint
» npm install eslint-config-prettier
Instead of disabling linting for the file, you can instead disable prettier within the eslintrc.js config file:
module.exports = {
root: true,
extends: '@react-native-community',
rules: {
'prettier/prettier': 0,
},
};
To get rid of conflicting rules when using both - prettier and eslint there is a eslint-config-prettier package.
Run npm install --save-dev eslint-config-prettier to install and then in eslintrc.js (or wherever you have the eslint rules defined) add:
{
"extends": [
...,
"@react-native-community",
"prettier"
]
}
Now eslint should respect prettier rules. Here is a link to GH repo.
I created an angular project with NX 18 and that version unfortunately comes with flat eslint.js config which kind of makes my previous custom eslintrc.json configs obsolete.
(Since there is no eslint subreddit and I already asked on stackoverflow (https://stackoverflow.com/questions/79248446/converting-old-eslint-json-to-flat-eslint-js-for-custom-eslint-rules) I'm asking here now..)
It looks like this (with some custom eslint rules I added there, 4 extra rules for ts and 2 rules for html)
const nx = require('@nx/eslint-plugin');
module.exports = [
...nx.configs['flat/base'],
...nx.configs['flat/typescript'],
...nx.configs['flat/javascript'],
{
ignores: ['**/dist'],
},
{
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
// Override or add rules here
rules: {},
},
...nx.configs['flat/angular'],
...nx.configs['flat/angular-template'],
{
files: ['**/*.ts'],
rules: {
'@angular-eslint/directive-selector': [
'error',
{
type: 'attribute',
prefix: 'app',
style: 'camelCase',
},
],
'@angular-eslint/component-selector': [
'error',
{
type: 'element',
prefix: 'app',
style: 'kebab-case',
},
],
'@typescript-eslint/member-ordering': 'error',
'@typescript-eslint/naming-convention': 'error',
'default-case': 'error',
'default-case-last': 'error',
},
},
{
files: ['**/*.html'],
// Override or add rules here
rules: {
'@angular-eslint/template/attributes-order': ['error'],
'@angular-eslint/template/no-duplicate-attributes': ['error'],
},
},
];How do I include prettier in there with the eslint-plugin-prettier library? (that apparently combines linter and formatter). I really can't find a solution anywhere! Like wtf, why enforce a new config out of nowhere when the doc is bad...