ESLint ไม่ทำงานใน VS Code?

ESLint ไม่ทำงานสำหรับฉันใน VS Code ฉันติดตั้งปลั๊กอินใน VS Code แล้วและ ESLint เองก็เป็นการพึ่งพาของนักพัฒนาใน package.json ซึ่งฉันได้ติดตั้งไว้ด้วย

ฉันแก้ไขตัวเลือกต่อไปนี้ใน VS Code User Settings:

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

ฉันใช้คำสั่งeslint --initเพื่อเพิ่มพื้นฐาน.eslintrc.jsonในไดเร็กทอรีหลักของแพ็คเกจของฉัน

บุคคลอื่นสามารถรับข้อเสนอแนะ ESLint จาก VS Code โดยใช้แพ็คเกจเดียวกันกับไฟล์กำหนดค่า ESLint เดียวกัน

ฉันไม่ได้รับข้อเสนอแนะใด ๆ เมื่อละเมิดกฎหลายข้อโดยตรงซึ่งรวมอยู่ในชุดกฎที่แนะนำซึ่งเป็นค่าเริ่มต้นภายใน.eslintrc.jsonไฟล์

ฉันขาดอะไรไป?

แก้ไข: ฉันได้ทดสอบโดยใช้ ESLint ผ่านทางบรรทัดคำสั่งและทุกอย่างทำงานได้ตามที่คาดไว้โดยพบข้อผิดพลาดที่ควรมีอย่างไรก็ตามข้อผิดพลาดเดียวกันนี้ไม่เคยปรากฏใน VS Code ปัญหาดูเหมือนจะอยู่ในฝั่งของ VS Code ไม่ใช่ ESLint

มีสาเหตุบางประการที่ ESLint อาจไม่ให้ข้อเสนอแนะแก่คุณ ESLint จะค้นหาไฟล์คอนฟิกูเรชันของคุณเป็นอันดับแรกในโปรเจ็กต์ของคุณและหากไม่พบ. eslintrc.json ที่นั่นก็จะมองหาการกำหนดค่าส่วนกลาง โดยส่วนตัวแล้วฉันติดตั้ง ESLint ในแต่ละโปรเจ็กต์เท่านั้นและสร้างการกำหนดค่าตามแต่ละโปรเจ็กต์

เหตุผลประการที่สองที่คุณไม่ได้รับความคิดเห็นคือการได้รับความคิดเห็นคุณต้องกำหนดกฎการทับถมของคุณใน. eslintrc.json หากไม่มีกฎที่นั่นหรือคุณไม่ได้ติดตั้งปลั๊กอินคุณจะต้องกำหนดมัน

หาก ESLint ทำงานในเทอร์มินัล แต่ไม่อยู่ใน VSCode อาจเป็นเพราะส่วนขยายไม่สามารถตรวจพบทั้งโฟลเดอร์ในเครื่องและnode_modulesโฟลเดอร์ส่วนกลาง

ในการตรวจสอบให้กดCtrl+ Shift+ Uใน VSCode เพื่อเปิดOutputแผงหลังจากเปิดไฟล์ JavaScript ที่มีeslintปัญหาที่ทราบ หากแสดงFailed to load the ESLint library for the document {documentName}.js-or- หากProblemsแท็บแสดงข้อผิดพลาดหรือคำเตือนที่อ้างถึงeslint VSCode กำลังมีปัญหาในการพยายามตรวจหาเส้นทาง

ถ้าใช่ให้ตั้งค่าด้วยตนเองโดยกำหนดค่าeslint.nodePathในการตั้งค่า VSCode ( settings.json) ระบุเส้นทางแบบเต็ม (ตัวอย่างเช่น "eslint.nodePath": "C:\\Program Files\\nodejs",) - ขณะนี้ยังไม่รองรับการใช้ตัวแปรสภาพแวดล้อม
ตัวเลือกนี้จะได้รับการบันทึกในหน้าขยาย ESLint

ในกรณีของฉันเนื่องจากฉันใช้ TypeScript กับ React การแก้ไขก็เพียงแค่บอกให้ 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

PS: คำสั่งที่มีประโยชน์เพื่อแสดงรายการไดเร็กทอรีย่อยทั้งหมดที่มี.eslintrcยกเว้น / node_modules:

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

ในกรณีของฉันฉันไม่ได้ติดตั้งส่วนขยาย ESLint ใน VSCode ซึ่งเป็นสาเหตุของปัญหา ทำได้และเริ่มทำงานอีกครั้ง

