Гайд по ESLint и Prettier: от установки до автоматизации в VS Code

Среди разработчиков принято писать не только рабочий, но и красивый, читаемый код. Опытные программисты стараются следить за единообразием отступов, пробелов, имён переменных и знаков-разделителей, чтобы код был понятен всем участникам команды. Это часто порождает споры о стандартах форматирования.

Чтобы вам было проще следить за соблюдением правил оформления, можно использовать специальные инструменты — линтеры и форматтеры. Линтеры анализируют код на наличие ошибок и потенциальных проблем, а также проверяют соблюдение стандартов написания. Форматтеры приводят код к единому стилю.

В каждом языке программирования популярны свои линтеры и форматтеры. В экосистеме JavaScript разработчики обычно используют ESLint и Prettier. В этой статье вы узнаете, как их установить, настроить и начать применять в своих проектах.

Содержание

• Подготовка к работе
• Установка и настройка ESLint
• Установка и настройка Prettier
• Автоматизация ESLint и Prettier в VS Code

Подготовка к работе

Мы рассчитываем, что вы уже знакомы с основами синтаксиса JavaScript, понимаете, что такое Node.js и менеджер пакетов NPM. Также мы будем использовать редактор кода VS Code, поскольку это один из самых популярных бесплатных редакторов с широкой поддержкой расширений. Во многих других редакторах процесс настройки ESLint и Prettier будет похожим.

После установки Node.js и NPM убедитесь, что всё работает корректно. Для этого откройте терминал и выполните следующие команды:

node --version
npm --version

При успешном выполнении команд вы увидите номера версий. Если же вы получили ошибку command not found, это означает, что Node.js не установлен или не добавлен в системную переменную PATH. В таком случае скачайте последнюю LTS-версию с официального сайта Node.js. Менеджер пакетов NPM отдельно устанавливать не нужно: он поставляется вместе с Node.js. После этого перезапустите терминал и повторно выполните команды для проверки версий.

На этом подготовка закончена, и далее мы поступим следующим образом: сначала установим и настроим ESLint и Prettier, научимся запускать их вручную через команды в терминале. Затем мы автоматизируем процесс проверки и форматирования в VS Code — настроим редактор так, чтобы код проверялся линтером и форматировался при каждом сохранении файла уже без терминала.

Читайте также:

Visual Studio Code: установка, настройка, русификация и список горячих клавиш

Установка и настройка ESLint

В этом разделе мы соберём небольшой JavaScript-проект и подключим к нему ESLint. Мы добавим линтер, создадим базовую конфигурацию, запустим первую проверку проекта и включим автоисправления, чтобы ESLint не только находил ошибки и нарушения правил, но и мог исправлять часть из них автоматически.

Шаг 1. Инициализируем проект

Создайте на компьютере новую папку и откройте её в VS Code. Затем откройте встроенный терминал и выполните команду npm init. Менеджер пакетов NPM задаст вам несколько вопросов о проекте — запросит название (package name), версию (version), описание (description), точку входа (entry point) и другие параметры. Для быстрой инициализации вы можете нажимать Enter и принимать значения по умолчанию. В результате в корне появится файл package.json, в котором будут содержаться метаданные проекта вместе со списком зависимостей.

Шаг 2. Устанавливаем ESLint

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

npm init @eslint/config@latest

После этого в терминале запустится мастер установки ESLint, который задаст несколько вопросов о проекте:

• Что вы хотите проверять? Оставьте JavaScript.
• Как вы планируете использовать ESLint? Выберите To check syntax and find problems — это означает проверку синтаксиса и поиск проблем.
• Какой тип модулей использует ваш проект? Нам подойдёт JavaScript modules (import/export).
• Какой фреймворк вы используете? Выберите None of these — никакой.
• Используете ли вы TypeScript? Здесь ответ No.
• Где работает ваш код? В браузере — Browser.

Когда только вы ответите на все вопросы, в директории проекта появится файл eslint.config.mjs. Это основной конфигурационный файл ESLint, который определяет, какие файлы проверять и какие правила применять при анализе кода.

