Как настроить линтинг JavaScript в Visual Studio Code

Я, очевидно, большой поклонник использования стандартов кодирования всякий раз, когда вы пишете код на стороне сервера (независимо от того, WordPress это, PSR2 или что-то еще — пока вы что-то используете, я думаю, это хорошо).

Но когда дело доходит до написания кода на стороне клиента, а именно JavaScript для этого поста, мы не видим, чтобы он обсуждался так много, хотя я думаю, что это не менее важно. То же самое касается CSS, Sass или LESS, но это тема для другого поста.

Для последних проектов мы использовали руководство по стилю JavaScript Airbnb для наших проектов. Я фанат и думаю, что это помогает писать чистый, читаемый JavaScript (выглядит так, как будто его написал один и тот же человек — конечная цель стандартов кодирования, верно?).

В этом посте я расскажу о процессе его настройки в Visual Studio Code.

Анализ JavaScript в Visual Studio Code

В этом посте предполагается, что вы знакомы с настройкой Node Package Manager на локальном компьютере.

Если нет, то у меня есть руководство, как это сделать, в этом посте. Ярлык? Это буквально так же просто (после установки Homebrew):

После того, как вы его настроите (либо с помощью указанного поста, либо если он уже настроен), вы будете готовы двигаться дальше, фактически устанавливая необходимые инструменты для настройки JavaScript linting в Visual Studio Code.

1 Установка ESLint

Скажем, например, вы запускаете проект из каталога с именем acme в каталоге «Проекты» в Dropbox. Если это так, перейдите в каталог плагинов для указанного проекта. Вероятно, это будет выглядеть примерно так:

$ cd ~/Dropbox/Projects/acme/wp-content/plugins/acme-plugin

Для этого вам нужно установить ESLint и файлы конфигурации Airbnb. К счастью, это действительно легко сделать. В терминале просто введите следующую команду:

$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import

Я предполагаю, что ни один из вышеперечисленных пакетов еще не установлен. Если это так, например, eslint, вы можете удалить этот конкретный аргумент из строки выше.

Кроме того, важно понимать, что проект eslint-plugin-import важен для добавления поддержки импорта и экспорта модулей JavaScript.

2 Конфигурация ESLint

Перед настройкой конфигурации в Visual Studio Code необходимо выполнить еще один шаг. А именно, речь идет о создании конфигурационного файла ESLint. Из каталога acme-plugin, как показано выше, введите следующую команду:

$ touch .eslintrc.js

Это создаст пустой файл (или пустой точечный файл, как некоторые могут его называть), и именно здесь наша конфигурация будет ссылаться на руководство по стилю Airbnb.

В файл просто добавьте следующие строки кода конфигурации:

module.exports = {
  "extends": "airbnb-base"
};

Теперь, когда вы установили ESLint, у вас есть ссылка на руководство по стилю Airbnb и ссылка на поддержку дополнительного синтаксиса, пришло время настроить Visual Studio Code.

3 Настройка кода Visual Studio

На мой взгляд, это самая легкая часть. Откройте панель расширений любым удобным для вас способом (щелкнув значок или используя ярлык), а затем запустите поиск ESLint. Вы можете увидеть несколько результатов, но тот, который вам нужен, выглядит следующим образом:

Установите его, а затем перезагрузите код Visual Studio. Он должен быть установлен в настройках по умолчанию, что вы можете подтвердить, открыв настройки и найдя этот фрагмент кода:

// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,

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

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

Другие менеджеры пакетов?

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

Когда мне придет время использовать другой менеджер пакетов, в частности, Yarn, я также расскажу об этом.