Eslint airbnb config + prettier for create-react-app project

readme.md

This is tutorial of onfiguring eslint, prettier for your project

Make your code great again

1. Eslint

First of all we need to install eslint and configs as dev dependencies. You can use your own config, but I will use config from airbnb:

yarn add -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

or

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

If you are using typescript then instead of "eslint-config-airbnb" should be "eslint-config-airbnb-typescript". Also there should be added "@typescript-eslint/eslint-plugin" package:

yarn add -D eslint eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

or

npm i -D eslint eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

After this we need to create eslint config file:

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    jest: true,
  },
  extends: ['airbnb', 'react-app'],
  // extends: ['airbnb-typescript', 'react-app'], // if you're using typescript
};

Now we need to add scripts to "package.json" file:

"scripts": {
  ...
  "lint:eslint": "eslint . --ext .ts,.js,.tsx,.jsx",
  "lint:eslint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix"
}

Note

Use .ts or .tsx extentions if you're using typescript:

• "lint:eslint" script will just run eslint for your files and show errors in console
• "lint:eslint:fix" script will run eslint for your files and fix autofixable errors

2. Prettier

Next step is to install prettier. Prettier will be running with eslint. For this we need to add few packages:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

or

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

After successful installation we need to create prettier config file:

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "jsxBracketSameLine": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true
}

And modify eslint config:

.eslintrc.js

const fs = require('fs');
const path = require('path');

const prettierOptions = JSON.parse(
  fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'),
);

module.exports = {
  env: {
    browser: true,
    jest: true,
  },
  extends: ['airbnb-typescript', 'react-app', 'prettier', 'prettier/react'],
  // extends: ['airbnb-typescript', 'react-app', 'prettier', 'prettier/react'], // if you're using typescript
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', prettierOptions],
  },
};

The next step will be to add script to "package.json" file:

"scripts": {
  ...
  "prettify": "prettier --write **/*.{ts,tsx,js,jsx,json}"
}

"prettify" script will run prettier for your files and fix all founded errors

3. Pre-commit hook

For pre-commit hook we will be using lint-staged. We need install two more packages:

npm i -D lint-staged husky

or

yarn add -D lint-staged husky

Now we need to modify "package.json" file:

package.json

"scripts": {
  ...
  "lint-staged": "lint-staged"
},
"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "npm run lint:eslint:fix",
      "git add --force"
    ],
    "*.{ts,tsx,js,jsx,json}": [
      "npm run prettify",
      "git add --force"
    ]
  }

Note

Use .ts or .tsx extentions if you're using typescript

Now lint-staged will try to fix errors before commit and won't allow you to commit changes that contains any errors.

4. Integration with VSCode

To show errors on your VSCode editor these extensions:

• prettier - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• eslint - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

To be able autofix errors on file save you need to change these VSCode settings:

"[javascript]": {
  "editor.formatOnSave": false
},
"[typescript]": {
  "editor.formatOnSave": false
},
"[javascriptreact]": {
  "editor.formatOnSave": false
},
"[typescriptreact]": {
  "editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"prettier.disableLanguages": ["js", "jsx", "ts", "tsx"],
"eslint.validate": [
  "javascript",
  "javascriptreact",
  { "language": "typescript", "autoFix": true },
  { "language": "typescriptreact", "autoFix": true }
]

Note

We're disabling prettier because it'll work through eslint

I have been following this tutorial and it says "The setting is deprecated. Use editor.codeActionsOnSave instead with a source.fixAll.eslint member" in .vscode config.
The correct format would be "editor.codeActionsOnSave": { "source.fixAll.eslint": true }. See #microsoft/vscode#87227 (comment)

I think no, because doing this would format your code with your linter (eslint) and we'll want that code format with prettier, config your vscode like this:

"editor.defaultFormatter": "esbenp.prettier-vscode", // format with prettier
"editor.formatOnSave": true