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 - Отключает все правила, которые могут конфликтовать с Prettier. 

            {
              ...
              "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