Обратите внимание: начиная с версии ESLint 9.0 используется новый формат конфигурации — flat config (плоская конфигурация). В этом подходе все правила описываются в одном файле с помощью массива объектов конфигурации. Это более простой формат, который заменил старые файлы .eslintrc.* (например, .eslintrc.js, .eslintrc.json). Поэтому если в каком-то проекте вы встретите старую версию ESLint (8.x и ниже), рекомендуется сразу обновиться.

Шаг 3. Запускаем линтинг проекта

Теперь, когда ESLint установлен, посмотрим, как он работает на практике. Для примера создадим файл demo.js с типичными ошибками — специально добавим в код опечатки в именах функций, неиспользуемые переменные, избыточные присваивания и другие проблемы, которые наш линтер должен обнаружить.

function sum(a, b) {
  const temp = a + b;
  return a + b;
}

console.log(summ(2, 3));

let count = 5;
count = count;

if (true) {
  console.log("always");
}

Для запуска проверки выполним в терминале следующую команду:

npx eslint demo.js

После этого в терминале появится список ошибок:

Разберём обнаруженные ошибки:

• Мы создали функцию sum(a, b), но не использовали её в коде. ESLint считает такой код «мёртвым» и рекомендует пересмотреть, действительно ли нам нужна в проекте функция, которую нигде не вызывают.
• Переменной temp присвоили значение «a + b», но нигде её не используем.
• В строке console.log(summ(2, 3)) мы попытались вызвать функцию sum, но сделали опечатку в её названии.
• Переменной count присвоили значение, но нигде не использовали.
• Переменной count присваивается её собственное значение: count = count. Это бессмысленная операция, которая указывает на ошибку или опечатку.
• Условие в операторе if всегда истинно — true. ESLint рекомендует использовать динамическое выражение. Например, if(count > 0).

Шаг 4. Тестируем автоисправление ошибок

ESLint может не только указывать на ошибки, но и автоматически их исправлять. Например, он удаляет лишние пробелы, расставляет правильные кавычки и заменяет небезопасные let на const. Для этого используется команда --fix.

Однако перед запуском автоматического исправления нужно обновить правила в файле eslint.config.mjs. Откройте его и замените весь код на следующий:

import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { 
    files: ["**/*.{js,mjs,cjs}"], 
    plugins: { js }, 
    extends: ["js/recommended"], 
    languageOptions: { globals: globals.browser }
  },
  {
    rules: {
      quotes: ["error", "single"],
      semi: ["error", "always"],
      "comma-dangle": ["error", "always-multiline"],
      "object-curly-spacing": ["error", "always"],
      "array-bracket-spacing": ["error", "never"],
      "space-before-function-paren": ["error", "never"],
      "keyword-spacing": ["error", { before: true, after: true }],
      "space-in-parens": ["error", "never"],
      "no-multi-spaces": "error",
      "prefer-const": "error",
      "no-var": "error",
    },
  },
]);

Создадим файл badFile.js, в котором специально допустим множество ошибок и проигнорируем правила оформления кода:

let nums = [ 1, 2 ,3 ]
let user ={name:"John", city:"Riga" }
function greet ( name ) {
  if(true){console.log( "Hi," +name )}
  return { ok:true, nums: nums, user:user,}
}
console.log( greet( "Dan" ) )

Теперь перейдите в терминал и запустите автоматическое исправление:

npx eslint badFile.js --fix

Если вы всё сделали правильно, вместо let в коде появятся более безопасные объявления через const, двойные кавычки заменятся одинарными, а лишние пробелы и отступы исчезнут. Однако останется одна ошибка: error Unexpected constant condition no-constant-condition. Это ошибка if(true) — ESLint не может её исправить, потому что не знает, какое условие вы хотели написать. Подобные логические ошибки необходимо исправлять вручную.

Установка и настройка Prettier

ESLint подключён, теперь очередь Prettier. В этом разделе мы его установим, создадим конфигурационные файлы для настройки стиля и исключений, а затем запустим Prettier и убедимся, что он исправляет код по заданным правилам.

Шаг 1. Устанавливаем Prettier

Чтобы установить Prettier, выполните в терминале команду:

npm install --save-dev --save-exact prettier

