Гайд по ESLint и Prettier: от установки до автоматизации в VS Code
2026-02-21 22:45 Diff
https://skillbox.ru/media/code/eslint-i-prettier/

#статьи

  • 13 фев 2026
  • 0

Убираем хаос в форматировании и наводим порядок в коде.

Иллюстрация: Polina Vari для Skillbox Media

Автор статей о программировании, технологиях и гаджетах. Пишет код на JavaScript и Python. Любит веб-технологии, модные приложения и магию Apple.

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

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

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

Содержание

Мы рассчитываем, что вы уже знакомы с основами синтаксиса 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 — настроим редактор так, чтобы код проверялся линтером и форматировался при каждом сохранении файла уже без терминала.

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

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

Конфигурационный файл package.json в папке проекта eslint-prettier-demo
Скриншот: Visual Studio Code / Skillbox Media

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

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 и ниже), рекомендуется сразу обновиться.

Файл eslint.config.mjs после завершения мастера установки ESLint
Скриншот: Visual Studio Code / Skillbox Media

Теперь, когда 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

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

Скриншот: Visual Studio Code / Skillbox Media

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

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

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 не может её исправить, потому что не знает, какое условие вы хотели написать. Подобные логические ошибки необходимо исправлять вручную.

Исправленная версия файла badFile.js
Скриншот: Visual Studio Code / Skillbox Media

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

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

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

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

Мы установили Prettier, и в package.json отображается версия 3.8.1
Скриншот: Visual Studio Code / Skillbox Media

Для работы 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 должен пропускать при форматировании. Сюда входят папки с зависимостями, скомпилированным кодом, минифицированные файлы и файлы блокировки зависимостей. Форматировать их не нужно, поскольку они генерируются автоматически, либо оптимизированы для продакшена, либо создаются менеджерами пакетов и не предназначены для ручного редактирования.

Файлы .prettierrc и .prettierignore в VS Code
Скриншот: Visual Studio Code / Skillbox Media

Создадим файл 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 так, чтобы линтер и форматтер запускались автоматически при каждом сохранении файла.

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

Плагины ESLint и Prettier в магазине расширений VS Code
Скриншот: Visual Studio Code / Skillbox Media

Чтобы 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", }, }, ]);

Создайте папку .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.

Файлы settings.json и package.json в редакторе VS Code
Скриншот: Visual Studio Code / Skillbox Media

Создайте файл 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 )

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

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

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

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

npm install

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

Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе