Линтинг при сохранении в Visual Studio Code и ESLint

Development | Amber | Комментировать запись

Руководства по стилю позволяют нам писать последовательный, чистый код, который можно повторно использовать. А с помощью линтеров эти правила можно автоматизировать. Это избавит вас от необходимости вручную проверять отступы или использование кавычек и т.п.

Visual Studio Code может поддерживать линтинг при каждом сохранении кода. Частая проверка кода полезна для рабочего процесса, ведь она обеспечит своевременное выявление мелких проблем, благодаря чему они не успеют сбиться в одну большую проблему и не повлияют на развертывание кода.

В этом мануале вы узнаете, как установить ESLint, создать правила и включить опцию codeActionsOnSave в Visual Studio Code.

Требования

• Загрузите и установите последнюю версию Visual Studio Code.
• Установите Node.js локально. Инструкции по установке зависят от дистрибутива: Mac OS, Ubuntu, CentOS, Debian.

Это руководство было проверено на версиях Node v16.6.2, npm v7.21.0, eslint v7.32.0 и Visual Studio Code v1.59.1.

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

Существуют разные линтеры, предназначенные для разных языков и типов проектов. Для этого руководства вам потребуется установить и настроить ESLint.

Сначала создайте новый каталог проекта:

mkdir eslint-save-example

Затем перейдите в этот каталог:

cd eslint-save-example

Инициализируйте новый проект:

npm init -y

С помощью этой команды установите eslint:

npm install eslint@7.32.0

После чего инициализируйте eslint:

npx eslint --init

На экране появятся вопросы. Ответьте на них следующим образом:

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? What format do you want your config file to be in? JavaScript

На этом этапе у вас есть новый проект с файлами package.json и .eslintrc.js.

Чтобы использовать ESLint в Visual Studio Code, вы должны установить расширение ESLint, доступное по этой ссылке.

2: Внесение ошибок

Давайте создадим файл JavaScript по имени index.js и намеренно нарушим в нем общие правила: установим несогласованные интервалы и отступы, кавычки и точки с запятой:

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

Откройте файл в Visual Studio Code и обратите внимание на то, как линтер ESLint отмечает нарушение правил: helloYou подчеркнуто. При наведении курсора на эту строку в Visual Studio Code отображается следующая всплывающая подсказка:

'helloYou' is assigned a value but never used

Это связано с тем, что правило .eslint (no-unused-vars) включено (eslint:recommended).

Мы можем решить эту проблему, используя переменную:

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

console.log(helloYou)

Чтобы устранить другие проблемы, нужно добавить новые правила.

3: Добавление правил

Команда eslint –init создала файл по имени eslintrc.js (или же .yml или .json, если вы выбрали этот вариант). Сейчас этот файл выглядит так:

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
    'node': true
  },
  'extends': 'eslint:recommended',
  'parserOptions': {
    'ecmaVersion': 12,
    'sourceType': 'module'
  },
  'rules': {
  }
};

Давайте добавим правила, отслеживающие соблюдение интервалов и отступов и применение одинарных кавычек (а не двойных). Также мы установим правило для обязательного  использования точки с запятой в конце строки.

module.exports = {
  // ...
  'rules': {
    'quotes': ['error', 'single'],
    // we want to force semicolons
    'semi': ['error', 'always'],
    // we use 2 spaces to indent our code
    'indent': ['error', 2],
    // we want to avoid extraneous spaces
    'no-multi-spaces': ['error']
  }
};

Сохраните изменения в файле.

Откройте созданный ранее файл JavaScript в редакторе кода. Теперь здесь будут указаны все нарушенные правила.

Если у вас установлено расширение ESLint, вы можете использовать Ctrl+Shift+P, чтобы развернуть палитру команд. Затем найдите ESLint: Fix all auto-fixable Problems и нажмите Enter (или Return).

Все обнаруженные в index.js ошибки будут исправлены автоматически:

const helloYou = (name)=> {
  name = 'you' || name ;
  console.log('hello' + name + '!' );
};
console.log(helloYou());

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

4: Включение опции codeActionsOnSave

Запускать ESLint: Fix all auto-fixable Problems вручную не очень надежно. Лучше запускать линтинг автоматически, при каждом сохранении работы. Вы можете настроить ESLint так, чтобы он автоматически запускал проверку каждый раз, когда вы нажимаете Ctrl+S (или Command+S).

Чтобы ESLint правильно работал, вы должны изменить настройки Visual Studio Code. Откройте File > Preferences > Settings (или Code > Preferences > Settings).

В этом руководстве мы изменим настройки рабочей области – также эти настройки можно применить для всех проектов. Кликните Workspace и найдите Code Actions On Save:

Editor: Code Actions On Save
Code action kinds to be run on save.
Edit in settings.json

Затем кликните settings.json.

{
  "editor.codeActionsOnSave": null
}

В settings.json вставьте следующий код:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"]
 }

Теперь отмените исправления, которые вы внесли в созданный ранее файл JavaScript. Сохраните файл. После этого все обнаруженные в нем ошибки будут устранены автоматически.

Заключение

В этом руководстве вы установили ESLint, создали правила проверки и включили функцию codeActionsOnSave в Visual Studio Code.