Эта команда добавит Prettier в проект и зафиксирует его точную версию в файле package.json. Благодаря этому у всех участников команды будет установлена одна и та же версия Prettier, что исключит расхождения в форматировании кода и предотвратит возможные конфликты при работе с системой контроля версий Git.

Шаг 2. Настраиваем правила форматирования

Для работы Prettier создайте два конфигурационных файла: .prettierrc — определяет правила форматирования, и .prettierignore — указывает файлы и папки, которые необходимо исключить из автоматического форматирования.

Чтобы создать эти файлы, выполните в терминале такие команды:

node --eval "require('fs').writeFileSync('.prettierrc','{}\n')"
node --eval "require('fs').writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"

Откройте файл .prettierrc и добавьте правила форматирования:

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf"
}

Здесь мы настроили базовые правила оформления кода: одинарные кавычки, точки с запятой, отступы в два пробела и максимальную длину строки в 100 символов. Теперь Prettier будет автоматически приводить любой файл проекта к этому стилю.

Теперь откройте .prettierignore и добавьте исключения:

node_modules
dist
build
coverage
.next
out
.cache
*.min.js
*.min.css
*.map
package-lock.json
yarn.lock
pnpm-lock.yaml

Этот файл работает по принципу .gitignore — в нём перечислены папки и файлы, которые Prettier должен пропускать при форматировании. Сюда входят папки с зависимостями, скомпилированным кодом, минифицированные файлы и файлы блокировки зависимостей. Форматировать их не нужно, поскольку они генерируются автоматически, либо оптимизированы для продакшена, либо создаются менеджерами пакетов и не предназначены для ручного редактирования.

Шаг 3. Проверяем работу Prettier

Создадим файл prettierDemo.js и поместим в него плохо оформленный код:

const user={name:"John",age:17, skills:["js", "eslint","prettier" ], address:{city:"Riga", zip: 12345}}
function greet ( name ){console.log("Hi,"+name+"!"); return { ok:true, user:user, tags:["a","b","c"],}}
console.log( greet( "Dan" ) )

Чтобы исправить форматирование, выполните в терминале команду:

npx prettier prettierDemo.js --write

Флаг --write означает, что Prettier перезапишет файл с исправлениями. То есть форматтер автоматически расставит отступы, пробелы, заменит символы на правильные и приведёт код к единому стилю. Результат должен выглядеть так:

const user = {
  name: 'John',
  age: 17,
  skills: ['js', 'eslint', 'prettier'],
  address: { city: 'Riga', zip: 12345 },
};
function greet(name) {
  console.log('Hi,' + name + '!');
  return { ok: true, user: user, tags: ['a', 'b', 'c'] };
}
console.log(greet('Dan'));

Автоматизация ESLint и Prettier в VS Code

До этого мы запускали ESLint и Prettier вручную через команды в терминале — это помогло понять принцип их работы. Теперь давайте настроим VS Code так, чтобы линтер и форматтер запускались автоматически при каждом сохранении файла.

Шаг 1. Добавляем расширения

Откройте VS Code, перейдите в раздел Extensions (значок с четырьмя квадратами в левой панели) и найдите два расширения: ESLint от Microsoft и Prettier — Code formatter от Prettier. Установите оба расширения, нажав кнопку Install. После установки они автоматически активируются и начнут работать с конфигурационными файлами проекта (eslint.config.mjs и .prettierrc).

Шаг 2. Настраиваем интеграцию Prettier и ESLint

Чтобы ESLint и Prettier работали вместе без конфликтов, вам нужно установить дополнительный пакет. Он отключит в ESLint все правила форматирования, которые выполняет Prettier. Перейдите в терминал и выполните команду:

npm install --save-dev eslint-config-prettier

Теперь обновите файл eslint.config.mjs, чтобы отключить конфликтующие правила. Для этого замените весь предыдущий код следующим:

import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
import eslintConfigPrettier from "eslint-config-prettier";

export default defineConfig([
  { 
    files: ["**/*.{js,mjs,cjs}"], 
    plugins: { js }, 
    extends: ["js/recommended"], 
    languageOptions: { globals: globals.browser }
  },
  eslintConfigPrettier, // Отключает конфликтующие с Prettier правила
  {
    rules: {
      "prefer-const": "error",
      "no-var": "error",
    },
  },
]);

