Код автоматического форматирования ESlint + Stylelint + VSCode (2020)

внешний интерфейс ESLint

код форматирования eslint

В этой статье в качестве примера используется проект Vue.

использоватьVue-CLIПри создании проекта выберите ESlint.После загрузки зависимостей откройте проект с помощью VSCode.

Установите плагин ESLint, затемFile -> Preference-> Settings(Если установлен пакет китайских плагинов, это должен быть Файл -> Параметры -> Настройки), найдите eslint и нажмитеEdit in setting.json

在这里插入图片描述

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

"editor.codeActionsOnSave": {
    "source.fixAll": true,
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript"
],
"eslint.alwaysShowStatus": true,
"stylelint.validate": [
    "css",
    "less",
    "postcss",
    "scss",
    "vue",
    "sass"
],

Также убедитесь, что строка состояния ESlint в правом нижнем углу VSCode работает. Если вы не видите логотип Eslint в правом нижнем углу, выполните указанные выше действия, чтобы открыть его.setting.json, плюс эта строка кода:

"eslint.alwaysShowStatus": true,

image

После настройки VSCode будет основан на вашем текущем проекте..eslintrcДокументируйте правила для проверки и форматирования кода.

TypeScript

Скачать плагин

npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

существует.eslintrcФайл конфигурации, добавьте следующие два элемента конфигурации:

"parser": "@typescript-eslint/parser",
"plugins": [
    "@typescript-eslint"
],

в корневом каталогеpackage.jsonдокументscriptsДобавьте в опции следующие элементы конфигурации:

"scripts": {
  "lint": "eslint --ext .js,.ts,.tsx test/ src/",
},

test/ src/это каталог, который вы хотите проверить. После модификации теперь и ts-файл можно автоматически форматировать.

если вы используетеVue-CLIСоздайте проект и хотите отформатировать код TypeScript, вам нужно.eslintrc.jsФайл добавляет или изменяет следующие элементы:

parser: 'vue-eslint-parser',
plugins: [
    '@typescript-eslint',
],
parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
},

так что вы можете отформатировать.js .ts .vueфайл.

код форматирования stylelint

Скачать зависимости

npm install --save-dev stylelint stylelint-config-standard

Создайте новый в корневом каталоге проекта.stylelintrc.jsonфайл и введите следующее:

{
    "extends": "stylelint-config-standard"
}

VSCode добавитьstylelintПлагин:

在这里插入图片描述

Тогда вы сможете увидеть эффект.

在这里插入图片描述

Если вы хотите изменить правила плагина по умолчанию, вы можете увидетьофициальная документация, который предоставляет 170 модификаций правил. Например, если я хочу использовать 4 пробела в качестве отступа, я могу настроить его следующим образом:

{
    "extends": "stylelint-config-standard",
    "rules": {
        "indentation": 4
    }
}

если вы хотите отформатироватьsass scssфайл, нужно скачатьstylelint-scssПлагин:

npm i -D stylelint-scss

Затем вы можете отформатировать файл scss.

расширять

Как отформатировать HTML-код в файлах HTML, Vue (или других суффиксах)?

.vueМожно использовать HTML-код файлаeslint-plugin-vueплагин для форматирования:

extends: [
    'plugin:vue/recommended', // 在 .eslintrc.js 文件中加上这一行代码
    '@vue/airbnb',
],

Другие файлы HTML должны использовать форматирование, которое поставляется с VSCode.shift + alt + f. Предполагая, что в VSCode в данный момент открыт файл HTML, нажмитеshift + alt + fВам будет предложено выбрать спецификацию форматирования. Если подсказки нет, значит уже есть спецификация форматирования по умолчанию, тогда весь код HTML-файла будет отформатирован, а правила форматирования также можно настроить самостоятельно.

Сложные проблемы

Unknown word (CssSyntaxError)ошибка

Решение состоит в том, чтобы понизить установку VSCode.stylelintПлагины, щелкните маленькую шестеренку рядом с плагином, а затем нажмитеInstall Another Version, выберите другую версию для установки.

image.png

Выбрать0.87.6Версия установлена, и функция автоматического форматирования css возвращается в нормальное состояние.

халатное отношение.vueНедопустимое правило проверки HTML-шаблона в файле

Например, если вы установите длину текста кода на строку HTML-шаблона равной 100, eslint сообщит об ошибке при превышении этой длины. На этом этапе, если вы все еще хотите превысить эту длину, вы можете игнорировать это правило:

/* eslint-disable max-len */

Обратите внимание, что приведенная выше строка кода, которая игнорирует проверку, не вступит в силу, поскольку этот комментарий является комментарием JavaScript, нам нужно изменить формат комментария на HTML, чтобы игнорирование проверки вступило в силу:

<!-- eslint-disable max-len -->
Категории