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

@alexdima
these are mine settings

{
  "breadcrumbs.filePath": "off",
  "breadcrumbs.symbolPath": "off",
  "editor.acceptSuggestionOnEnter": "smart",
  "editor.colorDecorators": false,
  "editor.cursorBlinking": "smooth",
  "editor.cursorStyle": "line-thin",
  "editor.detectIndentation": false,
  "editor.fontSize": 12,
  "editor.hover.enabled": false,
  "editor.minimap.renderCharacters": false,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.scrollBeyondLastLine": false,
  "editor.snippetSuggestions": "top",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
  },
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "html.format.wrapAttributes": "force-expand-multiline",
  "window.closeWhenEmpty": true,
  "window.restoreFullscreen": true,
  "window.titleBarStyle": "custom",
  "workbench.commandPalette.history": 0,
  "workbench.editor.tabSizing": "shrink",
  "workbench.settings.editor": "json",
  "workbench.settings.useSplitJSON": true,
  "workbench.startupEditor": "newUntitledFile",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "breadcrumbs.enabled": false,
  "editor.renderControlCharacters": false,
  "editor.renderWhitespace": "none",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "diffEditor.renderSideBySide": true,
  "javascript.validate.enable": false,
  "search.searchOnTypeDebouncePeriod": 500,
  "git.openDiffOnClick": false,
  "workbench.colorTheme": "GitHub Dark",
  "svg.preview.mode": "svg",
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

I haven’t touched them since the last update and highlighting stopped working.
--user-data-dir with this highlighting works. soo, should I delete my settings and start over?

Настраиваем автоматическое форматирование кода и проверку на ошибки при помощи 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:

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

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

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

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

$ npx eslint --init

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Prettier

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

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

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

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

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

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

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

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

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

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

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

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

$ echo {}> .prettierrc.json

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

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

ставим:

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

Далее открываем конфиг нашего линтера, (файл .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.

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

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

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

.prettierrc.json и .prettierignore

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.prettierignore

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

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

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

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

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

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

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

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

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

Установка и настройка 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:

(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)

.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:

(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)

.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.

Редактор — VS Code

Плагин Eslint установлен
Все зависимости есть и сам eslint работает, но только через консоль (npx eslint fileName), почему он не хочет подсвечивать ошибки?

Настройки плагина Eslint

{
  "eslint.enable": true,
  "workbench.colorTheme": "Visual Studio Dark",
  "files.autoSave": "onFocusChange",
  "editor.autoClosingBrackets": "always",
  "workbench.startupEditor": "none",
  "terminal.explorerKind": "external",
  "workbench.iconTheme": "vscode-icons",
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "html.format.contentUnformatted": "",
  "window.zoomLevel": 1,
  "[less]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "redhat.telemetry.enabled": true,
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "json.format.enable": false,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.editorAssociations": {
    "*.docx": "default"
  },
  "explorer.confirmDragAndDrop": false,
  "explorer.confirmDelete": false,
  "eslint.workingDirectories": ["./src", "./project", "./", "./my-app"],
  "[typescriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "prettier.jsxSingleQuote": true,
  "prettier.singleAttributePerLine": true,
  "prettier.singleQuote": true,
  "eslint.format.enable": true,
  "typescript.preferences.quoteStyle": "single",
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
}

.eslintrc.yml

parserOptions:
  ecmaVersion: latest
  sourceType: 'module'

env:
  es2017: true
  browser: true

extends: 'htmlacademy/vanilla'

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "eslint-config-htmlacademy": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "stylelint-config-htmlacademy": "^1.1.2",
    "web-vitals": "^2.1.4",
    "eslint": "^8.27.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}