Home » Линтинг и форматирование кода с ESLint в VS Code

Линтинг и форматирование кода с ESLint в VS Code

Знаете, что самое раздражающее в веб-разработке? Когда ваш код работает идеально, но выглядит как будто его писали шимпанзе с похмелья. Или когда в команде каждый форматирует код по-своему, и git diff превращается в настоящий хаос. Линтинг и форматирование — это не про красоту (хотя и про неё тоже), это про читаемость, поддерживаемость и банальную экономию времени. Сегодня разберём, как настроить ESLint в VS Code так, чтобы ваш код не просто работал, а выглядел профессионально.

Как это работает под капотом

ESLint — это статический анализатор кода, который проверяет ваш JavaScript на соответствие определённым правилам. Он работает по принципу AST (Abstract Syntax Tree), то есть разбирает код на токены и анализирует их структуру.

Основные компоненты экосистемы:

ESLint Core — основной движок анализа
Правила (Rules) — конкретные проверки кода
Конфигурации (Configs) — наборы правил (Airbnb, Standard, Google)
Плагины (Plugins) — дополнительные правила для фреймворков
Парсеры (Parsers) — для TypeScript, Babel и других

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

Пошаговая настройка с нуля

Шаг 1: Установка ESLint

Сначала устанавливаем ESLint глобально или локально в проект:

# Глобальная установка (не рекомендуется для продакшена)
npm install -g eslint

# Локальная установка (правильный подход)
npm install --save-dev eslint

# Или с Yarn
yarn add --dev eslint

Шаг 2: Инициализация конфигурации

# Интерактивная настройка
npx eslint --init

# Или создаём конфиг вручную
touch .eslintrc.json

Пример базового конфига для современного JavaScript:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Шаг 3: Установка расширения VS Code

Устанавливаем официальное расширение ESLint от Microsoft из marketplace или через командную строку:

code --install-extension dbaeumer.vscode-eslint

Шаг 4: Настройка VS Code

Добавляем в settings.json вашего проекта или глобальные настройки:

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  "eslint.run": "onType"
}

Конфигурация	Особенности	Подходит для	Строгость
eslint:recommended	Базовые правила, минимум ограничений	Начинающих, личных проектов	Низкая
Airbnb	Очень строгие правила, подробная документация	Команд, enterprise проектов	Высокая
Standard	Без точек с запятой, разумные дефолты	Быстрого старта, Open Source	Средняя
Google	Правила Google, акцент на читаемость	Корпоративных проектов	Средняя

Практические примеры и кейсы

Пример 1: Настройка для React проекта

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "plugins": ["react", "react-hooks"],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off"
  }
}

Пример 2: TypeScript + Node.js

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": "warn"
  }
}

Пример 3: Конфиг для серверного окружения

{
  "env": {
    "node": true,
    "es2021": true
  },
  "extends": ["eslint:recommended"],
  "rules": {
    "no-console": "off",
    "no-process-exit": "error",
    "handle-callback-err": "error"
  }
}

Интеграция с другими инструментами

Prettier + ESLint

Классическая связка для форматирования и линтинга:

# Установка
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

# .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

# .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Husky + lint-staged

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

# Установка
npm install --save-dev husky lint-staged

# package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

Автоматизация и CI/CD

GitHub Actions

# .github/workflows/lint.yml
name: ESLint

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16'
    - run: npm ci
    - run: npm run lint

Скрипты в package.json

{
  "scripts": {
    "lint": "eslint src/",
    "lint:fix": "eslint src/ --fix",
    "lint:watch": "esw src/ --watch",
    "lint:staged": "lint-staged"
  }
}

Продвинутые техники

Кастомные правила

Создание собственного правила для специфичных кейсов:

// eslint-rules/no-console-log.js
module.exports = {
  create: function(context) {
    return {
      CallExpression(node) {
        if (node.callee.type === 'MemberExpression' &&
            node.callee.object.name === 'console' &&
            node.callee.property.name === 'log') {
          context.report(node, 'Unexpected console.log statement');
        }
      }
    };
  }
};

Условные конфиги

# .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
};

