Настройка ESLint и Prettier для проекта Vue.js

Development, Java | Amber | Комментировать запись

Prettier берет написанный вами код, преобразует его в AST, а затем выводит этот AST в более красивом (и чистом) формате. Цель этого инструмента – автоматизировать работу по форматированию кода, сделать его удобочитаемым. Prettier был быстро принят в React и более крупные экосистемы JavaScript (и даже в CSS!), но не в Vue – из-за отсутствия поддержки однофайловых компонентов (файлов .vue). Однако с версии 1.10 Prettier официально поддерживает файлы *.vue.

В этой статье вы узнаете, как настроить Prettier и ESLint для проекта Vue.

Требование

• Для выполнения этого мануала вам понадобится локальная установка Node.js. Следуйте инструкциям для вашего дистрибутива: mac OS, Ubuntu, Debian, CentOS.
• Базовые навыки по настройке проектов Vue.js не будут лишними.

Это руководство было протестировано на Node v16.5.0, npm v7.20.0, vue v2.6.11, eslint v6.7.2, prettier v2.3.2, eslint-config-prettier v8.3.0 и eslint-plugin-vue v6.2.2.

1: Подготовка проекта

Для начала нужно глобально установить prettier из NPM (если вы еще этого не сделали). Его можно устанавливать и индивидуально для отдельных проектов, но делать этого не рекомендуется.

npm install --global prettier@2.3.2

Затем запустите новый проект Vue, используя @vue/cli со стандартными конфигурациями:

npx @vue/cli create vue-eslint-prettier-example --default

Затем перейдите в каталог нового проекта:

cd vue-eslint-prettier-example

Добавьте в проект интеграционные пакеты eslint-prettier:

npm install --save-dev eslint-plugin-prettier@6.2.2 eslint-config-prettier@8.3.0

Примечание: На данном этапе вы можете столкнуться с ошибкой:

unable to resolve dependency tree

Она возникает из-за конфликта между версией eslint, которую устанавливает @vue/cli, и версией, объявленной этими интеграционными пакетами. Вы можете использовать флаг –legacy-peer-deps, чтобы обойти эту ошибку.

Теперь у вас есть новый тестовый проект Vue с поддержкой ESLint и Prettier.

2: Добавление конфигурации

Если вы создали свой проект с помощью @vue/cli, вы найдете конфигурацию ESLint внутри файла package.json в свойстве eslintConfig. Откройте этот файл.

Добавьте “plugin:prettier/recommended” во вложенное свойство extends после “plugin:vue/essential”, чтобы включить в ESLint поддержку Prettier с параметрами по умолчанию:

{
  // ...
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  // ...
}

Если же вы используете не новый, а уже существующий проект с уже настроенным eslint, внесите те же изменения в файл .eslintrc.js (или в конфигурационный файл ESLint любого другого формата, если вы не работаете с .js):

module.exports = {
  "root": true,
  "extends": [
    "plugin:vue/essential",
    "plugin:prettier/recommended",
    "eslint:recommended"
  ],
}

Теперь ESLint будет использовать правила Prettier, рекомендованные по умолчанию.

3: Использование ESLint с Prettier

Если вы еще не установили и не настроили eslint для Vue, обратитесь к этому мануалу. В нем также показано, как настроить линтинг файлов Vue в реальном времени с помощью VSCode и Atom.

Установив eslint и настроив его, вы можете выполнить следующую команду:

eslint --fix

Эта команда вызовет Prettier и с его помощью автоматически переформатирует и улучшит ваши файлы JS и Vue. Теперь вам больше не придется беспокоиться о коде и рвать на себе волосы из-за стилей. Prettier будет автоматически улучшать код всех разработчиков вашей команды, кто использует eslint.

Заключение

В этом мануале вы узнали, как настроить Prettier и ESLint для улучшения кода вашего проекта Vue.