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

Question

При создании нового проекта с 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 с Более красивым (форматирование при сохранении),с синтаксическим анализатором TypeScript и Vue CLI v4 .

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

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

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

Answer 1

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

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

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

3. Установить конфигурацию Airbnb. Если вы используете npm 5+, вы можете запустить этот ярлык для установки конфигурации и всех ее зависимостей: npx install-peerdeps --dev eslint-config-airbnb

4. Установить eslint-config-prettier (отключает форматирование для ESLint) и eslint-plugin-prettier (позволяет ESLint отображать ошибки форматирования при вводе) npm install -D eslint-config-prettier eslint-plugin-prettier

5. Создать .eslintrc.json файл в корневом каталоге вашего проекта:

   { "extends": ["airbnb", "prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": ["error"] }, }

6. Создайте .prettierrc file в корневом каталоге вашего проекта. Здесь вы сможете настроить параметры форматирования. Ниже я добавил несколько своих предпочтений, но я призываю вас прочитать больше о файле конфигурации Prettier

   { "printWidth": 100, "singleQuote": true }

7. Последний шаг - сделатьболее красивые форматы при сохранении. Вставьте "editor.formatOnSave": true в настройки пользователя в VSCode.

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