Шаг 3. Включаем форматирование и автоисправления при сохранении

Создайте папку .vscode в корне проекта, а в ней — файл settings.json со следующим содержимым:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

Разберём эти настройки:

• editor.formatOnSave: true — автоматически форматирует код при сохранении файла;
• editor.defaultFormatter — использует Prettier как форматтер по умолчанию для всех файлов;
• source.fixAll.eslint: «explicit» — ESLint исправляет найденные ошибки при сохранении файла;
• eslint.validate — указывает, для каких типов файлов работает ESLint.

Мы сделали так, чтобы правила форматирования и линтинга применялись только к текущему проекту и не влияли на глобальные настройки VS Code. Это удобно при работе с несколькими проектами — в каждом можно использовать разные соглашения о стиле кода. Например, в одном проекте могут быть настроены двойные кавычки и табуляция, а в другом — одинарные кавычки и пробелы.

Также для удобства добавьте в package.json следующие скрипты:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Теперь у вас есть четыре команды для работы со всем проектом:

• npm run lint — проверить весь проект на ошибки ESLint.
• npm run lint: fix — автоматически исправить ошибки во всём проекте.
• npm run format — отформатировать все файлы проекта.
• npm run format: check — проверить, правильно ли отформатированы все файлы.

Эти команды удобно использовать для автоматизации проверок в CI/CD-пайплайнах и для быстрой проверки всего проекта перед коммитом в Git.

Шаг 4. Тестируем автоправки при сохранении

Создайте файл test.js и напишите в нём плохо оформленный код:

let x=1;let y= 2
const sum=x +y
console.log( sum)

Нажмите Ctrl + S на Windows и Linux или Cmd + S на macOS для сохранения. После сохранения Prettier отформатирует код — добавит пробелы и расставит точки с запятой, а ESLint исправит let на const. Результат получится таким:

const x = 1;
const y = 2;
const sum = x + y;
console.log(sum);

Вот пример ещё одного неряшливого кода, который вы можете добавить в VS Code и попробовать самостоятельно отформатировать:

let user = {name:"Alex", age: 20, city:"Moscow"}
let skills=["js","eslint", "prettier"  ]
function greet ( name ){
console.log( "Hi,"+ name )
if(user.age > 18){console.log("adult")}
return { ok:true, user:user, skills:skills,}
}
greet( user.name )

Шаг 5. Собираем шаблон проекта

Технически каждый новый проект требует своей конфигурации, поскольку настройки ESLint, Prettier и VS Code хранятся локально в папке проекта. Поэтому, чтобы каждый раз не проделывать все шаги из этой статьи заново, вы можете сделать папку-шаблон и затем использовать её как основу для новых проектов.

Для этого создайте на компьютере папку project-template с базовой настройкой и поместите туда все конфигурационные файлы:

• package.json;
• eslint.config.mjs;
• .prettierrc;
• .prettierignore;
• .vscode/settings.json.

Когда начнёте новый проект, просто скопируйте эту папку и выполните команду:

npm install

Если вы часто создаёте новые проекты, рекомендуем хранить свой шаблон в Git-репозитории на GitHub. Это позволит вам легко клонировать его командой git clone и при необходимости обновлять конфигурацию с любого устройства.

Читайте также:

Основные команды для работы с Git и GitHub

Что дальше

Чтобы изменить или дополнить правила ESLint и Prettier, вам не нужно изобретать всё с нуля. Есть официальные руководства и готовые конфигурации:

• Документация по ESLint.
• Документация по Prettier.
• Справочник правил ESLint.
• Документация по параметрам Prettier.
• Awesome ESLint — список популярных конфигураций и плагинов.

Однако мы рекомендуем начинать с минимальной конфигурации, как в нашей статье. Добавляйте правила постепенно, по мере необходимости — только тогда, когда в вашем проекте возникает конкретная проблема, которую нужно решить. Если вы перегрузите проект сотнями правил сразу, это может замедлить работу редактора, усложнить разработку и вызвать множество ложных предупреждений.