kuhelbeher/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    This is tutorial of onfiguring eslint, prettier for your project
Make your code great again

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


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

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.

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