Самый полный шаблон конфигурации Eslint, который теперь позволяет унифицировать привычки программирования команды.

ESLint

С ростом числа проектов возникает острая необходимость унифицировать спецификации кода каждого проекта и задушить некоторые низкоуровневые ошибки в зародыше. Таким образом, он комбинируется с некоторыми спецификациями, используемыми в текущем проекте, а затем интегрируется в него в соответствии со спецификациями, рекомендованными сообществом.repo. Он объединяет спецификации программирования React и Nodejs, все спецификации основаны наairbnb, который подразделяет версию js и версию ts в соответствии с вашими потребностями в программировании.

Кроме того, спецификации кода других фреймворков не имеют реального проектного опыта, поэтому я не могу собрать все «Dragon Balls», поэтому каждый может внести свой вклад в стандартные спецификации кодирования (на основе airbnb, насколько это возможно), которые обычно использовать и делиться ими с другими детьми в сообществе.

Введение пакета экологической зависимости Eslint

Прежде чем объяснять конфигурацию Eslint, давайте сначала поймем роль некоторых пакетов зависимостей, участвующих в экосистеме конфигурации Eslint, чтобы мы могли понять, почему.

самый простой

  1. eslint: Основной инструмент для линта кода, поэтому все основано на этом пакете.

Парсер (парсер)

  1. babel-eslint: этот пакет зависимостей позволяет использовать проверку синтаксиса Eslint при использовании некоторых экспериментальных функций. И наоборот, если ваш код не использует экспериментальные функции, которые не поддерживает Eslint, вам не нужно устанавливать этот пакет зависимостей.

  2. @typescript-eslint/parser: Парсер для грамматик Typescript, похожий наbabel-eslintто же, что парсер. соответствоватьparserOptionsОбратитесь к официальному README для конфигурации.

Расширенная конфигурация

  1. eslint-config-airbnb: этот пакет содержит все конфигурации Airbnb ESLint. В качестве расширенной общей конфигурации вы можете изменить и переопределить некоторые ненужные конфигурации.Инструментарий содержит соответствующие правила реагирования Eslint (eslint-plugin-react и eslint-plugin-jsx-a11y), поэтому вам необходимо установить два только что упомянутых плагина при установке этого пакета зависимостей.

  2. eslint-config-airbnb-base: отличие от предыдущего пакета в том, что этот пакет зависимостей не содержит правил реагирования, которые обычно используются для проверки на стороне сервера.

  3. eslint-config-jest-enzyme: правила проверки, специфичные для шуток и ферментов, чтобы гарантировать, что некоторые синтаксисы утверждений могут быть распознаны Eslint без предупреждения.

  4. eslint-config-prettier: отключит все необязательные или иprettierпротиворечивые правила. Это позволяет вам использовать вашу любимую общедоступную конфигурацию, не позволяя ее выбору стиля мешать при использовании Prettier. Обратите внимание, что эта конфигурацияТолькобудет правитьoff, поэтому это имеет смысл только при использовании с другими конфигурациями.

плагин

  1. eslint-plugin-babel: плагин для использования с babel-eslint.babel-eslint отлично справляется с применением eslint к Babel, но не может изменять встроенные правила для поддержки экспериментальных функций. eslint-plugin-babel повторно реализовал проблемные правила, чтобы некоторые сообщения об ошибках не отображались ложно.

  2. eslint-plugin-import: этот плагин поддерживает проверку синтаксиса импорта/экспорта ES2015+ (ES6+) и предотвращает ошибки в написании некоторых путей к файлам или имен импорта.

  3. eslint-plugin-jsx-a11y: этот пакет зависимостей фокусируется на проверке доступности элементов JSX.

  4. eslint-import-resolver-webpack: вы можете использовать конфигурацию веб-пакета, чтобы помочь синтаксическому анализу eslint, наиболее полезным является псевдоним, чтобы избежать неразрешенных ошибок.

  5. eslint-import-resolver-typescript: Аналогично eslint-import-resolver-webpack, в основном для решения проблемы псевдонимов.

  6. eslint-plugin-react: плагин правил проверки для React.

  7. eslint-plugin-jest: Плагин проверки правил Eslint для Jest.

  8. eslint-plugin-prettier: Этот плагин помогает Eslint работать с Prettier без проблем, использует синтаксический анализ Prettier как часть Eslint и может давать предложения по исправлению в окончательном выводе. Таким образом, когда Prettier форматирует код, он все еще может следовать нашим правилам Eslint. Плагин работает лучше, если вы отключите все правила Eslint, связанные с форматированием кода. Таким образом, вы можете использовать eslint-config-prettier для отключения всех правил, связанных с форматированием (если другие действующие правила Eslint несовместимы с форматированием кода prettier, ошибка неизбежна)

  9. @typescript-eslint/eslint-plugin: плагин для Typescript, помогающий Eslint.

  10. eslint-plugin-promise: плагин проверки написания спецификации обещания с некоторыми правилами проверки.

