Как подключить eslint к vs code

Как настроить ESLint и Prettier в VS Code и Create React App и подключить Airbnb стайлгайд

Настраиваем автоматическое форматирование кода и проверку на ошибки при помощи Prettier и ESLint согласно стайлгайду Airbnb.

Во время работы над последним проектом я опробовал в деле два прекрасных иструмента, ESLint и Prettier. Захотелось написать о том, что это такое, чем полезен линтер и prettier, как их настроить, и как использовать.

Что такое Lint?

Lint, или линтер — это инструмент для поиска ошибок в коде. Пример работы линтера в проекте Create React App, ниже:

Клавиатура моего ноутбука иногда срабатывает неправильно, и делает двойное нажатие клавиши, вместо однократного. В 8 и в 25 строке опечатка, вместо logo — logoo а вместо App — Appp
Линтер нашел эти ошибки и сообщил о них в терминал. Прекрасно!

Теперь можно их исправить, и все заработает как надо:

ESLint в Create React App и расширение для VS Code

В Create React App линтер уже установлен, он называется ESLint. Именно его сообщения об ошибках мы видим в терминале.

Существует так же ESLint расширение для VS Code:

Установив это расширение в VS Code, получим сообщения ESLint и подсветку ошибок в редакторе кода:

Настройка ESLint

У ESLint есть конфиг, в котором находятся правила, согласно которым он выполняет проверку кода. Как я говорил ранее, ESLint уже встроен в Create React App, и использует конфиг который называется eslint-config-react-app

В Create React App этот конфиг подключается к ESLint в package.json, 22 строка:

Eslint сейчас настроен так, как решили создатели CRA. Давайте инициализируем ESLint и заново сами все настроим, так, как нам необходимо. Для этого выполним команду:

Exit fullscreen mode

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

В конце мастер создаст файл настроек линтера, .eslintrc.json:

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

Установка и подключение дополнительных плагинов ESLint

Exit fullscreen mode

Если вы используете версию React старше 17, и не импортируете React from ‘react’ можно после установки этого плагина, добавить в конфиг .eslintrc.json строку «plugin:react/jsx-runtime», тогда ESLint не будет ругаться, что ‘React’ must be in scope when using JSX

В этом случае конфиг будет выглядеть так:

Exit fullscreen mode

подключим их, добавив строку «plugin:react-hooks/recommended» в .eslintrc.json:

Установим правила доступности для людей с ограниченными возможностями eslint-plugin-jsx-a11y

Exit fullscreen mode

добавляем «plugin:jsx-a11y/recommended» в .eslintrc.json:

установим правила, которые будут отвечать за синтаксис импортов и экспортов eslint-plugin-import

Exit fullscreen mode

добавим «plugin:import/recommended» в .eslintrc.json:

С ESLint мы пока что закончили, переходим к Prettier

Prettier

Prettier. Что это такое и зачем вообще нужно?

Prettier — это инструмент для автоматического форматирования кода.

Форматирование кода — это процесс придания коду определенного вида.

Prettier берет код, который вы ему дали, и преобразует этот код к единому стилю.

Вот простой пример:

Здесь у нас стандартный файл App.js из Create React App проекта, у которого я где то убрал, а где то добавил отступы и точки с запятыми в конце строк, в некоторых местах использовал длинные, плохо читаемые строки.

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

Установка Prettier в проект

Установка хорошо описана в официальной документации, пройдем ее вместе, по шагам.

Первым делом устанавливаем Prettier в наш Create React App проект, локально:

Exit fullscreen mode

Создаем пустой конфигурационный файл, .prettierrc.json в корне проекта:

Exit fullscreen mode

Отключаем конфликтующие правила ESLint

Теперь нужно сделать так, чтобы Prettier не конфликтовал с линтером. Дело в том, что когда ESLint ищет ошибки в коде, он руководствуется определенными правилами, которые хранятся в его конфиге. Эти правила отвечают как за качество кода, так и за стиль кода. Так вот, у Prettier есть свои собственные правила, которые тоже отвечают за стиль кода. Чтобы у линтера и Prettier не было конфликтов по части оформления кода, нужно отключить кофликтующие правила у линтера, чтобы за стиль кода отвечал только Prettier.
Сделать это можно очень просто, установив eslint-config-prettier

Exit fullscreen mode

Далее открываем конфиг нашего линтера, (файл .eslintrc.json), и добавляем «prettier» в конец массива:

Cтрока «prettier» в конфиге .eslintrc.json отключает конфликтующие с Prettier правила ESLint.
Теперь Prettier и линтер будут корректно работать вместе.