การรีสตาร์ท VSCode ใช้ได้ผลสำหรับฉัน

เนื่องจากคุณสามารถทำขุยผ่านบรรทัดคำสั่งได้สำเร็จปัญหาส่วนใหญ่มักเกิดจากการกำหนดค่าปลั๊กอิน ESLintปลั๊กอิน

สมมติว่าติดตั้งส่วนขยายอย่างถูกต้องให้ตรวจสอบคุณสมบัติการกำหนดค่าที่เกี่ยวข้องกับ ESLint ทั้งหมดกำหนดค่าทั้งในโปรเจ็กต์ (พื้นที่ทำงาน) และการตั้งค่าที่กำหนดโดยผู้ใช้ (ส่วนกลาง)

มีบางสิ่งที่อาจกำหนดค่าไม่ถูกต้องในกรณีเฉพาะของคุณ สำหรับฉันมันถูกปิดใช้งาน JavaScript หลังจากทำงานกับ TypeScript ในโปรเจ็กต์อื่นและglobal settings.json ของฉันก็ค้นหาสิ่งต่อไปนี้:

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

จากที่นี่มันเป็นการแก้ไขง่ายๆ:

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

นี้เป็นเพื่อร่วมกันว่าคนที่เขียนบล็อกโพสต์ตรงไปตรงมาเกี่ยวกับESLint ไม่ได้ทำงานใน VS รหัส ฉันเพิ่งเพิ่มตรวจสอบการตั้งค่าผู้ใช้ส่วนกลางของคุณก่อนที่จะแทนที่การกำหนดค่าพื้นที่ทำงานในเครื่อง

หากคุณใช้การติดตั้ง ESLint ส่วนกลางปลั๊กอินใด ๆ ที่ใช้ในการกำหนดค่าของคุณจะต้องได้รับการติดตั้งทั่วโลกด้วย ชอบที่ชาญฉลาดสำหรับการติดตั้งในท้องถิ่น หากคุณได้ติดตั้งในเครื่องและกำหนดค่าอย่างถูกต้องในเครื่อง แต่ eslint ไม่ทำงานให้ลองรีสตาร์ท IDE ของคุณ สิ่งนี้เพิ่งเกิดขึ้นกับฉันด้วย VScode

ในกรณีของฉันESLintถูกปิดใช้งานในพื้นที่ทำงานของฉัน ฉันต้องเปิดใช้งานในการตั้งค่าส่วนขยาย vscode

ฉันมีปัญหาที่คล้ายกันบน windows แต่บางครั้ง eslint ก็ทำงาน (ใน vscode) ไม่ได้ หลังจากนั้นฉันก็รู้ว่ามันใช้งานได้ดี มันเกี่ยวข้องกับปัญหานี้:เซิร์ฟเวอร์ eslint ใช้เวลาประมาณ 3-5 นาทีจนกว่าจะพร้อมใช้งาน

การตั้งค่าตัวแปรสภาพแวดล้อมNO_UPDATE_NOTIFIER=1ช่วยแก้ปัญหาได้

ฉันให้การตอบกลับโดยสมมติว่าคุณได้กำหนดกฎในรูทโปรเจ็กต์ในเครื่องของคุณแล้วด้วย. eslintrcและ. eslintignore หลังจากติดตั้ง VSCode Eslint Extension การกำหนดค่าต่างๆซึ่งจำเป็นต้องทำใน settings.json สำหรับ vscode

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

การติดตั้ง eslint local เป็นการพึ่งพาโปรเจ็กต์เป็นส่วนผสมสุดท้ายสำหรับการทำงานนี้ อย่าพิจารณาติดตั้ง eslint เป็น global ซึ่งอาจขัดแย้งกับแพ็คเกจที่ติดตั้งภายในเครื่องของคุณ

ฉันมีปัญหาคล้ายกันกับ eslint โดยบอกว่าเป็น '.. ยังไม่ได้ตรวจสอบความถูกต้องของไฟล์ใด ๆ ' แต่ไม่มีการรายงานในคอนโซลปัญหา VS Code อย่างไรก็ตามหลังจากอัปเกรด VS Code เป็นเวอร์ชันล่าสุด (1.32.1) และรีสตาร์ท eslint ก็เริ่มทำงาน

ในกรณีของฉันการตั้งค่า eslint validate เป็น: "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact"] ได้ผล

