ESLint tidak bekerja di VS Code?

ESLint tidak berfungsi untuk saya di VS Code. Saya telah menginstal plugin di VS Code, dan ESLint itu sendiri sebagai dependensi pengembang di package.json saya, yang telah saya instal juga.

Saya mengubah opsi berikut di Pengaturan Pengguna VS Code:

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

Saya telah menggunakan perintah eslint --inituntuk menambahkan dasar .eslintrc.jsonke direktori utama paket saya.

Orang lain bisa mendapatkan umpan balik ESLint dari VS Code menggunakan paket yang sama persis dengan file konfigurasi ESLint yang sama persis.

Saya tidak menerima umpan balik apa pun ketika secara langsung melanggar beberapa aturan yang semuanya termasuk dalam kumpulan aturan yang direkomendasikan yang secara default di dalam .eslintrc.jsonfile.

Apa yang saya lewatkan?

Sunting: Saya telah menguji menggunakan ESLint melalui baris perintah, dan semuanya bekerja seperti yang diharapkan, dengan kesalahan yang ditemukan di tempat yang seharusnya, namun, kesalahan yang sama ini tidak pernah muncul di VS Code. Masalahnya tampaknya ada di sisi VS Code dan bukan ESLint.

Ada beberapa alasan mengapa ESLint mungkin tidak memberi Anda umpan balik. ESLint akan mencari file konfigurasi Anda terlebih dahulu di proyek Anda dan jika tidak dapat menemukan .eslintrc.json di sana, ESLint akan mencari konfigurasi global. Secara pribadi, saya hanya menginstal ESLint di setiap proyek dan membuat konfigurasi berdasarkan setiap proyek.

Alasan kedua mengapa Anda tidak mendapatkan umpan balik adalah untuk mendapatkan umpan balik Anda harus mendefinisikan aturan linting Anda di .eslintrc.json. Jika tidak ada aturan di sana, atau Anda tidak memiliki plugin yang diinstal, Anda harus menentukannya.

Jika ESLint berjalan di terminal tetapi tidak di dalam VSCode, mungkin karena ekstensi tidak dapat mendeteksi node_modulesfolder lokal dan global .

Untuk memverifikasi, tekan Ctrl+ Shift+ Udi VSCode untuk membuka Outputpanel setelah membuka file JavaScript dengan eslintmasalah yang diketahui . Jika itu menunjukkan Failed to load the ESLint library for the document {documentName}.js-atau- jika Problemstab menunjukkan kesalahan atau peringatan yang merujuk ke eslint, maka VSCode mengalami masalah saat mencoba mendeteksi jalur.

Jika ya, maka atur secara manual dengan mengkonfigurasi eslint.nodePathdi pengaturan VSCode ( settings.json). Berikan jalur lengkap (misalnya, seperti "eslint.nodePath": "C:\\Program Files\\nodejs",) - menggunakan variabel lingkungan saat ini tidak didukung.
Opsi ini telah didokumentasikan di halaman ekstensi ESLint .

Dalam kasus saya, karena saya menggunakan TypeScript dengan React, perbaikannya hanya memberi tahu ESLint untuk juga memvalidasi file-file ini. Ini perlu masuk ke pengaturan pengguna Anda:

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

mengonfigurasi direktori kerja menyelesaikannya untuk saya, karena saya memiliki banyak proyek dengan .eslintrcfile sendiri yang dibuka di jendela yang sama.

Taruh ini di .vscode/settings.json

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

terima kasih kepada orang ini di github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

PS: perintah yang berguna untuk mencantumkan semua subdirektori yang berisi .eslintrckecuali / node_modules:

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

Dalam kasus saya, saya belum menginstal ekstensi ESLint di VSCode, yang menyebabkan masalah. Berhasil dan mulai bekerja lagi.

Memulai ulang VSCode berhasil untuk saya.

Karena Anda berhasil menyaring melalui baris perintah, masalahnya kemungkinan besar ada pada konfigurasi plugin ESLint .

Dengan asumsi ekstensi dipasang dengan benar, periksa semua properti konfigurasi terkait ESLint di kedua project (ruang kerja) dan pengaturan yang ditentukan pengguna (global).

Ada beberapa hal yang dapat salah dikonfigurasi dalam kasus Anda; bagi saya itu JavaScript dinonaktifkan setelah bekerja dengan TypeScript di proyek lain dan pengaturan global saya. json akhirnya melihat berikut:

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

Dari sini, perbaikan sederhana:

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

Ini sangat umum sehingga seseorang menulis posting blog langsung tentang ESLint yang tidak berfungsi di VS Code . Saya baru saja menambahkan, periksa pengaturan pengguna global Anda. Json sebelum mengganti konfigurasi ruang kerja lokal.

Jika Anda menggunakan penginstalan global ESLint, plugin apa pun yang digunakan dalam konfigurasi Anda juga harus diinstal secara global. Suka bijaksana untuk instalasi lokal. jika Anda telah menginstal secara lokal dan dikonfigurasi secara lokal dengan benar, namun eslint tidak berfungsi, coba restart IDE Anda. Ini baru saja terjadi pada saya dengan VScode.

Dalam kasus saya ESLint dinonaktifkan di ruang kerja saya. Saya harus mengaktifkannya di pengaturan ekstensi vscode.