Мы установили Prettier в наш проект. Давайте теперь добавим поддержку Prettier в VS Code.

Интеграция Prettier в VS Code

Установим расширение Prettier для VS Code:

После того как мы установили расширение Prettier в VS Code, можно сделать так, чтобы Prettier автоматически форматировал наш код, когда мы сохраняем файл. Для этого нужно добавить два значения в JSON конфиг VS Code, (файл settings.json).

Чтобы открыть settings.json нужно, находясь в VS Code, нажать Ctrl + Shift + P , ввести в поиск «settings» и выбрать пункт Open Settings (JSON). Откроется файл settings.json.

Добавим в него следующие строки:

Exit fullscreen mode

Первая строка устанавливает Prettier как инструмент форматирования кода по-умолчанию.
Вторая строка включает форматирование кода при сохранении файла.

.prettierrc.json и .prettierignore

Пара слов об этих двух файлах.

Для чего нужен .prettierrc.json?

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

Exit fullscreen mode

«trailingComma» — отвечает за висящие, (или «последние») запятые. Можно разрешить Prettier ставить их там, где это возможно, или отключить эту функцию

«tabWidth» — ширина отступа, в пробелах

«semi» — отвечает за добавление точек с запятыми в конце инструкций. Можно добавлять, можно не добавлять

«singleQuote» — отвечает за использование одинарных или двойные кавычек

Мой конфиг .prettierrc.json сейчас выглядит так:

В нем я запретил использование точек с запятыми в конце строк. Такое вот личное предпочтение, при работе над персональными проектами.

В итоге, когда мы сохраняем файл, Prettier будет удалять точки с запятыми в конце строк, если они были, и менять одинарные кавычки на двойные. (замена кавычек на двойные производится по умолчанию, этим поведением можно управлять при помощи параметра «singleQuote»)

вот как это выглядит:

Сохранили файл — произошло форматирование кода.

.prettierignore

Файл .prettierignore существует для того, чтобы запретить Prettier форматировать определенные файлы. Какие файлы запретить форматировать, решаете вы. Я добавил туда файл .eslintrc.json, потому что не хочу, чтобы Prettier его трогал:

Установка правил Airbnb для ESLint

Теперь, когда мы настроили ESLint и Prettier в нашем проекте, давайте установим популярный конфиг eslint-config-airbnb, который настроен с учетом стайлгайда по JavaScript от Airbnb

для этого выполним команду:

Exit fullscreen mode

и добавим «airbnb» в .eslintrc.json.
Финальный конфиг ESLint с учетом правил Airbnb будет выглядеть вот так:

Чтобы ESLint не ругался на то, что у нас JSX присутствует в файлах с расширением ‘.js’, можно добавить правило

How To Lint and Format Code with ESLint in Visual Studio Code

When writing JavaScript with an editor such as Visual Studio Code, there are different ways you can ensure your code is syntactically correct and in line with current best practices. You can use a linter to do this. Linters check your code for syntax errors and highlight errors to make sure you can quickly find and fix them. ESLint is a linter that you can integrate into your Visual Studio Code setup in order to ensure code integrity.

ESLint can both format your code and analyze it to make suggestions for improvement. It is also configurable. This means that you can customize how your code is evaluated.

In this tutorial, you will set up ESLint on Visual Studio Code and implement a custom configuration to deal with log statements in debugging. You will also configure ESLint to automatically fix syntax errors when you save your files.

Prerequisites

To complete this tutorial, you will need the following:

• The latest version Visual Studio Code installed on your machine.
• The latest version of Node installed on your machine. You can accomplish this by following the How to Install Node.js and Create a Local Development Environment for your machine.

This tutorial was verified with Visual Studio Code v1.62.3, ESLint Extension v2.2.2, Node.js v17.2.0, npm v8.1.4, and eslint v8.3.0.

Step 1 — Creating JavaScript Starter Code

You need to start with a demo project. Create a directory for your project with the following command:

Now that your project folder is created switch into the vscode-eslint-example directory:

While inside of the vscode-eslint-example directory, create a JavaScript file with the name app.js :

Open app.js in Visual Studio Code. Write the following JavaScript code in your app.js file:

You may have noticed that there are formatting issues that could be improved:

• Inconsistent use of quotes
• Inconsistent use of semicolons
• Spacing

With this JavaScript file in place, you can now initialize this project. To do this, navigate back to your command line and in the vscode-eslint-example directory, run the following command:

Using the npm init command to initialize your project will create a package.json file in the vscode-eslint-example directory. The package.json will store your project dependencies and other important configuration settings for your project.

