Шаг 4. Добавление Prettier и ESLint в готовый проект

Перед добавлением чего-либо в проект нужно проверить, работает ли он вообще. Для этого в терминале вводим команду npm start или, если исходная сборка не менялась — npm run serve.

После ввода команды должен локально запуститься devServer, но только в том случае, если все пути указаны правильно. В противном случае в консоль будет выведена ошибка: сервер не запустился из-за неправильно указанного пути входной точки. Также есть вариант: сервер запустится, и в открытом окне браузера откроется наш проект — либо с ошибками, либо без. Всё зависит от того, правильно ли указаны пути.

Далее вводим две команды.

Первая — npm i prettier -D. Во время загрузки нужно создать файл .prettierrc и внести в него необходимые правила.

В итоге у нас получится такой конфиг Prettier:

module.exports = {
 trailingComma: 'all',
 tabWidth: 2,
 semi: true,
 singleQuote: true,
 printWidth: 120,
 arrowParens: 'always',
 endOfLine: 'auto',
 bracketSpacing: false,
 embeddedLanguageFormatting: 'auto',
 htmlWhitespaceSensitivity: 'css',
 insertPragma: false,
 quoteProps: 'as-needed',
 requirePragma: false,
 useTabs: false,
};

• trailingComma — отвечает за постановку точки с запятой;
• tabWidth — отвечает за размер отступов от края;
• semi — отвечает за постановку запятых;
• singleQuote — одинарные кавычки;
• printWidth — максимальная длина строки;
• arrowParens — отступ между функцией и её аргументами;
• endOfLine — конец линии, перенос строк;
• bracketSpacing — отступы в фигурных кавычках;
• embeddedLanguageFormatting — автоматическое обнаружение языка, который нужно форматировать;
• htmlWhitespaceSensitivity — работает также с инлайновыми стилями;
• insertPragma — специальный способ форматирования;
• quoteProps — кавычки для свойств;
• requirePragma — форматирование jsdoc (типизация в JS);
• useTabs — использование табов.

Вторая команда — npm init @eslint/config.

Когда мы ответим на вопросы, появится файл в выбранном формате со следующими полями:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "airbnb-base",
  "overrides": [
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": 1,
    "no-console": 0,
    "no-plusplus": 0,
    "no-debugger": 1,
  }
}

Здесь нас интересует поле rules, куда мы вписываем правила. По умолчанию, если вы выбрали стайлгайд AirBnB, он будет требовать постановку двойных кавычек, точек с запятой и отступов между переменными.

Мы добавили в проект правила:

• no-unused-vars — нельзя объявлять переменные и не использовать их;
• no-console — разрешён console.log();
• no-plusplus — можно использовать ++;
• no-debugger — нельзя использовать дебагер;

Если правила будут нарушены, проект не соберётся.

В нашем проекте (его конфиге, собранном с помощью webpack init) уже есть Babel. О его дальнейшей настройке поговорим в следующих модулях.