Saya memiliki masalah serupa di windows, namun terkadang eslint berfungsi (di vscode) terkadang tidak. Kemudian saya menyadari bahwa itu berfungsi dengan baik setelah beberapa saat. Itu terkait dengan masalah ini: server eslint membutuhkan ~ 3-5 menit hingga tersedia

Pengaturan variabel lingkungan NO_UPDATE_NOTIFIER=1memecahkan masalah

Saya memberikan respons dengan asumsi bahwa Anda telah menetapkan aturan di root project lokal Anda dengan .eslintrc dan .eslintignore . Setelah menginstal VSCode Eslint Extension beberapa konfigurasi yang perlu dilakukan di settings.json untuk vscode

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

Menginstal eslint local sebagai ketergantungan proyek adalah bahan terakhir untuk bekerja. pertimbangkan untuk tidak menginstal eslint sebagai global yang dapat bertentangan dengan paket lokal Anda yang diinstal.

Saya memiliki masalah serupa dengan eslint yang mengatakan itu '..tidak memvalidasi file apa pun', tetapi tidak ada yang dilaporkan di konsol masalah VS Code. Namun setelah memutakhirkan VS Code ke versi terbaru (1.32.1) dan memulai ulang, eslint mulai bekerja.

Dalam kasus saya, pengaturan eslint memvalidasi ke: "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact"], berhasil.

Saya menggunakan Use Prettier Formatter dan ESLint VS Code extension bersama-sama untuk code linting dan formating.

sekarang instal beberapa paket menggunakan perintah yang diberikan, jika lebih banyak paket yang dibutuhkan, mereka akan ditampilkan dengan perintah instalasi sebagai kesalahan di terminal untuk Anda, silakan instal juga.

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

sekarang buat nama file baru .prettierrc di direktori home proyek Anda, menggunakan file ini Anda dapat mengkonfigurasi pengaturan ekstensi yang lebih cantik, pengaturan saya di bawah ini:

{
  "singleQuote": true
}

Sekarang untuk ESlint Anda dapat mengkonfigurasinya sesuai dengan kebutuhan Anda, saya menyarankan Anda untuk pergi ke situs web Eslint, lihat aturannya ( https://eslint.org/docs/rules/ )

Sekarang buat nama file .eslintrc.json di direktori home proyek Anda, menggunakan file itu Anda dapat mengkonfigurasi eslint, konfigurasi saya di bawah ini:

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

Bagi saya, saya tidak sengaja menonaktifkan ESLint ketika beberapa prompt ditunjukkan olehnya.

Melakukan langkah-langkah di bawah ini memperbaikinya untuk saya

1. Shift + Command + P dan pilih ESLint: Disabled ESLint
2. Tutup vscode
3. Shift + Command + P dan pilih ESLint: Show Output Channel

Dalam kasus saya, itu tidak berfungsi karena saya hanya menambahkan satu folder monorepo ke proyek, meskipun saya telah package.jsondan ekstensi dikonfigurasi. Saya bekerja hanya ketika saya menambahkan seluruh proyek (yang berisi package.jsonfile) ke Kode VS.

Jika Anda mengembangkan proyek dengan eslint sebagai dependensi package.json, pastikan Anda menjalankannya npm install. Itu memperbaikinya untuk saya.

Pergi ke file settings.json Anda, tambahkan yang berikut ini dan, perbaiki eslint.nodepath tersebut. Sesuaikan dengan preferensi Anda sendiri.

 // 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"],

Dalam kasus saya, saya memiliki .eslintrc.jsonfile di dalam .vscodefolder tersebut. Setelah saya memindahkannya ke folder root, ESLint mulai bekerja dengan benar.

Masalah umum

Buka terminal Ctrl+`

Di bawah output ESLint dropdown, Anda menemukan data debugging yang berguna (Error, peringatan, info).

Misalnya, .eslintrc-.jsonkesalahan melempar ini hilang :

Error: ENOENT: no such file or directory, realpath

Selanjutnya, periksa apakah plugin tersebut diaktifkan:

Terakhir, Sejak v 2.0.4 - eslint.validatedalam kasus normal tidak diperlukan lagi ( pengaturan lama ):

eslint.probe= larik untuk pengenal bahasa yang ekstensi ESLintnya harus diaktifkan dan harus mencoba memvalidasi file. Jika validasi gagal untuk bahasa yang diperiksa, ekstensi akan mengatakan senyap. Default untuk [ javascript, javascriptreact, typescript, typescriptreact, html, vue, markdown].

Masalah Khusus - Penginstalan plugin pertama kali

Masalah saya terkait dengan bilah status plugin ESLint "saat ini memblokir" pada Instalasi Baru / Pertama (v2.1.14).

Sejak plugin ESLint Versi 2.1.10 (08/10/2020)

tidak ada dialog modal yang ditampilkan saat ekstensi ESLint mencoba memuat pustaka ESLint untuk pertama kalinya dan diperlukan persetujuan. Sebaliknya, item status bar ESLint berubah menjadi ikon status ESLint yang menunjukkan bahwa eksekusi saat ini diblokir.

Klik pada status-bar (Sudut Kanan-Bawah):

Buka munculan ini:

Setujui ==> Allows Everywhere

-atau- dengan perintah:

ctrl+ Shift+ p -ESLint: Manage Library Execution

Baca lebih lanjut di sini di bawah "Catatan Rilis":

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