Now that your JavaScript project is properly set up, you can now set up ESLint.

Step 2 — Setting Up ESLint

Before you set up ESLint for your project, you will first need to install ESLint:

It’s important to include the —save-dev flag because this saves the package as a dependency for development usage only. In this case, eslint is a package that is only needed when you are actively working on and making changes to your project. Once your project launches or is in production, eslint will no longer be needed. Using the —save-dev flag ensures that eslint will be listed in your package.json file as a development dependency only.

Now that ESLint is installed, you can initialize an ESLint configuration for your project using the following command:

An important piece in this command is the —init flag. The ./node_modules/.bin/eslint section of the command is the path to ESLint in your project. Using the —init flag activates ESLint for your project. Activating or initializing ESLint will create an ESLint configuration file that will allow you to customize how ESLint works with your project.

Before you can access your ESLint configuration file, you will be prompted with different questions about your project. These questions are asked to make sure that the configuration that is initialized for your project best fits your needs.

The first prompt will be:

Choose the To check syntax, find problems, and enforce code style option.

The next prompt will be:

Choose the CommonJS option to use CommonJS global variables.

The next prompt will say:

Choose the None of these option.

The next prompt will ask:

Choose the No option.

The following prompt will say:

Choose the Browser option.

The next prompt will say:

Choose the Use a popular style guide option.

For the Which style guide do you want to follow? prompt, choose the Airbnb: https://github.com/airbnb/javascript option.

The next prompt will ask:

Choose the JSON option.

You will then see this message:

The last prompt will ask:

Choose the Yes option to install the dependencies with npm .

You will also be asked to install extra packages. Choose yes .

After completing all the prompts, you’ll notice that a file named .eslintrc.json has been added to your vscode-eslint-example directory. ESLint is now installed. The code in app.js hasn’t changed yet. This is because ESLint needs to be integrated with Visual Studio Code.

Step 3 — Installing the ESLint Extension

To integrate ESLint into Visual Studio Code, you will need to install the ESLint extension for Visual Studio Code. Navigate back to Visual Studio Code and search for ESLint in the Extensions tab. Click Install once you have located the extension:

Once ESLint is installed in Visual Studio Code, you’ll notice colorful underlining in your app.js file highlighting errors. These markers are color-coded based on severity. If you hover over your underlined code, you will see a message that explains the error to you. In this way, ESLint helps us find and remove code and syntax errors.

ESLint can do even more for you. ESLint can be modified to automatically fix errors every time a file is saved.

Step 4 — Formatting on Save

To configure ESLint to automatically fix syntax and formatting issues every time you save, you will need to open the settings menu.

To find the settings in Visual Studio Code, use the command palette to open Preferences: Open Workspace Settings (JSON).

The settings.json file will open inside of your code editor. For ESLint to fix errors when you save your file, you will need to write the following code in settings.json :

With this code in your settings.json file, ESLint will now automatically correct errors and validate JavaScript on save.

Return back to your app.js file and save it. You will see some changes, including less colorful underlining. Some of the formatting issues that ESLint has fixed include:

• Consistent use of single quotes
• Proper indentation inside of the function
• Consistent use of semicolons

ESLint will now automatically solve syntax errors whenever you save app.js . There are still some remaining error messages. These can be fixed by customizing the ESLint configuration to catch or ignore specific errors and formatting issues.

Step 5 — Customizing ESLint Rules

As is, ESLint produces a highlighted message for all console.log() statements in app.js . In some cases, removing console.log statements may not be a priority. You can customize the ESLint configuration to allow console.log statements without producing an error message. ESLint configuration rules can be modified in the .eslintrc.json file.

Open up the .eslintrc.json file. This is the code you will see in that file:

At the bottom of the .eslintrc.json file, you will see a "rules" object. To customize the errors that trigger ESLint or to disable ESLint’s response to certain pieces of code, you will add key-value pairs to the "rules" object. The key will match the name of the rule you want to add or change. The value will match the severity level of the issue. You have three choices for severity level:

• error — produces a red underline
• warn — will produce a yellow underline
• off — will not display anything.

If you do not want to produce any error messages for console.log statements, you can use the no-console rule name as the key. Input off as the value for no-console :

This removes the error messages from your console.log statements in app.js :

Some rules require multiple pieces of information, including a severity level and a value. To specify the type of quotes you want to use in your code, you have to pass in both the chosen type of quotes and the severity level:

Now, if you include single quotes in your quote, ESLint will raise an error.

Conclusion