Вспомогательный процесс оптимизации

  1. husky: конкретная конфигурация git command hook.

  2. lint-staged: можно настроить для выполнения определенных команд на определенных этапах git.

Prettier

Существует много пакетов, связанных с Prettier.В дополнение к двум, перечисленным выше, вы также можете использовать следующие три:

  1. prettier: исходная версия реализации, которая определяет более красивые правила и реализует их. Поддерживаемые ссылки на правила:портал

  2. prettier-eslint: введите код, выполните prettier, а затем eslint --fix для вывода отформатированного кода. Поддерживается только строковый ввод.

  3. prettier-eslint-cli: как следует из названия, поддерживает выполнение команд CLI.prettier-eslintоперация

Итак, какова связь между таким количеством инструментов Prettier? Слишком легко запутать людей. Вот краткое введение:

Самый простой — красивее, а затем вам нужно использовать eslint-config-prettier, чтобы отключить все правила, конфликтующие с красивее, чтобы вы могли использовать eslint-plugin-prettier для форматирования кода таким образом, чтобы он соответствовал правилам eslint и запрашивал соответствующие предложения по модификации . Для того, чтобы объединить prettier и eslint, родился инструмент prettier-eslint, но он поддерживает только ввод строк кода и не поддерживает чтение файлов, поэтому есть prettier-eslint-cli

Вот как 5 наборов инструментов соотносятся друг с другом. Подсказка после добавления красивше стала более читаемой, как показано ниже:

Конфигурационный файл Eslint

  1. env: предопределить глобальные переменные, которые должна использовать среда Доступные параметры:es6,broswer,nodeЖдать.

    es6Включает все функции ECMAScript6, кроме модулей (эта функция устанавливается автоматически, когда для ecmaVersion установлено значение 6)

    browserдобавит все переменные браузера, такие как окна

    nodeдобавит все глобальные переменные, такие какglobal

    Дополнительные сведения о настройке средыSpecifying Environments

  2. extends: определяет конфигурацию расширения.Конфигурация поддерживает рекурсивное расширение, а также покрытие правил и агрегацию.

  3. plugins: Настройте те плагины, для которых мы хотим использовать правила Linting.

  4. парсер: по умолчанию ESlint используетEspreeкак синтаксический анализатор, но раз мы используем babel, нам нужно использовать babel-eslint.

  5. parserOptions: когда мы меняем парсер по умолчанию с Espree на babel-eslint, нам нужно указать parseOptions, что является обязательным.

    ecmaVersion: значение по умолчанию равно 5 и может быть установлено на 3, 5, 6, 7, 8, 9, 10, чтобы указать, какую версию синтаксиса ECMAScript использовать. Также можно установить стандарт JS на основе года, например 2015 (ECMA 6).

    sourceType: если ваш код написан модулем ECMAScript, это поле настроено какmodule, в противном случаеscript(по умолчанию)

    ecmaFeatures: этот объект указывает дополнительные языковые функции, которые вы хотите использовать.

     globalReturn：允许全局范围内的`return`语句

 impliedStrict：使能全局`strict`模式

 jsx：使能JSX

  6. правила: Пользовательские правила, которые могут переопределить конфигурацию расширений.

  7. настройки: данные, определенные в этом поле, могут использоваться всеми плагинами. Таким образом, данные, определенные здесь, могут быть доступны при выполнении каждого правила.

Дополнительные параметры конфигурации см. в официальной документации.Eslint

Разбор конфигурационного файла Eslint

Введя так много, мы предоставляем пример конфигурации с шаблономeslint-react-jsСкажем (инструкция написана в комментариях~):

module.exports =  {
  parser:  'babel-eslint',  // Specifies the ESLint parser
  parserOptions: {
    ecmaVersion: 2015, // specify the version of ECMAScript syntax you want to use: 2015 => (ES6)
    sourceType:  'module',  // Allows for the use of imports
    ecmaFeatures: {
      jsx: true, // enable JSX
      impliedStrict: true // enable global strict mode
    }
  },
  extends:  [
    'airbnb',  // Uses airbnb, it including the react rule(eslint-plugin-react/eslint-plugin-jsx-a11y)
    'plugin:promise/recommended',
    // 'prettier', // Use prettier, it can disable all rules which conflict with prettier
    // 'prettier/react' // Use prettier/react to pretty react syntax
  ],
  settings: {
    'import/resolver': { // This config is used by eslint-import-resolver-webpack
      webpack: {
        config: './webpack/webpack-common-config.js'
      }
    },
  },
  env: {
    browser: true // enable all browser global variables
  },
  'plugins': ['react-hooks', 'promise'], // ['prettier', 'react-hooks']
  rules:  {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. '@typescript-eslint/explicit-function-return-type': 'off',
    "react-hooks/rules-of-hooks": "error",
    "semi": ["error", "never"],
    "react/jsx-one-expression-per-line": 0,
    /**
     * @description rules of eslint-plugin-prettier
     */
    // 'prettier/prettier': [
    //   'error', {
    //     'singleQuote': true,
    //     'semi': false
    //   }
    // ]
  },
};

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

