Меню

Vs code eslint не подсвечивает ошибки

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

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

  • Что такое Lint?

    • ESLint в Create React App и расширение для VS Code
    • Настройка ESLint
    • Установка и подключение дополнительных плагинов ESLint

      • eslint-plugin-react
      • eslint-plugin-react-hooks
      • eslint-plugin-jsx-a11y
      • eslint-plugin-import

  • Prettier

    • Установка Prettier в проект
    • Отключаем конфликтующие с Prettier правила ESLint
    • Интеграция Prettier в VS Code
    • .prettierrc.json и .prettierignore

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

Что такое Lint?

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

линтер нашел ошибки в коде

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

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

ошибки исправлены

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

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

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

ESLint расширение для VS Code

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

Сообщения об ошибках в коде, которые можно посмотреть прямо в VS Code, а не в терминале, при помощи плагина ESLint для VS Code

Настройка ESLint

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

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

package.json

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

$ npx eslint --init

Enter fullscreen mode

Exit fullscreen mode

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

мастер настройки ESLint

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

файл .eslintrc.json

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

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

установим правила ESLint для React: 

$ npm install eslint-plugin-react --save-dev

Enter fullscreen mode

Exit fullscreen mode

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

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

Добавили "plugin:react/jsx-runtime" в конфиг .eslintrc.json

Установим правила для поддержки хуков React, eslint-plugin-react-hooks: 

$ npm install eslint-plugin-react-hooks --save-dev

Enter fullscreen mode

Exit fullscreen mode

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

добавили "plugin:react-hooks/recommended" в .eslintrc.json

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

$ npm install eslint-plugin-jsx-a11y --save-dev

Enter fullscreen mode

Exit fullscreen mode

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

добавили "plugin:jsx-a11y/recommended" в .eslintrc.json:

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

$ npm install eslint-plugin-import --save-dev

Enter fullscreen mode

Exit fullscreen mode

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

добавили "plugin:import/recommended" в .eslintrc.json

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

Prettier

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

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

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

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

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

Prettier форматирует код

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

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

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

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

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

$ npm install --save-dev --save-exact prettier

Enter fullscreen mode

Exit fullscreen mode

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

$ echo {}> .prettierrc.json

Enter fullscreen mode

Exit fullscreen mode

.prettierrc.json конфиг

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

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

ставим: 

$ npm install --save-dev eslint-config-prettier

Enter fullscreen mode

Exit fullscreen mode

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

добавляем "prettier" в конфиг .eslintrc.json

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

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

Интеграция 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.

редактируем конфиг settings.json

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

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

Enter fullscreen mode

Exit fullscreen mode

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

.prettierrc.json и .prettierignore

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

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

.prettierrc.json — это файл конфигурации Prettier.

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

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Enter fullscreen mode

Exit fullscreen mode

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

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

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

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

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

файл .prettierrc.json

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

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

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

Alt Text

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

.prettierignore

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

файл .prettierignore

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

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

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

$ npm install --save-dev eslint-config-airbnb

Enter fullscreen mode

Exit fullscreen mode

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

финальный вариант конфига .esnlintrc.json

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

"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]

Enter fullscreen mode

Exit fullscreen mode

в .eslintrc.json, тогда ошибки JSX not allowed in files with extension ‘.js’ не будет:

добавили правило "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] в .eslintrc.json

Установка и настройка ESLint и Prettier закончена!

Что мы сделали:

  • разобрались с тем, что такое линтер
  • установили и настроили ESLint в Create React App проект
  • установили ESLint в VS Code
  • узнали, что такое Prettier
  • установили и настроили Prettier в нашем проекте
  • установили расширение Prettier в VS Code и настроили форматирование кода при сохранении файла
  • установили в линтер популярные правила написания JavaScript кода от Airbnb

Увидимся в новых постах!

Источник

I spent a lot of time and managed to make errors in vs code more visible. Still not in the gutter, but better then nothing. I replaced vs code squiggly error and warning underlines with background and thick underline:

enter image description hereenter image description here

