В этом руководстве мы увидим, как настроить ESLint в коде Visual Studio на Mac. ESLint явно предназначен для полной настройки, что означает, что вы можете отключить каждое правило и запускать только с необходимой проверкой синтаксиса или смешивать и сопоставлять связанные правила и свои собственные правила, чтобы сделать ESLint идеальным для вашего проекта.
ESLint — это инструмент для выявления и составления отчетов о шаблонах, обнаруженных в коде ECMAScript/JavaScript, с целью сделать код более согласованным и избежать ошибок. Во многом он похож на JSLint и JSHint, за некоторыми исключениями:
- ESLint использует Espree для синтаксического анализа JavaScript.
- ESLint использует AST для оценки шаблонов в коде.
- ESLint полностью подключаемый, каждое отдельное правило является подключаемым модулем, и вы можете добавить больше во время выполнения.
Как настроить ESLint в коде Visual Studio
Мы будем использовать плагин или расширение Visual Studio Code под названием ESLint. Вы можете установить плагин в Visual Studio Code. Просто перейдите в Extensions и найдите ESLint, и первым расширением будет наше расширение, которое выглядит так. Я уже установил это расширение.
Шаг 1. Создайте файл package.json.
Это наш демонстрационный проект для тестирования Конфигурация ESLint. Итак, создайте одну папку проекта с именем es , войдите в эту папку и откройте эту папку в Visual Studio Code.
mkdir escd escode.
Создайте в корне один файл с именем app.js , а затем оставьте как есть, потому что мы будем писать некоторый JS-код в будущем.
Следующим шагом будет создание файла package.json . Мы можем создать его с помощью следующей команды.
npm init -y
Таким образом, он будет создан сам по себе, и вам не нужно выбирать или настраивать его самостоятельно.
{"name": "es", "version": "1.0.0", " description ":" "," main ":" index.js "," scripts ": {" test ":" echo "Ошибка: тест не указан " && exit 1 "}," keywords ": []," author ":" "," license ":" ISC "}
Шаг 2. Установите пакет ESLint глобально.
Нам нужно установить пакет npm eslint глобально, используя следующую команду.
sudo npm install -g eslint
Хотя вы можете установить его для каждого проекта и локально, но позвольте нам придерживаться его глобально. Это поможет нам создать файл конфигурации ESLint.
Теперь перейдите в код Visual Studio и введите следующую команду.
Итак, у нас есть три варианта.
- Воспользуйтесь популярным руководством по стилю.
- Ответьте на вопросы о своем стиле.
- Проверьте свои файлы Javascript.
Для этого урока мы выберем Ответьте на вопросы о своем стиле .
Шаг 3. Выберите свой стиль для настройки ESLint
Как правило, существует шесть-семь вопросов, на которые вам нужно ответить в зависимости от вашего стиля написания кода JS. Вы можете увидеть мою конфигурацию здесь, на следующем изображении.
Я ответил на все вопросы ons, и, наконец, в корневом каталоге был создан файл с именем .eslintrc.js . Файл выглядит так.
module.exports = {"env": {"browser": true, "commonjs": true, "es6": true, "node": true}, "extends": "eslint: рекомендовано", "parserOptions": {"ecmaVersion": 2018, "sourceType": "module"}, "rules": {"indent": ["error", "tab"], " linebreak-style ": [" ошибка "," unix "]," кавычки ": [" ошибка "," одиночный "]," полу ": [" ошибка "," всегда "]}};
Теперь нам нужно протестировать нашу конфигурацию. Поэтому напишите следующие две строки кода внутри файла app.js , который мы создали ранее.
//app.jsconst app = ["Apple", " Microsoft "]; app.length;
Итак, в написанном выше коде мы использовали двойные кавычки , что является нарушением наших правил конфигурации, поскольку мы выбрали одинарные кавычки . Таким образом, ESLinter выдаст нам такую ошибку внутри редактора кода.
Это означает, что мы получаем ошибку, и это прекрасно. Итак, наша конфигурация работает. Теперь удалите двойные кавычки и добавьте одинарные, и вы увидите, что ошибка исчезла.
Есть так много правил, которые мы можем использовать для нашего проекта. Вы можете найти его здесь.
Наконец, руководство по настройке ESLint в Visual Studio Code на Mac окончено. Это важный шаг для проектов javascript, и я надеюсь, что он будет вам полезен.