Давайте сравним разницу между открытием красивее и не открытием красивее:

и

Правила, на которые повлиял Prettier

Вышеупомянутый красивее представил так много, поэтому в этом разделе кратко представлены некоторые важные правила следующего красивее:

  1. printWidth: Убедитесь, что ваш код не превышает 100 символов в строке.
  2. singleQuote: преобразовать все двойные кавычки в одинарные.
  3. trailingComma: убедитесь, что после последнего свойства объекта стоит запятая.
  4. скобкиSpacing: автоматически добавлять пробелы между литералами объекта, например: { foo: bar }
  5. jsxBracketSameLine: добавить > к последней строке многострочного элемента JSX
  6. tabWidth: указывает ширину вкладки в несколько пробелов.
  7. semi: добавлять ли после каждой строки кода объявления;

Для получения дополнительных правил см.:Options

Пусть красивый код проникнет глубоко в костный мозг~

Автоматическое форматирование при сохранении кода (версия Vscode)

  1. Установить Eslint-плагин

  2. Конфигурация VScode:

    2.1. editor.formatOnSaveУстановите значение false, если конфигурация формата файла по умолчанию конфликтует с Eslint и Prettier.

    2.2. eslint.autoFixOnSaveУстановите значение true, чтобы каждый раз, когда мы сохраняем файл, мы могли автоматически исправлять неправильный формат файла.

    Как показано ниже:

Lint-staged

Lint-stagedПомогает предотвратить фиксацию плохо отформатированного кода в вашей ветке при подготовке файлов.

Зачем использовать Lint-staged?

Поскольку проверка перед фиксацией является последней частью контроля качества кода, очень важно выполнить проверку перед отправкой кода. Это гарантирует, что в репозиторий не будет передан неправильный синтаксис и стиль кода. Но запускать процесс lint для всего проекта было бы неэффективно, поэтому лучше всего проверить файл, который был изменен. И Lint-staged делает именно это.

В соответствии с пакетом зависимостей экосистемы, который мы предоставили выше, вpackage.jsonНастройте это поле в:

"lint-staged": {
  "**/*.{tsx,ts}": [ // 这里的文件后缀可以修改成自己需要的文件后缀
    "prettier-eslint --write",
    "git add"
  ]
}

Используйте с хаски

Для того, чтобы быть выполненным в основе, которые будут выполнены до того, как изменение будет поставлено, нам необходимо использовать функцию GIT крючков, и решение сообщества, которое обеспечивает функцию крюка, являетсяhusky, этот инструмент предоставляет операции, которые git выполняет перед несколькими этапами. Например, на этот раз мы собираемся выполнить проверку Lint во время предварительной фиксации. Конфигурация выглядит следующим образом:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

Таким образом, операция lint будет выполняться каждый раз, когда делается фиксация.Как упоминалось ранее, prettier-eslint-cli украсит код, а затем eslint --fix.Если ошибки нет, она будет выполнена напрямую.git add, иначе выйдите с ошибкой.

EditorConfig

Поскольку не все используют код VS, для обеспечения согласованности в одном и том же проекте, например ширины табуляции или наличия точки с запятой в конце строки, мы можем использовать .editorconfig для унификации этих конфигураций.

Список редакторов, поддерживающих EditorConfig, пожалуйста, перейдитездесь.

Ниже приведена рекомендуемая конфигурация editorconfig в конфигурации шаблона.

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

[*.md]
trim_trailing_whitespace = false

[*.js]
trim_trailing_whitespace = true

# Unix-style newlines with a newline ending every file
[*]
indent_style = space
indent_size = 2
# 保证在任何操作系统上都有统一的行尾结束字符
end_of_line = lf
charset = utf-8
insert_final_newline = true
max_line_length = 100

Наконец

Пока что полный разбор Эслинта завершился отлично, и наконец-то Amway сделает еще одну волнуeslint-config-templates, и пиар тоже приветствуется.

Ссылаться на

  1. These tools will help you write clean code
  2. Prettier
  3. Eslint
Категории