Конфигурация Google

Конфигурация Google для ESLint представляет собой набор готовых правил, основанных на внутреннем руководстве по стилю JavaScript компании Google. Использование такой конфигурации позволяет стандартизировать оформление кода, обеспечить единообразие проекта и сократить количество споров по поводу форматирования и стиля программирования.

Пакет распространяется через конфигурацию eslint-config-google и подключается как расширение (extend) к основной конфигурации ESLint.

Основные особенности:

  • строгий контроль форматирования;
  • единый стиль написания кода;
  • обязательное использование определённых соглашений по отступам и пробелам;
  • ограничения на некоторые конструкции языка;
  • высокая совместимость с большими корпоративными проектами.

Установка конфигурации Google

Для подключения конфигурации необходимо установить ESLint и пакет с правилами Google.

npm install --save-dev eslint eslint-config-google

После установки конфигурация может быть подключена через свойство extends.

Для старого формата конфигурации (.eslintrc):

{
  "extends": ["google"]
}

Для нового Flat Config:

import google from "eslint-config-google";

export default [
  google
];

После подключения все правила из набора Google становятся активными автоматически.

Структура конфигурации

Минимальная конфигурация может выглядеть следующим образом:

{
  "extends": ["google"]
}

Однако на практике обычно используются дополнительные параметры.

Пример:

{
  "extends": ["google"],
  "env": {
    "browser": true,
    "node": true,
    "es2023": true
  },
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  }
}

Здесь дополнительно задаются:

  • окружение браузера;
  • окружение Node.js;
  • поддержка современных возможностей ECMAScript;
  • использование ES-модулей.

Правила отступов

Одним из наиболее заметных требований Google Style Guide являются двухпробельные отступы.

Правильно:

function calculatePrice(price) {
  if (price > 100) {
    return price * 0.9;
  }

  return price;
}

Неправильно:

function calculatePrice(price) {
    if (price > 100) {
        return price * 0.9;
    }

    return price;
}

Ошибка возникает из-за использования четырёх пробелов вместо двух.

Соответствующее правило:

"indent": ["error", 2]

Использование точек с запятой

Конфигурация Google требует обязательного использования точек с запятой.

Правильно:

const user = "Alex";
const age = 25;

Неправильно:

const user = "Alex"
const age = 25

Правило:

"semi": ["error", "always"]

Такой подход уменьшает вероятность неоднозначностей, связанных с автоматической вставкой точек с запятой механизмом JavaScript.

Использование одинарных кавычек

Google Style Guide предпочитает одинарные кавычки.

Правильно:

const message = 'Hello';

Неправильно:

const message = "Hello";

Соответствующее правило:

"quotes": ["error", "single"]

Исключением являются ситуации, когда строка содержит одинарную кавычку и её экранирование ухудшает читаемость.

Например:

const text = "I'm learning ESLint";

Ограничение длины строки

Google рекомендует ограничивать длину строки.

Пример правила:

"max-len": ["error", 100]

Нежелательно:

const text = 'Очень длинная строка, которая значительно превышает установленное ограничение по количеству символов и ухудшает читаемость исходного кода.';

Предпочтительно:

const text =
  'Очень длинная строка, которая значительно превышает установленное ' +
  'ограничение по количеству символов.';

Контроль длины строк особенно полезен при работе в команде и просмотре изменений в системах контроля версий.

Правила для переменных

Конфигурация Google поощряет использование современных способов объявления переменных.

Предпочтительно:

const API_URL = 'https://example.com';

Если значение изменяется:

let counter = 0;

counter++;

Нежелательно:

var counter = 0;

Для этого используется правило:

"no-var": "error"

Проверка неиспользуемых переменных

Одной из наиболее полезных проверок является обнаружение неиспользуемых переменных.

Проблемный код:

function getUser() {
  const token = getToken();

  return {};
}

Переменная token нигде не используется.

ESLint сообщит об ошибке благодаря правилу:

"no-unused-vars": "error"

После исправления:

function getUser() {
  return {};
}

Код становится чище и понятнее.

Контроль пробелов

Google уделяет большое внимание единообразию пробелов.

Правильно:

if (isAdmin) {
  console.log('Access granted');
}

Неправильно:

if(isAdmin){
  console.log('Access granted');
}

Проверяются:

  • пробелы после ключевых слов;
  • пробелы вокруг операторов;
  • пробелы внутри фигурных скобок;
  • пробелы после запятых.