ฉันใช้ Use Prettier Formatter และ ESLint VS Code extension ร่วมกันสำหรับการขุยโค้ดและการจัดรูปแบบ

ตอนนี้ติดตั้งบางแพ็กเกจโดยใช้คำสั่งที่กำหนดหากต้องการแพ็คเกจเพิ่มเติมจะแสดงพร้อมคำสั่งการติดตั้งเป็นข้อผิดพลาดในเทอร์มินัลสำหรับคุณโปรดติดตั้งด้วย

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" }]
  }
}

สำหรับฉันฉันปิดการใช้งาน ESLint โดยไม่ได้ตั้งใจเมื่อมีการแสดงพรอมต์บางอย่าง

การทำตามขั้นตอนด้านล่างแก้ไขให้ฉัน

1. Shift + Command + P และเลือก ESLint: Disabled ESLint
2. ปิด vscode
3. Shift + Command + P และเลือก ESLint: Show Output Channel

ในกรณีของฉันมันใช้งานไม่ได้เพราะฉันได้เพิ่มโฟลเดอร์ monorepo เพียงโฟลเดอร์เดียวในโปรเจ็กต์แม้ว่าฉันจะpackage.jsonกำหนดค่าส่วนขยายและส่วนขยายไว้แล้วก็ตาม ฉันใช้งานได้เฉพาะเมื่อฉันเพิ่มโครงการทั้งหมด (ซึ่งมีpackage.jsonไฟล์) ลงใน VS Code

หากคุณมีการพัฒนาโครงการที่มี eslint เป็นพึ่งพา package.json npm installให้แน่ใจว่าคุณทำงาน ที่แก้ไขให้ฉัน

ไปที่ไฟล์ 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"],

ในกรณีของฉันฉันมี.eslintrc.jsonไฟล์อยู่ใน.vscodeโฟลเดอร์ เมื่อฉันย้ายออกไปที่โฟลเดอร์ราก ESLint ก็เริ่มทำงานอย่างถูกต้อง

ปัญหาทั่วไป

เปิดเทอร์มินัลCtrl+`

ใน เมนูดรอปดาวน์เอาต์พุต ESLintคุณจะพบข้อมูลการดีบักที่เป็นประโยชน์ (ข้อผิดพลาดคำเตือนข้อมูล)

ตัวอย่างเช่นการ.eslintrc-.jsonโยนข้อผิดพลาดนี้หายไป:

Error: ENOENT: no such file or directory, realpath

จากนั้นตรวจสอบว่าปลั๊กอินเปิดใช้งานหรือไม่:

สุดท้ายตั้งแต่ v 2.0.4 - eslint.validateในกรณีปกติไม่จำเป็นอีกต่อไป ( การตั้งค่าเดิม ):

eslint.probe= อาร์เรย์สำหรับตัวระบุภาษาที่ควรเปิดใช้งานส่วนขยาย ESLint และควรพยายามตรวจสอบความถูกต้องของไฟล์ หากการตรวจสอบความถูกต้องล้มเหลวสำหรับภาษาโพรเบดส่วนขยายจะระบุว่าเงียบ ค่าเริ่มต้นไปที่ [ javascript, javascriptreact, typescript, typescriptreact, html, vue, markdown]

ปัญหาเฉพาะ - การติดตั้งปลั๊กอินครั้งแรก

ปัญหาของฉันเกี่ยวข้องกับแถบสถานะ "บล็อกปัจจุบัน" ของ ปลั๊กอิน ESLintในการติดตั้งใหม่ / ครั้งแรก (v2.1.14)

ตั้งแต่ปลั๊กอิน ESLint เวอร์ชัน 2.1.10 (08/10/2020)

ไม่มีกล่องโต้ตอบโมดอลปรากฏขึ้นเมื่อส่วนขยาย ESLint พยายามโหลดไลบรารี ESLint เป็นครั้งแรกและจำเป็นต้องมีการอนุมัติ แทนที่รายการแถบสถานะ ESLint จะเปลี่ยนเป็นไอคอนสถานะ ESLint ซึ่งบ่งชี้ว่าการดำเนินการถูกบล็อกอยู่ในขณะนี้

คลิกที่status-bar(มุมขวาล่าง):

เปิดป๊อปอัปนี้:

อนุมัติ ==> Allows Everywhere

- หรือตามคำสั่ง:

ctrl+ Shift+ p -ESLint: Manage Library Execution

อ่านเพิ่มเติมที่นี่ภายใต้ "บันทึกประจำรุ่น":

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint