Шаг за шагом унифицировать стандарты кодирования в проекте (vue, vscode, vetur, prettier, eslint)

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

Цель этой статьи — использовать редактор vscode, использовать плагин prettier, использовать eslint для проверки и исправления кода и использовать правило eslint-config-airbnb-base для унификации стиля кода.

В нормальных условиях у нашей небольшой компании и небольшой команды может не быть возможности и энергии для того, чтобы сформулировать набор подробных правил, поэтому вполне естественно принять правила, сформулированные большой фабрикой (в то же время надо спорить ваш лучше или мой лучше.Другие крупные заводы так делали, так давайте делать по чужим!:))

Глоссарий

vscode

текстовый редакторcode.visualstudio.com/

prettier

Плагин vscode, официальное описание: Opinionated Code Formatter.

eslint

Инструмент проверки и исправления кода, официальное описание: Подключаемая утилита linting для JavaScript и JSX.

eslint-config-airbnb-base

Набор предопределенных правил eslint, официальное описание: Этот пакет предоставляет базовый JS Airbnb .eslintrc (без плагинов React) в виде расширяемой общей конфигурации.

Далее шаг за шагом, с помощью форматирования vscode, в сочетании с более красивым, использованием eslint, более красивым в сочетании с eslint для проверки файлов js и vue, завершения проверки и исправления кода проекта и стремления решить проблему в самым кратким образом сказать четко.

Функция кода Функция VSCode из коробки

VSCODE предоставляет outfer-styling код (нет форматирования CSS), создайте тестовый файл в текущей папке ниже:./src/demo.html,./src/fun.js,./src/style.css, сочетание клавиш для форматирования кода (win): alt + shift + f

Перед форматированием HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo page</title>
</head>
<body><h1>This is a test page</h1>
<p>Page content</p>
</body>
</html>

После форматирования:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo page</title>
</head>

<body>
    <h1>This is a test page</h1>
    <p>Page content</p>
</body>

</html>

Перед форматированием JS:

function getUserInfo(name) {let HelloStr = "Hello, your name is: "
return HelloStr + name
}

После форматирования:

function getUserInfo(name) {
    let HelloStr = "Hello, your name is: "
    return HelloStr + name
}

CSS:

Как видите, файлы CSS по умолчанию не могут быть отформатированы, и пришло время стать красивее~

Форматирование кода с более красивым

Официальное объяснение красивее:

An opinionated code formatter
Supports many languages
Integrates with most editors
Has few options

Его можно комбинировать с несколькими редакторами для форматирования нескольких языков, поэтому css не проблема.

Так как в vscode по умолчанию есть функция форматирования, после установки плагина prettier в prettier также есть функция форматирования для возникновения конфликтов (для html, js), редактор подскажет здесь, и вы сможете настроить его.

Следует отметить, что vscode и prettier будут иметь много конфигураций по умолчанию, которые можно настроить с помощьюCTRL + ,Ярлыки Вход в интерфейс конфигурации для управления, все измененные результаты сохраняютсяsettings.jsonв файле.

Просто из-за конфликта между форматтером по умолчанию vscode и prettier, после выбора формируется и пишется конфигурационный файлsettings.json,следующим образом:

