Когда дело доходит до написания кода, одной из самых раздражающих вещей являются эти красные волнистые линии. Конечно, они полезны, поскольку информируют вас о наличии ошибки, но когда вы нажимаете «Быстрое исправление», вы получаете сообщение о том, что исправления не найдены. Ну тогда почему неправильно?

Прежде чем мы обратимся к исправлению красных волнистых линий, мы должны сначала понять, почему они там вообще. Они являются результатом поиска ошибок линтером кода. Линтер кода находит проблемные шаблоны или код, который не соответствует определенным правилам стиля. Есть несколько популярных линтеров, которые можно установить через плагин VS Code. Одним из них является ESLint.

Инструменты линтинга позволяют разработчикам находить проблемы в своем коде, не выполняя его. Они применяют правила к коду и помечают элементы, нарушающие эти правила. Правила могут варьироваться от стиля кода до более сложных правил, таких как переменная объявлена, но никогда не используется.

Linting помогает улучшить ваш код, сделать его более читабельным и выглядеть так, как будто он был написан одним человеком. Это позволяет разным разработчикам подключаться к проекту в разное время и иметь возможность понять, что делает код.

Для начала мы должны установить ESLint. Мы можем сделать это глобально с помощью:

npm install -g eslint

Далее нам нужно настроить правила для применения ESLint, создав файл конфигурации .eslintrc. От типа терминала:

eslint --init

ESLint включен по умолчанию.

Команды

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

Create ESLint Configuration

Пример конфигурации выглядит так:

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

Если будут обнаружены какие-либо ошибки, они будут отмечены красной волнистой линией. Вы можете исправить все автоматически устраняемые проблемы, перейдя в палитру команд и набрав:

Fix all auto-fixable problems

Правила

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

Например, следующее правило обеспечивает постоянный интервал после // или /* в комментарии.

"spaced-comment": ["error", "always", {
    "line": {
        "markers": ["/"],
        "exceptions": ["-", "+"]
    },
    "block": {
        "markers": ["!"],
        "exceptions": ["*"],
        "balanced": true
    }
}]

После того, как вы решили, какие правила включить, вы должны установить уровни ошибок. Каждый уровень ошибки может быть определен следующим образом:

  • 0 - Отключить правило
  • 1 - Включить правило как предупреждение
  • 2 - Включить правило как ошибку

Разница между ошибкой и предупреждением заключается в коде выхода, который будет у eslint после его завершения. Если обнаружены какие-либо ошибки, ESLint завершит работу с кодом выхода 1, в противном случае он завершится с кодом 0. Если вы проводите линтинг на этапе сборки, это позволяет вам контролировать, какие правила должны «сломать вашу сборку», а какие следует рассматривать как предупреждения.

Узнайте, как подробно настроить правила здесь.

Гид по стилю

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

"extends": ["eslint:recommended", "airbnb"]

Вы можете использовать следующую ссылку для установки https://www.npmjs.com/package/eslint-config-airbnb.

Теперь вы готовы начать кодирование в чистой и организованной среде.