A-Level. React. Code Quality

Code Quality

Теми

  1. Editorconfig
  2. ESLint
  3. Prettier
  4. husky
  5. lint-staged

EditorConfig

EditorConfig допомагає підтримувати єдиний набір правил. Щоб усі члени команди користувалися єдиними налаштуваннями, що стосуються відступів або символів переводу рядка тощо, застосовують файл .editorconfig

EditorConfig. Приклад.

            [*]
            end_of_line = lf
            charset = utf-8
            trim_trailing_whitespace = true
            insert_final_newline = true
            max_line_length = 80

EditorConfig. Налаштування.

ESLint

ESLint - Find and fix problems in your JavaScript code.

ESLint — це статичний аналізатор коду для знаходження проблемних ділянок, які не відповідають керівництву по стилю.

Install

npm install eslint --save-dev

Запуск

            "scripts": {
              ...
              "lint": "eslint './src/**/*.{js,jsx}'"
            },
        
            // .eslintrc
            {
              "env": {
                "browser": true,
                "node": true
              },
              "extends": ["react-app", "airbnb"],
              "parserOptions": {
                "ecmaVersion":  2018,
                "sourceType":  "module",
                "ecmaFeatures": {
                  "jsx":  true
                },
              },
              "rules":  { ... },
            }

Prettier

Prettier — це інструмент для форматування коду, який націлений на використання жорстко заданих правил.

Install

npm i -D prettier eslint-config-prettier

eslint-config-prettier - Вимикає всі правила, які можуть кофліктувати з Pretier 

            {
              ...
              "extends": ["react-app", "airbnb", "prettier"], // eslint-config-prettier
              "plugins": ["react"],
              ...
              "rules":  {
                ...
                "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
                ...
              }
            }

husky

Husky improves your commits and more 🐶 woof!

Install

npx husky-init && npm install

husky

Добавляем хуки и испольняемые команды:

Додаємо хуки та команди які треба виконати:
npx husky add .husky/pre-commit "npm run lint"

або рученятами у файліку .husky/pre-commit

lint-staged

Run linters against staged git files and don't let 💩 slip into your code base!

Install

npm install --save-dev lint-staged

lint-staged

                .husky/pre-commit
                #!/bin/sh
                . "$(dirname "$0")/_/husky.sh"
                 
                npx lint-staged
            
                package.json
                ...
                "lint-staged": {
                 "src/**/*.{js,jsx}": [
                   "prettier --write",
                   "eslint"
                 ],
                },
                ...

Links