{
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

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

{
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

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

Проверить код javascript с помощью eslint

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

Установите eslint и сопутствующие пакеты в проект
Установите плагин eslint для vscode

Ниже приведены соответственно

Установите eslint и сопутствующие пакеты в проект

После вышеперечисленных операций в проект устанавливается eslint и сопутствующие пакеты.package.jsonследующим образом:

{
  ...
  "dependencies": {
    "eslint-plugin-vue": "^5.2.2"
  },
  "devDependencies": {
    "eslint": "^5.16.0"
  }
  ...
}

В каталоге проекта есть файл конфигурации eslint..eslintrc.js :

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

Содержимое этого конфигурационного файла передается черезnpx eslint --initГенерируется автоматически, конечно же можно настроить и вручную, все опции описаны на китайском здесь:ESL от /docs/user-a…

Затем вы можете вручную выполнить проверку:

При выполнении может быть сообщение о том, что пакет не установлен

Failed to load plugin vue: Cannot find module 'eslint-plugin-vue'

Просто установите его вручную.В результате выполнения в файле funs.js есть сообщение об ошибке, указывающее, что программа проверки запустилась нормально.

Текущие правилаeslint:recommended, наша цель — использовать eslint-config-airbnb-base, поэтому устанавливаем соответствующий пакет:

npm i -D eslint-config-airbnb-base eslint-plugin-import

тогда правильно.eslintrc.jsЧтобы настроить:

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'airbnb-base',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {
    'linebreak-style': ["error", "windows"]
  },
};

Проверьте еще раз:

D:\works\secoo\test\code-formatter> npx eslint .\src\funs.js

D:\works\secoo\test\code-formatter\src\funs.js
  1:10  error  'getUserInfo' is defined but never used              no-unused-vars
  2:7   error  'HelloStr' is never reassigned. Use 'const' instead  prefer-const
  3:7   error  'age' is assigned a value but never used             no-unused-vars
  3:7   error  'age' is never reassigned. Use 'const' instead       prefer-const
  3:15  error  Missing semicolon                                    semi

✖ 5 problems (5 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

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

Дело здесь в том, что мы.eslintrc.jsизrulesРига'linebreak-style': ["error", "windows"], вызвано различной обработкой разрывов строк в разных системах, и это правило добавлено для решения этой проблемы.

Установите плагин eslint для vscode

На данный момент мы уже можем проверить файл js, и при проверке было обнаружено много проблем, но в vscode нет сообщения об ошибке, которое используетсяvscodeдругой плагин дляeslint, после установки плагина вы можете увидеть сообщение об ошибке в vscode:

Приходя сюда, мы очень близки к успеху!

Пусть красивее стилизует код в соответствии с результатом проверки eslint

Пока можно проверить файлы js, и даже файлы js можно восстановить по правилам:

D:\works\secoo\test\code-formatter> npx eslint --fix .\src\funs.js

D:\works\secoo\test\code-formatter\src\funs.js
  1:10  error  'getUserInfo' is defined but never used   no-unused-vars
  3:9   error  'age' is assigned a value but never used  no-unused-vars

✖ 2 problems (2 errors, 0 warnings)

Но если вы используете vscode (как упоминалось выше, vscode использует красивее) для исправления и обнаружите, что правила Airbnb не применяются, вам нужно вручную настроить его здесь:

CTRL + ,Откройте интерфейс конфигурации
В Extensions -> Prettier перейдите в Eslint Integration и проверьте его. получить файл конфигурации vscodesettings.jsonследующим образом

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.eslintIntegration": true
}

В это время снова отформатируйте файл js, и он может быть выполнен в соответствии с указанными правилами.Конкретные операции заключаются в следующем:

Проверка и форматирование кода vue

Эта часть самая хлопотная, здесь многие студенты переворачиваются...

Во-первых, думатьvscodeзнатьvueфайл, необходимо установить плагинvetur, в основном после установки этого плагина вы можете с радостью запустить код vue.Конфигурация vetur по умолчанию выглядит следующим образом:

{
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier"
}

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

发出格式化命令
    |
    | next
    |
vetur 收到命令 将格式化任务转交给 prettier
    |
    | next
    |
prettier 收到命令 将格式化任务转交给 eslint
    |
    | next
    |
eslint 收到命令，将代码格式化

Казалось бы, счастливый конец был нарушен реальностью: когда мы форматируем файл vue, правила, на которые он ссылается, являются более красивыми правилами, а не правилами eslint.

Если вы хотите отформатировать vue в соответствии с приведенными выше правилами, вам нужно сделать две вещи:settings.json

Установите средство форматирования js в vetur на prettier-eslint.

{
  ...
  "vetur.format.defaultFormatter.js": "prettier-eslint"
  ...
}

Установите пакет prettier-eslint

npm i -D prettier-eslint

Для этого вопроса, красивее-eslintОфициальный сайтВыше очень ясно:

This formats your code via prettier, and then passes the result of that to eslint --fix. This way you can get the benefits of prettier's superior formatting capabilities, but also benefit from the configuration capabilities of eslint.

Но есть такая проблема.Я видел бесчисленное количество студентов в интернете.Если уж разобраться по прямой,будут две ямы:

Не красивее уже отформатировал js по eslint, vetur указывает на красивее, должно быть без проблем! Реальность - это то, что нужно передатьprettier-eslint
Многие студенты преодолели первое препятствие, но никогда не думали,prettier-eslintНеобходимо вручную установить пакет!

Так что я не мог продолжать на последнем шаге.

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

окончательное резюме

Наконец, подытоживая, что необходимо сделать в целом

Установите плагин vscode.eslint,prettier,vetur
Настройка правил eslint
Настроить красивее для работы с eslint
настроить ветур

Окончательный файл конфигурации выглядит следующим образом: настройки.json

{
  "extensions.autoUpdate": false,
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "prettier.eslintIntegration": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "eslintIntegration": true
    }
  },
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.format.defaultFormatter.html": "prettier"
}

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true
  },
  extends: ['airbnb-base', 'plugin:vue/recommended'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['vue'],
  rules: {
    'linebreak-style': ['error', 'windows'],
    'comma-dangle': ['error', 'never'], // 修正 eslint-plugin-vue 带来的问题
  }
};

исходный код вздесь

Справочная статья:

Официальная документация Vetur
prettier-eslint github rep
eslint configuring
eslint rules
gitignore
Prettier Integrating with Linters
Блог Хэ Сина
How I Resolved Vue.js, VSCode, Vetur, Prettyhtml, and Prettier Formatting and ES Lint Issues
js-beautify github rep и описание

Tips

В связи с ошибками в последней версии vetur необходимо откатиться на версию 0.18.1, подробнее см.:GitHub.com/v UE JS/VE внезапно…