Как настроить 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 с похорошела (формат-на-сохранения), с машинопись анализатором и 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 с автофиксом при сохранении?

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. Последний шаг - убедиться, что Prettier форматирует при сохранении. Вставить"editor.formatOnSave": true в свои пользовательские настройки в VSCode.

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

Answer 2

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

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