Альтернативные решения

Инструмент	Язык	Особенности	Производительность
ESLint	JavaScript	Наиболее популярный, гибкий	Средняя
Rome	Rust	Всё-в-одном: линтер, форматер, бандлер	Высокая
Deno lint	Rust	Встроенный в Deno, быстрый	Очень высокая
SWC	Rust	Быстрый компилятор с линтингом	Очень высокая

Оптимизация производительности

Кэширование

# Использование кэша ESLint
eslint --cache --cache-location ./node_modules/.cache/eslint

# В package.json
{
  "scripts": {
    "lint": "eslint --cache src/"
  }
}

Исключения для больших проектов

# .eslintignore
node_modules/
dist/
build/
coverage/
*.min.js

Интересные факты и нестандартные применения

ESLint можно использовать не только для JavaScript:

JSON — с плагином eslint-plugin-json
Markdown — с eslint-plugin-markdown для проверки code blocks
GraphQL — с @graphql-eslint/eslint-plugin
Vue.js — с eslint-plugin-vue

Статистика показывает, что проекты с настроенным линтингом имеют на 40% меньше багов в production. ESLint используется в 78% JavaScript проектов на GitHub (по данным State of JS 2023).

Развёртывание на сервере

Для автоматизации линтинга в CI/CD пайплайне вам понадобится надёжный сервер. Рассмотрим настройку на VPS или выделенном сервере:

# Dockerfile для CI
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run lint
RUN npm run build

Заключение и рекомендации

ESLint в VS Code — это не просто инструмент, это культура разработки. Правильно настроенный линтинг экономит часы отладки и делает код консистентным в команде.

Мои рекомендации:

Начинайте с eslint:recommended, постепенно добавляя правила
Используйте Prettier для форматирования, ESLint для логики
Настройте pre-commit хуки для принудительного линтинга
Не отключайте правила без веских причин
Регулярно обновляйте конфигурацию под нужды проекта

Для серверных приложений особенно важно настроить линтинг в CI/CD, чтобы плохой код просто не попадал в production. Помните: время, потраченное на настройку инструментов, окупается многократно при разработке и поддержке проекта.

Полезные ссылки:

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

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

Линтинг и форматирование кода с ESLint в VS Code

Как это работает под капотом

Пошаговая настройка с нуля

Шаг 1: Установка ESLint

Шаг 2: Инициализация конфигурации

Шаг 3: Установка расширения VS Code

Шаг 4: Настройка VS Code

Популярные конфигурации и их особенности

Установка популярных конфигураций

Практические примеры и кейсы

Пример 1: Настройка для React проекта

Пример 2: TypeScript + Node.js

Пример 3: Конфиг для серверного окружения

Интеграция с другими инструментами

Prettier + ESLint

Husky + lint-staged

Автоматизация и CI/CD

GitHub Actions

Скрипты в package.json

Продвинутые техники

Кастомные правила

Условные конфиги

Альтернативные решения

Оптимизация производительности

Кэширование

Исключения для больших проектов

Интересные факты и нестандартные применения

Развёртывание на сервере

Заключение и рекомендации

Leave a reply Cancel

Линтинг и форматирование кода с ESLint в VS Code

Как это работает под капотом

Пошаговая настройка с нуля

Шаг 1: Установка ESLint

Шаг 2: Инициализация конфигурации

Шаг 3: Установка расширения VS Code

Шаг 4: Настройка VS Code

Популярные конфигурации и их особенности

Установка популярных конфигураций

Практические примеры и кейсы

Пример 1: Настройка для React проекта

Пример 2: TypeScript + Node.js

Пример 3: Конфиг для серверного окружения

Интеграция с другими инструментами

Prettier + ESLint

Husky + lint-staged

Автоматизация и CI/CD

GitHub Actions

Скрипты в package.json

Продвинутые техники

Кастомные правила

Условные конфиги

Альтернативные решения

Оптимизация производительности

Кэширование

Исключения для больших проектов

Интересные факты и нестандартные применения

Развёртывание на сервере

Заключение и рекомендации

More stories

Leave a reply Cancel