Проект Vue, используемый VS Code для настройки ESLint

внешний интерфейс Командная строка Vue.js ESLint

Сначала убедитесь, что VS Code установленVeturа такжеEslintплагин.
Затем используйте простой шаблон веб-пакета, предоставленный vue-cli, чтобы в проект, созданный таким образом, не добавлялся ESLint по умолчанию.

vue init webpack-simple test-vscode

процесс настройки

  1. Установите последнюю версию eslint глобально
npm i -g eslint@latest

бегать

eslint --init

eslint-init

Будут установлены следующие зависимости

eslint-config-standard@latest
eslint-plugin-import@>=2.2.0
eslint-plugin-node@>=5.2.1
eslint-plugin-promise@>=3.5.0
eslint-plugin-standard@>=3.0.0
скопировать код

Генерируется в каталоге проекта одновременно.eslintrc.jsдокумент. Он содержит только самый основной контент:

module.exports = {
    "extends": "standard"
};

Указывает, что используемые нами правилаstandardПравила, определенные спецификацией.
2. Затем установите последнюю версию eslint локально.

npm i -D eslint@latest
  1. существуетpackage.jsonизscriptsДобавьте строку в:
 "lint": "eslint --ext .js,.vue src"

бегать:

npm run lint

VS Code подскажет, что мы не можем его найтиeslint-config-standard:
报错提示

Установите его:

npm i -D eslint-config-standard

затем беги

npm run lint

Тогда будет сообщение об ошибке.
lint_err
code_err

  1. Но когда.vueНет соответствующего запроса на ошибки в файле. В настоящее времяVeturОн используется. Добавьте следующие правила в настройки VS Code:
{
"eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
    ]
}

Это добавит к.vueподдержка файлов.
5. Однако это.vueТег в файле сообщил об ошибке синтаксического анализа
parser_error

Его необходимо установитьeslint-plugin-vue@nextплагин.

 npm install -D eslint-plugin-vue@next

в то же время.eslintrc.jsДобавьте расширение, которое использует плагин vue.

// .eslintrc.js
module.exports = {
    "extends": [
           "standard",
           "plugin:vue/base"
      ]
}

Таким образом, вы можете.vueДокументы теперь обеспечивают функциональность проверки в реальном времени.

  1. Такие ошибки, как лишние запятые, плагин eslint может автоматически исправлять при сохранении. Измените настройки в VS Code и добавьте следующие правила:
{
  "eslint.autoFixOnSave": true
}

Суммировать

С помощью плагина VS CodeVetur,ESLintПриходите на проект Vue.vueОбеспечивает функцию проверки кода.

  • Зависимости, которые необходимо установить:
     "eslint": "^4.14.0",
"eslint-config-standard": "^11.0.0-beta.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0-beta.4",
    Уведомление: 这里 ESLintа такжеeslint-plugin-vueНужно быть в курсе.
  • .eslintrcКонфигурация
     module.exports = {
 "extends": [
     "standard",
     "plugin:vue/base"
 ]
 };
  • Конфигурация кода VS
      {
   "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
],
"eslint.autoFixOnSave": true
  }

Использованная литература:
Ветур Документация
Документация ESLint
eslint-plugin-vue

Категории