Используйте Eslint для настройки спецификаций и форматирования кода.

предисловие

Для фронтенд-разработчиков JavaScript, несомненно, является нашим лучшим партнером. Что касается ESLint, то это подключаемый инструмент статической проверки кода JavaScript, суть которого заключается в обнаружении кода, не соответствующего согласованной спецификации, путем сопоставления с образцом в AST (Abstract Syntax Tree, Абстрактное синтаксическое дерево), полученном путем синтаксического анализа. код.

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

Как это сделать?

提示：Eslint 提供了风格指南规则，并明确表示了哪些是可修复的：Stylistic Issues https://cn.eslint.org/docs/rules/#stylistic-issues

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Что нам нужно сделать?

1. Установите Eslint локально и спецификацию eslint-config-airbnb (https://github.com/airbnb/javascript), рекомендованную сообществом
   (или другую спецификацию). Плагин будет использовать установленную
   библиотеку Eslint (если она у вас не установлена: npm i eslint eslint-config-airbnb).
2. VSCode устанавливает плагин Eslint.
3. Добавьте файл конфигурации .eslintrc.js.
4. Измените конфигурацию файла settings.json VSCode.

Среди них, если вы хотите автоматически форматировать в соответствии с правилами проекта, четвертый шаг необходим.

настройка.json

Если вы установили плагин Eslint, нажмите cmd + shift + p, чтобы открыть файл defaultSettings.json, нажмите cmd + f, чтобы найти eslint, чтобы увидеть все конфигурации ESlint по умолчанию в VSCode. Нам нужно внести в него некоторые изменения.

Все еще нажмите cmd + shift + p, чтобы открыть файл settings.json. Этот файл является определяемой пользователем конфигурацией, и конфигурация в нем переопределяет конфигурацию с тем же именем в defaultSettings.json. Мы вносим некоторые изменения в конфигурацию плагина ESLint в этом файле, чтобы добиться желаемого эффекта.

Во-первых, мы хотим автоматически форматировать при сохранении.Для достижения этого эффекта есть три конфигурации:

• editor.formatOnSave + eslint.format.enable. Первая конфигурация: форматировать при сохранении, вторая конфигурация: использовать
  правила ESlint в качестве стандартов форматирования.
• eslint.autoFixOnSave
• editor.codeActionsOnSave

Среди них второй eslint.autoFixOnSave был заброшен. При его использовании предлагается перейти на editor.codeActionsOnSave.

Можно реализовать и первое, и третье, но рекомендуется использовать третий editor.codeActionsOnSave, который поддерживает более высокую настраиваемость.

При использовании editor.codeActionsOnSave нам нужно отключить другие средства форматирования, лучший способ — установить ESlint в качестве средства форматирования по умолчанию. И когда мы это сделаем, мы можем отключить editor.formatOnSave, иначе наш файл будет исправлен дважды, что не обязательно.

Ниже приведены конфигурации, которые нам нужно добавить в settings.json.

// 编辑的时候检测还是保存的时候检测，默认在编辑的时候就检测。default: onType
// "eslint.run": "onType",

// default: false
// "eslint.format.enable": false,

// default: false
// "editor.formatOnSave": false,

"editor.codeActionsOnSave": {
    
    
  "source.fixAll.eslint": true
},
"[vue]": {
    
    
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascript]": {
    
    
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
},

// 始终在VSCode的右下角状态栏显示 ESLint 字样，查看 ESLint 运行状态,确保 ESLint 在正常运行
"eslint.alwaysShowStatus": true,

Подведем итог

Подсказка: не оригинал! ! ! Неоригинально! ! ! Неоригинально! ! !
Перепечатано с: https://mp.weixin.qq.com/s/fR6vKI7TUbueUTCKDTAHVQ