Vscode eslint не подсвечивает ошибки - Решение и исправление самых разных ошибок на TopOshibok.ru

I’ve installed the ESlint by following these steps: https://travishorn.com/setting-up-eslint-on-vs-code-with-airbnb-javascript-style-guide-6eb78a535ba6

Now, my ESlint is working from the terminal, but errors/warnings are not displaying in the code window, here is my project structure and how it is looks like:

and my eslintrc configs:

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true,
  },
  extends: [
    'airbnb-base',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
  },
  rules: {
  },
};

Why it couldn’t show errors in the editor?

asked Jan 12, 2020 at 18:55

I ran into this recently, and fixed it by changing my .eslintrc.js file to just .eslintrc (JSON object only, no comments, everything quoted right, no extension). After restarting VSCode it picked up the file properly and gave me linter errors in VSCode.

answered Dec 18, 2020 at 16:59

radicandradicand

6,1083 gold badges27 silver badges24 bronze badges

I followed all the advice and still had issues. I am using Typescript + YARN 2 (w\ PnP).

The error I was receiving was Failed to load the ESLint library for the document [filename].ts

What fixed it for me was that I needed to create some editor SDKs and settings with the command:

yarn dlx @yarnpkg/sdks vscode.

My .vscode/settings.json for eslint looks like:

  "eslint.enable": true,
  "eslint.packageManager": "yarn",
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "eslint.nodePath": ".yarn/sdks"

The command above added "eslint.nodePath": ".yarn/sdks"

I found this here (I followed this and this to get there).

answered Sep 8, 2022 at 20:18

MoemarsMoemars

4,7023 gold badges27 silver badges30 bronze badges

Источник

The issue of Eslint not showing errors in the editor UI of Visual Studio Code (VSCode) despite working correctly in the terminal is a common problem faced by Javascript developers. This can be due to a number of reasons such as misconfiguration of the Eslint extension, incorrect settings in the VSCode editor, or compatibility issues between the Eslint version and the VSCode extension.

Method 1: Check Eslint Extension Configuration

To fix the issue where Eslint is working from the terminal but not showing errors in the VSCode UI, you can try using the «Check Eslint Extension Configuration» option. Here are the steps to do it:

Open VSCode and go to the Extensions tab.
Search for «ESLint» and click on «Install».
Once installed, click on «Settings» and search for «eslint.validate».
Click on «Edit in settings.json» and add the following code:

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
],

Save the changes and restart VSCode.
Open your JavaScript file and you should see the errors highlighted in the UI.

This configuration tells VSCode to validate ESLint for JavaScript, JavaScript React, TypeScript, and TypeScript React files. You can add or remove file types based on your project’s needs.

It is important to note that the Eslint extension should be enabled in the VSCode UI for this to work. If you are still facing issues, you can try running the «ESLint: Restart ESLint Server» command from the command palette.

I hope this helps you to fix the Eslint issue in VSCode.

Method 2: Verify VSCode Settings

To fix the issue of Eslint not showing errors in the VSCode editor UI, you can verify the VSCode settings. Follow the steps below:

Open VSCode and go to the «Settings» tab.
In the search bar, type «eslint» and select «Edit in settings.json».
In the «settings.json» file, add the following code:

"eslint.enable": true,
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
  {
    "language": "javascript",
    "autoFix": true
  },
  {
    "language": "javascriptreact",
    "autoFix": true
  }
]

Save the «settings.json» file.
Open a JavaScript file and intentionally add an error, such as a variable that is not defined.
Save the file and you should see the error displayed in the editor UI.

Explanation of the code:

«eslint.enable»: true — enables Eslint in VSCode
«eslint.alwaysShowStatus»: true — always shows the Eslint status bar item
«eslint.autoFixOnSave»: true — automatically fixes Eslint errors on save
«eslint.validate»: [] — specifies the files to validate with Eslint
«language»: «javascript» — specifies the language to validate
«autoFix»: true — automatically fixes Eslint errors

By following these steps and adding the code to verify the VSCode settings, you should now see Eslint errors displayed in the VSCode editor UI.

Method 3: Update Eslint and its Dependencies

If Eslint is working from the terminal but not showing errors in the VSCode editor UI, you can try updating Eslint and its dependencies. Here are the steps to do this:

Open the terminal and navigate to your project directory.

Install the latest version of Eslint and its dependencies:

npm install eslint@latest eslint-config-airbnb-base@latest eslint-plugin-import@latest --save-dev

Create a new file named .eslintrc.json in the root of your project directory.
Add the following configuration to the .eslintrc.json file:
```
{
  "extends": "airbnb-base"
}
```
This configuration extends the airbnb-base configuration, which includes a set of recommended rules for JavaScript code.
Restart VSCode and open your project again.
If you still don’t see any errors in the editor UI, try running the following command in the terminal:

This command will generate a new .eslintrc.json file with a set of recommended rules based on your project type and environment.
Finally, try running eslint again from the terminal and check if you see any errors in the editor UI.

That’s it! By updating Eslint and its dependencies and configuring the .eslintrc.json file, you should be able to see errors in the VSCode editor UI.

Method 4: Reinstall Eslint Extension in VSCode

One possible solution to fix the issue of Eslint not showing errors in VSCode UI is to reinstall the Eslint extension in VSCode. Here are the steps to do that:

Open VSCode and go to the Extensions panel on the left sidebar.
Search for «Eslint» and click on the «Uninstall» button next to the Eslint extension to remove it from VSCode.
Close VSCode and open a terminal window.
Navigate to your project directory and run the following command to reinstall Eslint locally:
```
npm install eslint --save-dev
```
Once the installation is complete, open VSCode again and go to the Extensions panel.
Search for «Eslint» and click on the «Install» button next to the Eslint extension to reinstall it in VSCode.
Reload VSCode and open your project files again.
Eslint should now be working properly and showing errors in the VSCode UI.

Note: Make sure that your Eslint configuration file is properly set up and located in the root directory of your project. You can also try running the «eslint —init» command in the terminal to generate a new configuration file if you don’t have one already.

// Example Eslint configuration file (.eslintrc.js)
module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: [
    'react',
  ],
  rules: {
    'react/prop-types': 'off',
    'no-console': 'warn',
  },
};

Method 5: Check for compatibility between Eslint and its dependencies

To fix the issue of Eslint working from terminal but not showing errors in the VSCode UI, you can try checking for compatibility between Eslint and its dependencies. Here are the steps to do it:

First, ensure that you have installed the required dependencies for Eslint. You can do this by running the following command in your terminal:
```
npm install eslint eslint-config-airbnb-base eslint-plugin-import --save-dev
```
Next, check the version compatibility between Eslint and its dependencies. You can do this by running the following command in your terminal:
```
npm info eslint-config-airbnb-base peerDependencies
```
This will display the required versions of the dependencies that are compatible with Eslint.
Once you have the required versions, install them by running the following command in your terminal:
```
npm install eslint-config-airbnb-base@^<version> eslint-plugin-import@^<version> --save-dev
```
Replace <version> with the required version number obtained in step 2.
Finally, restart your VSCode editor and check if the errors are now being displayed in the UI.

Here’s an example of how the commands would look like:

npm install eslint eslint-config-airbnb-base eslint-plugin-import --save-dev
npm info eslint-config-airbnb-base peerDependencies
npm install eslint-config-airbnb-base@^13.2.0 eslint-plugin-import@^2.22.1 --save-dev

Note that the version numbers used in the example may not be the same as the ones you need to use. Make sure to check the required versions using the npm info command.

Источник

@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?

Источник

ESLint and Prettier can make coding so much easier with VSCode. I can’t tell you how many mistakes it catches in my code that are easily fixed in the moment — but would be difficult to track down as bugs later on.

But what if your problem is getting ESLint / Prettier to work with VSCode? See below for some troubleshooting tips. I’ve sorted the tips into three general symptoms:

Symptom 1: VSCode does not highlight errors
Symptom 2: VSCode does not format on save
Symptom 3: ESLint generates hundreds of “Delete ␍ prettier/prettier error»s

Symptom 1: VSCode does not highlight errors

Let’s say you’ve gotten ESLint and Prettier set up, but VSCode is not highlighting errors:

Here are some things to look into:

1. ESLint and Prettier installation

Make sure ESLint and Prettier are installed for your project.

2. ESLint Plugin for VSCode

Make sure the ESLint plugin for VSCode is installed and enabled.

3. ESLint Configuration File

Make sure you have an ESLint configuration file at the top level of your project.

4. eslint-plugin-prettier

I strongly prefer to use eslint-plugin-prettier and configure Prettier within my ESLint configuration file (rather than maintain two configuration files).

5. VSCode Default Formatter Setting

Make sure the default formatter in VSCode Settings is set to ESLint. Check both the User settings and the Workspace settings (Workspace takes precedence over User).

6. VSCode “Workspace” Directory

Make sure the directory you opened in VSCode (aka the workspace) is the top level of your project. For example, say:

your project lives at /usr/src/my-project
your ESLint configuration file is at /usr/src/my-project/.eslintrc.json

If you open any directory other than /usr/src/my-project as the workspace in VSCode (for example /usr/src or /usr/src/my-project/client), then VSCode won’t recognize the ESLint configuration file.

7. ESLint Configuration Errors

Check for ESLint configuration errors: open the VSCode Terminal, go to the Output tab, and choose ESLint from the dropdown:

8. ESLint overrideConfigFile Configuration

Check to see whether you have an ESLint overrideConfigFile option in VSCode settings. If this option exists, make sure there’s a configuration file in that location.

9. ESLint Working Directories in VSCode

Check to see if your file is excluded from the ESLint Working Directories in your VSCode User or Workspace settings.

Symptom 2: VSCode does not format on save

1. VSCode “Format on Save” settings

Make sure your VSCode settings:

have “Format on Save” enabled
have “Format on Save Mode” set to “file”

2. VSCode “code actions on save” setting

Make sure your VSCode settings include ESLint in the “code actions on save”:

In settings.json, there should be an entry like this:

"editor.codeActionsOnSave": 
  {
    "source.fixAll.eslint": true
  },

Enter fullscreen mode

Exit fullscreen mode

3. Not all ESLint errors are “auto-fixable”

Note that some ESLint errors won’t be auto-fixed on save, because they are not auto-fixable. To use eslint-plugin-testing-library as an example, this error:

auto-fixes to this on save:

But this linting error:

is not auto-fixable, so doesn’t update on save.

Symptom 3: ESLint generates hundreds of “Delete `␍` prettier/prettier error”

This might occur if you are on a Windows computer, but the code was generated on a Mac or Linux computer. The error might also look like this:

Here are some things to try:

1. Run `prettier` from the command line

Run prettier on all of the files in the project (reference: create-react-app docs):

./node_modules/.bin/prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"

Enter fullscreen mode

Exit fullscreen mode

2. Update the prettier/prettier “endOfLine” rule

Update the prettier/prettier rule in the ESLint configuration file (reference: StackOverflow):

"prettier/prettier": [
  "error",
  {
    "endOfLine": "auto"
  }
],

Enter fullscreen mode

Exit fullscreen mode

3. Set line endings in VSCode settings

Set the line endings in .vscode/settings.json (reference: StackOverflow):

{
    "files.eol": "\n",
}

Enter fullscreen mode

Exit fullscreen mode

4. Update your global git settings

WARNING: this will update your global git settings and will affect ALL of your git projects.

Run git config --global core.autocrlf true and pull the code from GitHub again (or possibly re-clone the repo). (Reference: GitHub docs)

5. Consider using Windows Subsystem for Linux

Anecdotally, I did not get this error on my Windows laptop when using Ubuntu 20.04 on Windows Subsystem for Linux (even though other Windows users — who were likely using PowerShell — reported the error for the same GitHub repository).

Источник

Редактор — 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": {}
}

Источник

Method 1: Check Eslint Extension Configuration

Method 2: Verify VSCode Settings

Method 3: Update Eslint and its Dependencies

Method 4: Reinstall Eslint Extension in VSCode

Method 5: Check for compatibility between Eslint and its dependencies

Symptom 1: VSCode does not highlight errors

1. ESLint and Prettier installation

2. ESLint Plugin for VSCode

3. ESLint Configuration File

4. eslint-plugin-prettier

5. VSCode Default Formatter Setting

6. VSCode “Workspace” Directory

7. ESLint Configuration Errors

8. ESLint overrideConfigFile Configuration

9. ESLint Working Directories in VSCode

Symptom 2: VSCode does not format on save

1. VSCode “Format on Save” settings

2. VSCode “code actions on save” setting

3. Not all ESLint errors are “auto-fixable”

Symptom 3: ESLint generates hundreds of “Delete ␍ prettier/prettier error”

1. Run prettier from the command line

2. Update the prettier/prettier “endOfLine” rule

3. Set line endings in VSCode settings

4. Update your global git settings

5. Consider using Windows Subsystem for Linux

Symptom 3: ESLint generates hundreds of “Delete `␍` prettier/prettier error”

1. Run `prettier` from the command line