Пример корректного оформления объекта:

const user = {
  name: 'John',
  age: 30
};

Фигурные скобки обязательны

Google требует использование фигурных скобок даже для однострочных блоков.

Правильно:

if (isAdmin) {
  deleteUser();
}

Неправильно:

if (isAdmin)
  deleteUser();

Или:

if (isAdmin) deleteUser();

Соответствующее правило:

"curly": ["error", "multi-line"]

На практике многие проекты дополнительно усиливают это требование.

Проверка сравнения значений

Рекомендуется использовать строгое сравнение.

Правильно:

if (count === 0) {
  reset();
}

Неправильно:

if (count == 0) {
  reset();
}

Правило:

"eqeqeq": "error"

Строгое сравнение предотвращает ошибки, возникающие из-за неявного преобразования типов.

Например:

0 == false;

вернёт:

true

Тогда как:

0 === false;

вернёт:

false

Запрет лишних точек с запятой

ESLint автоматически обнаруживает избыточные символы.

Проблемный код:

const user = {};
;
;

Правило:

"no-extra-semi": "error"

Исправленный вариант:

const user = {};

Контроль пустых блоков

Пустые конструкции часто свидетельствуют о незавершённой логике.

Нежелательно:

if (isReady) {

}

Правило:

"no-empty": "error"

Допустимым считается наличие комментария:

if (isReady) {
  // Будет реализовано позже
}

Работа с функциями

Конфигурация Google предъявляет ряд требований к оформлению функций.

Пример:

function calculateTotal(price, tax) {
  return price + tax;
}

Для небольших обработчиков часто используются стрелочные функции:

const calculateTotal = (price, tax) => {
  return price + tax;
};

Если функция состоит из одного выражения:

const double = (value) => value * 2;

Именование идентификаторов

Google Style Guide определяет общие соглашения по именованию.

Переменные и функции

Используется camelCase.

const firstName = 'Alex';

function getUserData() {
  return {};
}

Конструкторы классов

Используется PascalCase.

class UserService {
  getUser() {}
}

Константы

Используются заглавные буквы и подчёркивания.

const MAX_RETRY_COUNT = 5;

Работа с объектами

Google рекомендует аккуратное форматирование объектов.

Пример:

const user = {
  id: 1,
  name: 'John',
  role: 'admin'
};

При большом количестве свойств:

const settings = {
  enableCache: true,
  enableLogging: true,
  requestTimeout: 5000,
  maxConnections: 10
};

Такой стиль повышает читаемость и упрощает поддержку.

Настройка собственных правил поверх Google

Конфигурация Google может выступать базой для проекта, а отдельные правила могут быть переопределены.

Пример:

{
  "extends": ["google"],
  "rules": {
    "max-len": ["warn", 120],
    "quotes": ["error", "double"]
  }
}

В данном случае:

  • длина строки увеличена до 120 символов;
  • вместо одинарных кавычек используются двойные.

ESLint сначала загружает конфигурацию Google, а затем применяет пользовательские переопределения.

Использование с TypeScript

Для TypeScript конфигурация Google обычно применяется совместно с пакетом TypeScript ESLint.

Установка:

npm install --save-dev \
eslint \
eslint-config-google \
typescript \
typescript-eslint

Пример Flat Config:

import google from 'eslint-config-google';
import tseslint from 'typescript-eslint';

export default [
  ...tseslint.configs.recommended,
  google
];

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

  • правила Google Style Guide;
  • анализ типов TypeScript;
  • дополнительные проверки TypeScript ESLint.

Проверка кода из командной строки

Запуск проверки выполняется командой:

npx eslint .

Проверка конкретного файла:

npx eslint src/index.js

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

npx eslint . --fix

ESLint способен автоматически исправлять множество нарушений:

  • отступы;
  • пробелы;
  • кавычки;
  • точки с запятой;
  • форматирование объектов;
  • форматирование массивов.

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

Наиболее распространённым вариантом является использование ESLint в редакторе Visual Studio Code.

После установки расширения ESLint ошибки отображаются непосредственно в процессе редактирования:

const message = "Hello"

Редактор подсветит:

  • неправильные кавычки;
  • отсутствие точки с запятой.

После сохранения документа возможна автоматическая коррекция:

const message = 'Hello';

Интеграция с редактором значительно ускоряет соблюдение требований конфигурации Google и позволяет обнаруживать проблемы ещё до запуска линтера из командной строки.

Оглавление