This tutorial introduces some of what you can do with linting using ESLint on Visual Studio Code. Linting tools like ESLint can help create time for more complex tasks by automating and simplifying how you verify syntax and best practices.

If you would like more information about rules and what key-value pairs you can use to customize your ESLint rules, you can check out this documentation.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Как настроить VS Code для разработки на JavaScript

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

• отладчик кода
• встроенный терминал
• удобные инструменты для работы с Git
• подсветка синтаксиса для множества популярных языков и файловых форматов
• удобная навигация
• встроенный предпросмотр Markdown
• умное автодополнение
• встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

Для установки нового пакета зайдите во вкладку “Extensions” которая находится в выпадающем меню “View”, и введите название пакета в строке поиска, нажмите кнопку “Install”.

Babel и ES6

VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

1. Установите Node.js, используя пакетный менеджер вашей операционной системы.
2. Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .

Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:

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

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json , то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.

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

Подробнее об отладке можно узнать на сайте VS Code.

Ссылки

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

Форматирование кода в Visual Studio Code с помощью ESLint

Если вы пишете JavaScript в редакторе, например в Visual Studio Code, у вас есть несколько способов убедиться, что ваш код имеет правильный синтаксис и соответствует передовым практикам. Для этого можно использовать линтер. Линтеры – это программы, которые проверяют ваш код на наличие синтаксических ошибок и выделяют их, чтобы вы могли быстро их найти и исправить. ESLint – это линтер, который вы можете интегрировать в Visual Studio Code, чтобы обеспечить целостность вашего кода.

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

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

Требования

• П​оследняя версия Visual Studio Code на вашем компьютере. В этом руководстве используется Visual Studio Code 1.43.0.
• Последняя версия Node на вашем компьютере. Вы можете следовать инструкциям по установке Node.js в macOS, Debian 10, CentOS 8, Ubuntu 20.04.

1: Создание простого кода JavaScript

Мы начнем с подготовки тестового проекта, на примере которого рассмотрим функции линтера. Создайте для своего проекта каталог с помощью следующей команды:

Теперь, когда папка для проекта готова, перейдите в нее:

Находясь внутри каталога linting, создайте файл JavaScript по имени app.js:

Откройте app.js в Visual Studio Code. Поместите следующий код JavaScript в файл app.js:

const name = ‘James’

const sayHelloLinting = (fName) =>

С точки зрения форматирования вы можете сразу заметить несколько вещей, которые можно улучшить:

• Кавычки использованы непоследовательно.
• Точка с запятой – тоже.
• Интервалы установлены неправильно.

Подготовив этот файл JavaScript, вы можете инициализировать этот проект. Для этого вернитесь в командную строку и в каталоге linting выполните следующую команду:

Команда npm init при инициализации вашего проекта создаст в каталоге linting файл package.json. В package.json будут храниться зависимости и другие важные параметры конфигурации вашего проекта.

Теперь, когда тестовый проект JavaScript готов, мы можем установить ESLint.

2: Установка и настройка ESLint

Чтобы установить ESLint, введите:

npm install eslint —save-dev

В эту команду важно включить флаг –save-dev, поскольку он сохраняет пакет как зависимость разработки – и тогда он будет использован только в разработке, но не в производстве. Пакет eslint нужен только тогда, когда вы активно работаете над кодом и вносите изменения в свой проект. Как только ваш проект будет на стадии производства, eslint больше не понадобится. И флаг –save-dev гарантирует, что eslint будет указан в вашем файле package.json только как зависимость разработки.

Теперь, когда ESLint установлен, вы можете инициализировать конфигурацию ESLint для своего проекта, используя для этого следующую команду:

Важным элементом этой команды является флаг –init. Раздел ./node_modules/.bin/eslint этой команды – это путь к ESLint в вашем проекте. Флаг –init активирует ESLint для вашего проекта. Процедура активации или инициализации ESLint создаст конфигурационный файл, который позволит вам настроить ESLint для вашего проекта.

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

Первый вопрос будет выглядеть так:

? How would you like to use ESLint? …

To check syntax only

To check syntax and find problems

❯ To check syntax, find problems, and enforce code style

Здесь мы выберем To check syntax, find problems, and enforce code style – чтобы программа проверяла синтаксис, сообщала о проблемах и поддерживала единый стиль кода.

Следующий вопрос выглядит так:

What type of modules does your project use? …

JavaScript modules (import/export)

Выберите опцию CommonJS, чтобы использовать глобальные переменные CommonJS.

В следующем вопросе будет сказано:

? Which framework does your project use? …

Выберите вариант None of these.

