图片描述

предисловие

Когда мы придем в новую команду или возьмемся за новый проект, мы столкнемся с проблемами спецификации кода. По мере того, как интерфейсные приложения становятся все более и более сложными, проблемам спецификации кода также уделяется все больше внимания. Эта статья поможет вам интегрировать соответствующую конфигурацию внешнего интерфейса React с нуля.

Код примера проекта может относиться к:eslint-prettier-react-demo

Создать проект

Во-первых, мы используем официальные лесаcreate-react-appдля создания проекта:

npx create-react-app eslint-prettier-react-demo/
cd eslint-prettier-react-demo/

Eslint

Установить зависимости

Eslint — это инструмент для проверки кода и составления отчетов. Его цель — обеспечить согласованность кода и избежать ошибок. Eslint предоставляет нам проверку кода спецификации ECMAScript/JavaScript. Мы можем настроить его в соответствии со стилем кода отдельных лиц/команд или использовать схемы конфигурации с открытым исходным кодом. В этой статье мы будем использоватьeslint-config-airbnbнастроить.

Сила Eslint обусловлена его активным сообществом с открытым исходным кодом и гибким механизмом плагинов. В этой статье нам нужно настроить проект React, чтобы мы могли выбрать несколько подходящих плагинов из сообщества с открытым исходным кодом, которые помогут нам достичь наших целей.

eslint-plugin-import: этот плагин в основном для проверкиimport/exportГрамматика, предотвращает неправильное написание путей к файлам и проблемы с именами экспорта.
eslint-plugin-jsx-a11y: предоставляетсяjsxПроверка доступности элемента
eslint-plugin-реагировать: проверить реакцию
eslint-plugin-react-hooks: проверка использования хуков в сравнении с API хуков.

Далее мы устанавливаем эти зависимости:

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

Изменить файл конфигурации

Далее настроим эти плагины в соответствии с документацией Eslint. Выполните следующую команду в консоли:

./node_modules/.bin/eslint --init

Мы можем выбрать соответствующую конфигурацию в соответствии с потребностями проекта. После выполнения видно, что есть еще одна корневая директория проекта.eslintrc.jsдокумент.

Eslint поддерживает файлы конфигурации в нескольких форматах со следующими приоритетами:

1. .eslintrc.js
2. .eslintrc.yaml
3. .eslintrc.yml
4. .eslintrc.json
5, .eslintrc
6. пакет.json

Мы используем официально рекомендованные.eslintrc.jsФормат в порядке.

Далее, давайте откроем этот файл в нашем любимом редакторе, я добавил несколько комментариев для простоты понимания:

module.exports = {
    // 为我们提供运行环境，一个环境定义了一组预定义的全局变量
    "env": {
        "browser": true,
        "es6": true
    },
    // 一个配置文件可以被基础配置中的已启用的规则继承。
    "extends": [
        "airbnb"
    ],
    // 自定义全局变量
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "_": true,
        "$": true,
    },
    // ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器
    // "parser": "@typescript-eslint/parser",
    // 配置解析器支持的语法
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。
    // 在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
    "plugins": [
        "react",
        // "@typescript-eslint"
    ],
    // ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
    // "off" 或 0 - 关闭规则
    // "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
    // "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
    "rules": {
        semi: 0,
        'no-unused-vars': [
            1,
            {
                vars: 'all',
                args: 'after-used',
                ignoreRestSiblings: true,
                varsIgnorePattern: '^_',
                argsIgnorePattern: '^_|^err|^ev' // _xxx, err, error, ev, event
            }
        ],
        'no-useless-escape': 2,
    }
};

Prettier

Мы можем использовать Eslint для улучшения качества нашего кодирования, но нет гарантии единого стиля кодирования. Единый стиль кода ценен для команд, поэтому для этой цели мы можем использоватьPrettierПри сохранении и отправке кода измените код на единый стиль. Это также снижает стоимость проверки кода. Он не заменит Eslint, поэтому его необходимо использовать вместе с Eslint.

Настроить приложение

1. Установите зависимости

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

2. Измените конфигурацию Exlint и откройте.eslintrc.jsфайл, добавить расширение"plugin:prettier/recommended" :

    "extends": [
        "airbnb",
        "plugin:prettier/recommended"
    ]

3. Добавьте более красивый файл конфигурации и создайте его в корневом каталоге..prettierrc.js:

module.exports = {
  "printWidth": 120, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为2
}

проверить при фиксации

Если мы хотим использоватьgitПри отправке кода оптимизация кода с помощью красивее также требует помощи некоторых инструментов.

хаски: удобство в обращенииpre-commit,pre-pushЖдатьgithooksИнструмент
lint-staged: инструмент для запуска линтеров кода в тестовой области git.

1. Установите зависимости

npm i lint-staged husky -D

2. Добавьте конфигурацию

// package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.{js,jsx,mjs,ts,tsx}": [
      "node_modules/.bin/prettier --write",
      "node_modules/.bin/eslint --fix",
      "git add"
    ],
    "src/*.{css,scss,less,json,html,md,markdown}": [
      "node_modules/.bin/prettier --write",
      "git add"
    ]
  }
  ...
}

3. Протестируйте команду фиксации

Это наша попытка добавить компонент и отправить код. В это время было обнаружено, что он не может быть отправлен, и было сообщено об ошибке:

图片描述
Это из-за правил красивее по умолчанию, иairbnbвызвано несоответствием правил.
Здесь вы можете обратиться кПример конфигурации в git, регулировать.eslintrc.jsфайл.
В это время, когда вы снова отправите код, вы увидите:

图片描述

Настройте редактор VS Code

1. Найдите и установите плагин ESlint, Prettier в магазине VS Code.

2. Изменитьsettings.json, по следующему пути вы можете найти соответствующий файл конфигурации:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

Затем добавьте следующие параметры:

  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,

Таким образом, когда мы сохраняем файл, формат файла будет автоматически оптимизирован.

На этом построение всего проекта и настройки редактора завершены! 🎉🎉🎉

Ссылаться на

How to integrate Eslint & Prettier in React
Стандартизируйте формат кода с помощью ESLint && Prettier
Используйте ESLint+Prettier для унификации стиля внешнего кода.
Спецификация проекта React+Typescript с использованием ESLint+Prettier
Практика применения ESLint в средних и больших командах
prettier
eslint