Как настроить Vue CLI 4 с помощью правил ESLint + Prettier + Airbnb + TypeScript + Vetur?

При создании нового проекта с помощью Vue CLI v4.0.5 с проверкой параметров для TypeScript и Linter / Formatter вам предоставляются предварительно настроенные параметры. для линтинга и форматирования:

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

Я хочу использовать правила Airbnb для ESLint с Prettier (форматирование при сохранении), с парсером TypeScript и Vue CLI v4.

Эти конфигурации также должны хорошо работать с расширением Vetur для VS Code.

Как настроить эту комбинацию инструментов?

Обратите внимание, что это не ложный вопрос. Есть похожие вопросы, но не с этими точными требованиями для Vue CLI4, TypeScript, ESLint, Airbnb, Prettier и работы вместе с Vetur / VS Code.

ИЗМЕНИТЬ 2020/02 - характер этой проблемы недавно значительно изменился, поэтому я открыл и сам ответил на другой вопрос: Как настроить Vue CLI 4 с помощью правил ESLint + Airbnb + TypeScript + Stylelint для SCSS в VS Code редактор с автофиксом при сохранении?


typescript vue.js eslint vue-cli prettier
person ux.engineer    schedule 02.11.2019    source источник
comment
Я не знаю, какую проблему здесь вызывают Vue, typescript и / или Vetur, но остальные должны работать в соответствии с этим руководством: blog.echobind.com/   -  person mico    schedule 10.11.2019
comment
Основная идея - разделить форматирование кода только на Prettier и применить Airbnb для ошибок. Это позволяет избежать двойного форматирования и двойного сохранения.   -  person mico    schedule 10.11.2019
comment
@mico 'За этот вопрос открыто вознаграждение в размере +100 репутации от ux.engineer, которое заканчивается через 9 часов.'   -  person ux.engineer    schedule 11.11.2019
comment
Я добавил то же, что и ответ.   -  person mico    schedule 11.11.2019

Ответы (2)


arrow_upward
13
arrow_downward

Согласно сообщению в блоге, я обнаружил [1], что следующие шаги должны убедиться, что он работает:

  1. Загрузите расширения ESLint и Prettier для VSCode.

  2. Установите в наш проект библиотеки ESLint и Prettier. В корневом каталоге вашего проекта вы захотите запустить:

npm install -D eslint prettier
  1. Установите конфигурацию Airbnb. Если вы используете npm 5+, вы можете запустить этот ярлык, чтобы установить конфигурацию и все ее зависимости:
npx install-peerdeps --dev eslint-config-airbnb
  1. Установите eslint-config-prettier (отключает форматирование для ESLint) и eslint-plugin-prettier (позволяет ESLint отображать ошибки форматирования при вводе)
npm install -D eslint-config-prettier eslint-plugin-prettier
  1. Создайте .eslintrc.json файл в корневом каталоге вашего проекта:
{
  "extends": ["airbnb", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}
  1. Создайте .prettierrc file в корневом каталоге вашего проекта. Здесь вы настраиваете параметры форматирования. Я добавил несколько своих собственных предпочтений ниже, но я настоятельно рекомендую вам узнать больше о файле конфигурации Prettier.
{
  "printWidth": 100,
  "singleQuote": true
}
  1. Последний шаг - убедиться, что Prettier форматирует при сохранении. Вставьте "editor.formatOnSave": true в свои пользовательские настройки в VSCode.

[1] https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a.

person mico    schedule 11.11.2019
comment
Спасибо за этот ответ, однако он не соответствует требованиям вопроса по настройке с использованием Vue CLI4 и TypeScript и работе с плагином Vetur для VS Code (поскольку для анализа однофайловых компонентов Vue в настоящее время требуется специальный плагин). - person ux.engineer; 13.11.2019
comment
npx install-peerdeps --dev eslint-config-airbnb устанавливает библиотеку реакции, а не vue - person michal; 18.08.2020

arrow_upward
1
arrow_downward

В настоящее время я не думаю, что Vetur работает с SFC (однофайловые компоненты) для обеспечения типизированного завершения для реквизита. Вот почему мы используем JSX + Typescript + Vue + Eslint + AirBnB в работе.

(Я также написал вам на канале Vue #tooling в Discord)

person Jess    schedule 17.11.2019