My shared ESLint & Prettier configuration for projects
MIT License
❤️ it? ⭐️ it on GitHub
The config includes these plugins by default:
@babel/eslint-parser
instead of babel-eslint
from v2.6.1
(See migration guide)eslint-config-airbnb
in favour of @abhijithvijayan/eslint-config-airbnb
# npm
npx install-peerdeps @abhijithvijayan/eslint-config --dev
# yarn
npx install-peerdeps @abhijithvijayan/eslint-config --dev --yarn
This will install the required peerDependencies
for eslint
Note: Due to this bug, you
need to have all the associated plugins installed as devDependencies
to make things work.
Add extends of the preferred base config to your .eslintrc.json
:
{
"extends": [
"@abhijithvijayan/eslint-config"
],
"rules": {
// your overrides
}
}
This config also exposes react
, node
, and typescript
configs that I use often.
To use the ts configuration, install the TypeScript
compiler:
# npm
npm install typescript --save-dev
# yarn
yarn add --dev typescript
.eslintrc.json:
{
"extends": [
"@abhijithvijayan/eslint-config/typescript"
],
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
// your overrides
},
}
It is to be used in combination with the base config (recommended)
.eslintrc.json:
{
"extends": [
"@abhijithvijayan/eslint-config", // or "@abhijithvijayan/eslint-config/typescript",
"@abhijithvijayan/eslint-config/node"
],
"parserOptions": {
// Uncomment both if you are using typescript with node
// "project": "./tsconfig.json",
// "sourceType": "module" // https://github.com/mysticatea/eslint-plugin-node#-configs
},
"rules": {
// Uncomment if you are using typescript with node(ES Modules)
// "node/no-unsupported-features/es-syntax": ["error", {
// "ignores": ["modules"]
// }],
// your other overrides
},
}
It is to be used in combination with the base config (recommended)
.eslintrc.json:
{
"extends": [
"@abhijithvijayan/eslint-config", // or "@abhijithvijayan/eslint-config/typescript",
"@abhijithvijayan/eslint-config/react"
],
"parserOptions": {
// Uncomment if you are using typescript configuration
// "project": "./tsconfig.json"
},
"rules": {
// your overrides
}
}
Open your package.json
and replace "extends": "react-app"
with above config or remove extends
entry and create a separate .eslintrc.json
file(recommended)
To lint your files, you can add the following scripts to your package.json
:
"scripts": {
// other scripts
"lint": "eslint . --ext .js,.ts,.tsx",
"lint:fix": "eslint . --ext .js,.ts,.tsx --fix"
},
Add a .eslintignore
file with my defaults
node_modules
dist # typescript default output directory
.yarn
.pnp.js
# other directories to skip linting
If you'd like to override eslint
or prettier
settings, you can add the rules in your .eslintrc.json
file.
The ESLint rules go directly under "rules"
while prettier options go under "prettier/prettier"
.
Note: overriding prettier
rules(trailing comma, single quote, etc) require including all existing rules as well.
{
"extends": ["@abhijithvijayan/eslint-config"],
"rules": {
"no-console": "off",
"react/jsx-props-no-spreading": "off",
"prettier/prettier": [
"error",
{
"bracketSpacing": true,
"jsxBracketSameLine": false,
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "all",
"useTabs": false,
"proseWrap": "always"
}
]
}
}
To show lint errors in your editor, you'll need to configure your editor.
Install the ESLint package
Install the Prettier package
Now we need to setup some VS Code settings via Code/File
→ Preferences
→ Settings
. It's easier to enter these settings while editing the settings.json
file, so click the {}
icon in the top right corner:
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"[javascriptreact]": {
"editor.formatOnSave": false
},
"[typescript]": {
"editor.formatOnSave": false
},
"[typescriptreact]": {
"editor.formatOnSave": false
},
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": false
},
"prettier.disableLanguages": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
Please file an issue here for bugs, missing documentation, or unexpected behavior.
This was initially a fork of eslint-config-wesbos. Thanks wesbos!
MIT © Abhijith Vijayan