(offtop: also on screenshot you can see how «Bracket Pair Colorizer» extension works 🙂

Install CSS and JS Loader and carefully follow all instructions (i had problem with link to css, which in windows must be like file:///C:/myfolder/myfile.css … better read whole extension instructions)

Create a css file with contents:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  /* background */
  background: #f2e3b3;
  /* underline */
  border-bottom: 3px solid #ffc000; 
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  /* background */
  background: #ffc7c7;
  /* underline */
  border-bottom: 4px solid #ff0000; 
}

And place link to it in settings.json like said in CSS and JS Loader extension instructions

"vscode_custom_css.imports": ["file:///C:/yourfolder/youfilewithcustom.css"],
"vscode_custom_css.policy": true,

, then reload…

You can get color box around error (instead of underline, not simultaniously) if you use for example (border: instead of border-bottom: ):

border: 1px solid #ff0000;

Or you can get custom border from any side (right border alone seems to look great, tried this while writing this post)

enter image description here

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  background: #f2e3b3;
  border-right: 5px solid #ffc000;
  border-bottom: 5px solid #ffc000;
  border-top: 3px solid #ffc000;
  border-left: 1px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  background: #ffc7c7;
  border-right: 5px solid #ff0000;
  border-bottom: 3px solid #ff0000;
  border-top: 3px solid #ff0000;
  border-left: 1px solid #ff0000;
}

This css will only replace squiggle color from green to yellow:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* yellow squiggly */
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#FF0'><path d='M5.5 0l-3 3H1.1l3-3z'/><path d='M4 0l2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>") repeat-x 0 100%;
}

As you can see the name of class changed from .greensquiggly to .squiggly-warning, that’s why css from previous answer doesn’t work.
To find out new error css class i used Help -> Toggle Developer Tools, where after deleting bunch of blocks, i could find the error and warning classes.

Источник

I spent a lot of time and managed to make errors in vs code more visible. Still not in the gutter, but better then nothing. I replaced vs code squiggly error and warning underlines with background and thick underline:

enter image description hereenter image description here

(offtop: also on screenshot you can see how «Bracket Pair Colorizer» extension works 🙂

Install CSS and JS Loader and carefully follow all instructions (i had problem with link to css, which in windows must be like file:///C:/myfolder/myfile.css … better read whole extension instructions)

Create a css file with contents:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  /* background */
  background: #f2e3b3;
  /* underline */
  border-bottom: 3px solid #ffc000; 
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  /* background */
  background: #ffc7c7;
  /* underline */
  border-bottom: 4px solid #ff0000; 
}

And place link to it in settings.json like said in CSS and JS Loader extension instructions

"vscode_custom_css.imports": ["file:///C:/yourfolder/youfilewithcustom.css"],
"vscode_custom_css.policy": true,

, then reload…

You can get color box around error (instead of underline, not simultaniously) if you use for example (border: instead of border-bottom: ):

border: 1px solid #ff0000;

Or you can get custom border from any side (right border alone seems to look great, tried this while writing this post)

enter image description here

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  background: #f2e3b3;
  border-right: 5px solid #ffc000;
  border-bottom: 5px solid #ffc000;
  border-top: 3px solid #ffc000;
  border-left: 1px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  background: #ffc7c7;
  border-right: 5px solid #ff0000;
  border-bottom: 3px solid #ff0000;
  border-top: 3px solid #ff0000;
  border-left: 1px solid #ff0000;
}

This css will only replace squiggle color from green to yellow:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* yellow squiggly */
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#FF0'><path d='M5.5 0l-3 3H1.1l3-3z'/><path d='M4 0l2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>") repeat-x 0 100%;
}

As you can see the name of class changed from .greensquiggly to .squiggly-warning, that’s why css from previous answer doesn’t work.
To find out new error css class i used Help -> Toggle Developer Tools, where after deleting bunch of blocks, i could find the error and warning classes.

Источник

ESLint не работает для меня в VS Code. У меня есть плагин, установленный в VS Code, и ESLint сам по себе как зависимость разработчика в моем пакете. Json, который я также установил.

Я изменил следующий параметр в пользовательских настройках VS Code:

{
  "eslint.options": { "configFile": "C:/mypath" }
}

Я использую команду eslint --init, чтобы добавить базовый .eslintrc.json в основной каталог моего пакета.

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

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

Что мне не хватает?

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

Источник

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии

А вот еще интересные материалы:

  • Яшка сломя голову остановился исправьте ошибки
  • Ясность цели позволяет целеустремленно добиваться намеченного исправьте ошибки
  • Ясность цели позволяет целеустремленно добиваться намеченного где ошибка
  • Vrv система daikin коды ошибок
  • Vrv дайкин коды ошибок

    • ➤