Skip to content

Instantly share code, notes, and snippets.

@alexilyaev
Last active May 18, 2022
Embed
What would you like to do?
Setup ESLint with Prettier

ESLint with Prettier Setup

Basically, when using Prettier, all ESLint styling rules should be disabled.
This can be done with eslint-config-prettier.

See .eslintrc.js example below.
In prettier.config.js you can use anything you want (see example below).

Now the tricky part is how to run them...
Usually ESLint should run first, then Prettier.
That way any code changes by ESLint will be pass through Prettier as well.
Only use the opposite if you want ESLint to re-format something the conflicts with Prettier formatting.

In the package.json example below:

  • husky - Sets up git hooks when you npm install, in this case a pre-commit hook.
  • lint-staged - Allows to run commands only on staged files/chunks in Git (i.e. only what you git add).

Also, if you currently have styling rules in .eslintrc.js, you'll need to remove them.
How to find them?
Use the eslint-config-prettier - cli-helper-tool.
See lint:eslint-config-prettier in package.json below.

Some Reference Links

module.exports = {
plugins: ['react'],
extends: [
'eslint:recommended',
'prettier',
'plugin:react/recommended',
'prettier/react',
],
env: {
es2017: true,
node: true,
},
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 2020,
ecmaFeatures: {
jsx: true,
},
sourceType: 'script',
},
rules: {
// ...
},
};
{
"name": "eslint-prettier-setup",
"version": "0.0.0",
"description": "Example setup of ESLint with Prettier",
"scripts": {
"prettier:base": "prettier --ignore-path .gitignore",
"eslint:base": "eslint --ignore-path .gitignore",
"lint:eslint": "npm run eslint:base -- --max-warnings 0 \"**/*.{js,ts,tsx,mdx}\"",
"lint:eslint-config-prettier": "eslint --print-config .eslintrc | eslint-config-prettier-check",
"lint": "npm run lint:eslint",
"format:prettier": "npm run prettier:base -- --write \"**/*.{js,ts,tsx,json,md,mdx}\"",
"format:eslint": "npm run eslint:base -- --fix \"**/*.{js,ts,tsx,mdx}\"",
"format": "npm run format:eslint && npm run format:prettier"
},
"lint-staged": {
"*.{js,ts,tsx}": [
"npm run eslint:base -- --fix --max-warnings 0",
"npm run prettier:base -- --write"
],
"*.{json,md,mdx}": [
"npm run prettier:base -- --write"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"devDependencies": {
"babel-eslint": "10.1.0",
"eslint": "7.14.0",
"eslint-config-prettier": "6.15.0",
"eslint-plugin-react": "7.21.5",
"husky": "4.3.0",
"lint-staged": "10.5.1",
"prettier": "2.2.0",
},
}
/* eslint-disable line-comment-position, no-inline-comments */
'use strict';
/**
* Ref:
* https://prettier.io/docs/en/options.html
*/
module.exports = {
arrowParens: 'avoid',
bracketSpacing: true,
endOfLine: 'auto',
htmlWhitespaceSensitivity: 'css',
jsxBracketSameLine: false,
jsxSingleQuote: false,
printWidth: 80,
proseWrap: 'preserve',
semi: true,
singleQuote: true, // default: false
tabWidth: 2,
trailingComma: 'es5',
useTabs: false,
};
{
"editor.rulers": [80],
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.options": {
"configFile": ".eslintrc.js",
"ignorePath": ".gitignore"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.wordWrap": "bounded"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"mdx"
]
}
@alexilyaev
Copy link
Author

alexilyaev commented Dec 15, 2020

For more ESLint setup inspiration, see my own ESLint configs:
eslint-config-ai

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment