ESLint가 VS Code에서 작동하지 않습니까?

ESLint는 VS Code에서 나를 위해 작동하지 않습니다. 플러그인이 VS Code에 설치되어 있고 ESLint 자체가 내 package.json에 개발자 종속성으로 설치되어 있습니다.

VS Code 사용자 설정에서 다음 옵션을 수정했습니다.

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

명령 eslint --init을 사용하여 기본 .eslintrc.json패키지를 패키지의 기본 디렉토리에 추가했습니다 .

다른 사람들은 똑같은 ESLint 구성 파일과 똑같은 패키지를 사용하여 VS Code에서 ESLint 피드백을 얻을 수있었습니다.

기본적으로 .eslintrc.json파일 내부에있는 권장 규칙 집합에 모두 포함 된 여러 규칙을 직접 위반했을 때 어떤 종류의 피드백도받지 못했습니다 .

내가 무엇을 놓치고 있습니까?

편집 : 명령 줄을 통해 ESLint를 사용하여 테스트했으며 모든 것이 예상대로 작동했지만 오류가 있어야하는 위치에서 발견되었지만 이러한 동일한 오류는 VS 코드에 나타나지 않았습니다. 문제는 ESLint가 아닌 VS Code 측에있는 것 같습니다.

ESLint가 피드백을 제공하지 않는 데에는 몇 가지 이유가 있습니다. ESLint는 먼저 프로젝트에서 구성 파일을 찾고 .eslintrc.json을 찾을 수 없으면 전역 구성을 찾습니다. 개인적으로 각 프로젝트에 ESLint 만 설치하고 각 프로젝트를 기반으로 구성을 만듭니다.

피드백을받지 못하는 두 번째 이유는 피드백을 받으려면 .eslintrc.json에서 linting 규칙을 정의해야하기 때문입니다. 규칙이 없거나 플러그인이 설치되어 있지 않으면이를 정의해야합니다.

ESLint가 터미널에서 실행되고 VSCode 내부가 아닌 경우 확장이 로컬 및 전역 node_modules폴더를 모두 감지 할 수 없기 때문일 수 있습니다.

확인하려면 VSCode에서 Ctrl+ Shift+ U를 눌러 Output알려진 eslint문제가 있는 JavaScript 파일 을 연 후 패널 을 엽니 다 . 이 표시되는 경우 Failed to load the ESLint library for the document {documentName}.js- 또는 경우 Problems오류 또는 참조하는 경고 탭 쇼 eslint, 다음 VSCode 경로를 탐지하려고하는 데 문제가 있습니다.

그렇다면 eslint.nodePathVSCode 설정 ( settings.json) 에서을 구성하여 수동으로 설정하십시오 . 전체 경로 (예 :)를 제공하십시오. "eslint.nodePath": "C:\\Program Files\\nodejs",환경 변수 사용은 현재 지원되지 않습니다.
이 옵션은 ESLint 확장 페이지에 설명되어 있습니다.

필자의 경우 React와 함께 TypeScript를 사용하고 있었기 때문에 수정은 단순히 ESLint에게 이러한 파일의 유효성을 검사하도록 지시하는 것입니다. 이것은 사용자 설정으로 이동해야합니다.

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

작업 디렉토리를 구성 .eslintrc하면 동일한 창에 자체 파일이 열린 여러 프로젝트가 있었기 때문에 문제가 해결되었습니다 .

이것을 당신의 .vscode/settings.json

"eslint.workingDirectories": [
    "./backend", 
    "./frontend"
],

github의이 사람에게 감사합니다 : https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

추신 : .eslintrc/ node_modules를 제외한 모든 하위 디렉토리를 나열하는 유용한 명령 :

find . .eslintrc | grep .eslintrc | grep -v node_modules

제 경우에는 VSCode에 ESLint 확장을 설치하지 않아 문제가 발생했습니다. 해냈고 다시 작동하기 시작했습니다.

VSCode를 다시 시작하면 효과적이었습니다.

ESLint의 전역 설치를 사용하는 경우 구성에 사용 된 모든 플러그인도 전역으로 설치해야합니다. 로컬 설치도 마찬가지입니다. 로컬로 설치하고 로컬로 올바르게 구성했지만 eslin이 작동하지 않는 경우 IDE를 다시 시작하십시오. 이것은 VScode로 나에게 일어났습니다.

나는 Windows에서 비슷한 문제가 있었지만 때로는 eslint가 (vscode에서) 작동하지 않는 경우가 있습니다. 나중에 나는 그것이 잠시 후에 잘 작동한다는 것을 깨달았습니다. 이 문제와 관련이 있습니다. eslint 서버를 사용할 수있을 때까지 3-5 분 정도 걸립니다.

환경 변수 설정으로 NO_UPDATE_NOTIFIER=1문제 해결

.eslintrc 및 .eslintignore를 사용 하여 로컬 프로젝트 루트에 이미 규칙을 정의했다고 가정하고 응답 합니다. VSCode Eslint Extension을 설치 한 후 vscode에 대한 settings.json에서 수행해야하는 여러 구성

eslint.enable: true
eslint.nodePath: <directory where your extensions available>

프로젝트 종속성으로 eslint local을 설치하는 것이 이것이 작동하는 마지막 요소입니다. eslint를 전역으로 설치하지 마십시오. 로컬에 설치된 패키지와 충돌 할 수 있습니다.

eslint와 비슷한 문제가 '.. 아직 파일 유효성을 검사하지 않음'이라고 말했지만 VS 코드 문제 콘솔에는 아무것도보고되지 않았습니다. 그러나 VS Code를 최신 버전 (1.32.1)으로 업그레이드하고 다시 시작한 후 eslint가 작동하기 시작했습니다.

제 경우에는 ESLint 가 제 작업 공간에서 비활성화되었습니다. vscode 확장 설정에서 활성화해야했습니다.

명령 줄을 통해 성공적으로 Lint를 수행 할 수 있으므로 ESLint 플러그인 구성에서 문제가 발생할 가능성이 높습니다. .

확장이 제대로 설치되었다고 가정하고 모든 ESLint 관련 구성 속성을 확인하십시오. 프로젝트 (작업 공간) 및 사용자 (글로벌) 정의 settings.json 모두에서 을 확인합니다.

특정 경우에 잘못 구성 될 수있는 몇 가지 사항이 있습니다. 나를 위해 다른 프로젝트에서 TypeScript로 작업 한 후 JavaScript가 비활성화되었으며 내 전역 settings.json이 다음과 같이 보입니다.

"eslint.validate": [
  { "language": "typescript", "autoFix": true }
 ]

여기에서 간단한 수정이있었습니다.

"eslint.validate": [
  { "language": "javascript", "autoFix": true },
  { "language": "typescript", "autoFix": true }
]

이것은 너무 일반적이어서 누군가 가 VS Code에서 작동하지 않는 ESLint 에 대한 간단한 블로그 게시물을 작성했습니다 . 추가하고 로컬 작업 영역 구성을 재정의하기 전에 전역 사용자 settings.json을 확인하십시오.

내 경우에는 eslint validate를 "eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact"]로 설정했습니다.

코드 linting 및 형식화를 위해 Use Prettier Formatter 및 ESLint VS Code 확장을 함께 사용합니다.

이제 주어진 명령을 사용하여 일부 패키지를 설치하십시오. 더 많은 패키지가 필요한 경우 터미널에 설치 명령과 함께 오류로 표시됩니다. 또한 설치하십시오.

npm i eslint prettier eslint@^5.16.0 eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-node eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks@^2.5.0 --save-dev

이제 프로젝트 홈 디렉토리에 새 파일 이름 .prettierrc 를 만듭니다. 이 파일을 사용하여 더 예쁜 확장의 설정을 구성 할 수 있습니다. 내 설정은 다음과 같습니다.

{
  "singleQuote": true
}

이제 ESlint의 경우 요구 사항에 따라 구성 할 수 있습니다. Eslint 웹 사이트로 이동하여 규칙을 참조하십시오 ( https://eslint.org/docs/rules/ )

이제 프로젝트 홈 디렉토리에 .eslintrc.json 이라는 파일 이름을 만듭니다. 해당 파일을 사용하여 eslint를 구성 할 수 있습니다. 내 구성은 다음과 같습니다.

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "no-unused-vars": ["error", { "argsIgnorePattern": "req|res|next|val" }]
  }
}

제 경우에는 package.json및 확장을 구성 했음에도 불구하고 monorepo의 폴더를 하나만 프로젝트에 추가했기 때문에 작동하지 않았습니다 . 전체 프로젝트 ( package.json파일 포함)를 VS 코드에 추가 할 때만 작업했습니다 .

eslint를 package.json 종속성으로 사용하여 프로젝트를 개발하는 경우 npm install. 그것은 나를 위해 그것을 고쳤습니다.

나를 위해 일부 프롬프트가 표시되었을 때 실수로 ESLint를 비활성화했습니다.

아래 단계를 수행하면 문제가 해결되었습니다.

1. Shift + Command + P 그리고 선택 ESLint: Disabled ESLint
2. vscode 닫기
3. Shift + Command + P 그리고 선택 ESLint: Show Output Channel

settings.json 파일로 이동하여 다음을 추가하고 eslint.nodepath를 수정하십시오. 자신의 취향에 맞게 조정하십시오.

 // PERSONAL
  "editor.codeActionsOnSaveTimeout": 2000,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.fontSize": 16,
  "editor.formatOnSave": true,
  "explorer.confirmDragAndDrop": true,
  "editor.tabSize": 2,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.nodePath": "C:\\{path}",
  "eslint.workingDirectories": ["./backend", "./frontend"],