Затем программа спросит:

? Does your project use TypeScript? › No / Yes

Выберите вариант No.

Затем появится такой вопрос:

? Where does your code run? … (Press <space> to select, <a> to toggle all, <i> to invert selection)

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

✔ How would you like to define a style for your project? …

❯ Use a popular style guide

Answer questions about your style

Inspect your JavaScript file(s)

Выберите ответ Use a popular style guide.

Which style guide do you want to follow?

Ответьте Airbnb: https://github.com/airbnb/javascript.

Затем будет такой вопрос:

? What format do you want your config file to be in? …

Нужно выбрать JSON.

Вы получите такое сообщение:

Checking peerDependencies of eslint-config-airbnb-base@latest

The config that you’ve selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2

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

? Would you like to install them now with npm? › No / Yes

Выберите вариант Yes, чтобы установить зависимости с помощью npm.

Вам также будет предложено установить дополнительные пакеты. Выберите yes.

После всех вопросов вы заметите, что в ваш каталог linting был добавлен файл .eslintrc.json. Теперь инструмент ESLint установлен. Код в app.js пока не изменился – и это связано с тем, что ESLint необходимо интегрировать с Visual Studio Code.

3: Настройка ESLint

Чтобы интегрировать ESLint в Visual Studio Code, вам необходимо установить расширение ESLint для VS Code. Вернитесь в Visual Studio Code и найдите ESLint во вкладке Extensions. После того, как вы найдете это расширение, нажмите Install.

После установки расширения ESLint вы заметите красочное подчеркивание в файле app.js – это линтер выделил ошибки в файле. Отметки в ESLint имеют разные цвета в зависимости от степени серьезности. Если вы наведете курсор на подчеркнутый код, вы увидите сообщение, объясняющее вам ошибку. Таким образом, ESLint помогает находить ошибки в коде и устранять их.

ESLint может сделать для вас даже больше: к примеру, он может автоматически исправлять ошибки при каждом сохранении файла (для этого требуется отдельная настройка).

4: Форматирование при сохранении

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

В меню настроек найдите Code Actions on Save. Первой идет опция Editor: Code Actions on Save, а ниже – Edit in settings.json, и как раз она нам нужна.

Файл settings.json откроется в редакторе кода. Чтобы ESLint исправлял ошибки при сохранении файла, вам нужно добавить следующий код в settings.json:

С помощью этого кода ESLint сможет автоматически исправляет ошибки и проверяет JavaScript при сохранении.

Вернитесь к файлу app.js и сохраните его. Вы увидите, что линтер внес некоторые изменения, и цвет подчеркивания тоже изменился. Вот некоторые из ошибок форматирования, которые исправил ESLint:

• Теперь одинарные кавычки использованы последовательно.
• Точки с запятой – тоже.
• Отступ внутри функции расставлены правильно.

ESLint автоматически будет устранять синтаксические ошибки при сохранении файла app.js. Но пока у нас еще остались сообщения об ошибках. Их можно исправить, настроив ESLint для обнаружения или игнорирования определенных ошибок и проблем с форматированием.

5: Пользовательская настройка ESLint

«Из коробки» ESLint подчеркивает все операторы console.log() в app.js. В некоторых случаях распознавание операторов console.log в качестве ошибки может быть не в приоритете. Вы можете игнорировать операторы console.log.

Правила конфигурации ESLint можно изменить в файле .eslintrc.json.

Откройте файл .eslintrc.json. В этом файле вы увидите такой код:

В конце файла .eslintrc.json вы увидите объект «rules». Чтобы настроить триггеры ESLint (или отключить реакцию ESLint на определенные фрагменты кода), нужно добавить пары «ключ-значение» к объекту «rules». Ключ – это название правила, которое нужно добавить или изменить. Значение задает уровень серьезности проблемы. ESLint поддерживает три уровня серьезности:

• error – подчеркивается красным
• warn – подчеркивается желтое
• off – ничего неподчеркивается.

Если вы не хотите подчеркивать операторы console.log как ошибки, вы можете назвать правило no-console и указать это имя в качестве ключа. Используйте off как значение:

Это правило удаляет подчеркивание операторов console.log в app.js.

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

Если теперь вы включите в код одинарные кавычки, ESLint выдаст ошибку.

Заключение

Это руководство вкратце знакомит с некоторыми функциями интеграции ESLint в Visual Studio Code. Инструменты линтинга, такие как ESLint, помогут вам сэкономить время для более сложных задач за счет автоматизации и упрощения проверки синтаксиса и остальных требований к коду.

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