Mengintegrasikan ESLINT ke dalam VS Code. Jika Anda baru di Eslint, periksa dokumentasi.
Ekstensi menggunakan pustaka Eslint yang diinstal di folder ruang kerja yang terbuka. Jika folder tidak memberikan satu ekstensi mencari versi instalasi global. Jika Anda belum menginstal Eslint baik secara lokal atau global melakukannya dengan menjalankan npm install eslint
di folder Workspace untuk instalasi lokal atau npm install -g eslint
untuk instalasi global.
Pada folder baru Anda mungkin juga perlu membuat file konfigurasi .eslintrc
. Anda dapat melakukan ini dengan menggunakan perintah VS Code Create ESLint configuration
atau dengan menjalankan perintah eslint
di terminal dengan npx eslint --init
.
Bagian ini menjelaskan rilis besar dan perbaikannya. Untuk daftar perubahan terperinci, silakan merujuk ke Log Ubah.
Dari versi 2.2.3 pada nomor versi ganjil atau patch yang ditunjukkan menunjukkan orang dalam atau pra-pelepasan. Jadi versi 2.2.3
, 2.2.5
dan 2.3.1
semuanya akan menjadi versi pra-rilis. 2.2.10
, 2.4.10
dan 3.0.0
semuanya akan menjadi versi rilis reguler.
eslint.validate
ditentukan hanya file dalam daftar itu akan divalidasi. Misalnya, pengaturan formulir "eslint.validate": [
"javascript"
]
eslint.useFlatConfig
baru yang dihormati oleh Eslint versi 8.57.0 dan di atas. Jika salah satu versi tersebut digunakan, ekstensi melekat pada rencana peluncuran Eslint Flat Config. Pengaturan memiliki arti yang sama dengan variabel lingkungan ESLINT_USE_FLAT_CONFIG
. Itu artinya:eslint.experimental.useFlatConfig
sudah usang dan hanya boleh digunakan untuk versi eslint> = 8.21 <8.57.0.ESLint: Revalidate all open files
untuk memulihkan semua file terbuka.eslint.timeBudget.onValidation
dan eslint.timeBudget.onFixes
untitled
agnostikeslint.alwaysShowStatus
dihapus karena status sekarang ditampilkan sebagai indikator status bahasa.eslint.timeBudget.onValidation
dan eslint.timeBudget.onFixes
untitled
agnostikeslint.alwaysShowStatus
dihapus karena status sekarang ditampilkan sebagai indikator status bahasa. Dukungan tambahan untuk ESLINT V8.0 Beta. Agar ke belakang kompatibel dengan pengaturan Eslint, versi masih menggunakan cliengine jika tersedia. Namun pengguna dapat memaksa penggunaan API ESLINT baru menggunakan pengaturan eslint.useESLintClass
. Berhati -hatilah bahwa modul NPM ESLINT mengubah bagaimana opsi ditafsirkan. Itu juga mengubah nama opsi tertentu. Jika Anda menggunakan eslint.options
untuk melewati opsi khusus ke modul ESLINT NPM, Anda mungkin perlu menyesuaikan pengaturan ke formulir baru.
Model Workspace Trust Adapt Vs Code. Sebagai akibatnya, dialog kustom yang diperkenalkan Eslint dalam versi 2.1.7
dihapus. Selain itu nilai off
ditambahkan ke dukungan kustomisasi aturan ESLINT.
Menambahkan dukungan untuk menyesuaikan keparahan aturan Eslint. Lihat pengaturan baru eslint.rules.customizations
.
Meminta konfirmasi nilai eslint.nodePath
. Pengaturan ini perlu menentukan nilai eslint.nodePath
dalam file code-workspace
yang sesuai dan ekstensi sekarang memperingatkan pengguna tentang hal itu. Di bawah contoh file code-workspace
seperti itu
{
"folders" : [
{
"path" : " project-a "
},
{
"path" : " project-b "
}
],
"settings" : {
"eslint.nodePath" : " myCustomNodePath "
}
}
Untuk mengikuti model VS Code untuk mengonfirmasi pengaturan lokal Workspace yang mempengaruhi eksekusi kode dua pengaturan eslint.runtime
dan eslint.nodePath
sekarang memerlukan konfirmasi pengguna jika didefinisikan secara lokal di folder ruang kerja atau file ruang kerja. Pengguna yang menggunakan pengaturan ini dalam lingkup lokal tersebut akan melihat pemberitahuan yang mengingatkan mereka akan kebutuhan konfirmasi.
Versi ini juga menambahkan perintah untuk memulai kembali server Eslint.
Aliran persetujuan untuk memungkinkan pelaksanaan perpustakaan Eslint dikerjakan ulang. Pengalaman awalnya sekarang sebagai berikut:
Eksekusi perpustakaan Eslint dapat ditolak atau disetujui menggunakan gerakan berikut:
ESLint: Manage Library Execution
dari palet perintahSemua gerakan akan membuka dialog berikut:
Tindakan yang dipilih kemudian tercermin dalam item bilah status eslint dengan cara berikut:
Allow
Will mengawali item bilah status dengan tanda centang.Allow Everywhere
akan mengawali item bilah status dengan tanda centang ganda.Deny
dan Disable
akan mengawali item bilah status dengan tanda yang diblokir.Anda dapat mengelola keputusan kami menggunakan perintah berikut:
ESLint: Manage Library Execution
akan membuka kembali dialog di atasESLint: Reset Library Decisions
memungkinkan Anda mengatur ulang keputusan sebelumnya yang telah membuat.Rilis ini juga membahas kerentanan yang dijelaskan dalam CVE-2021-27081.
Versi 2.0.4 dari ekstensi berisi perbaikan besar berikut:
eslint.validate
. Hal yang sama berlaku untuk file HTML dan VUE.JS.eslint.workingDirectories
sekarang dapat menggunakan pola Glob alih -alih mendaftarkan setiap folder proyek. Misalnya, { "pattern": "code-*" }
akan mencocokkan semua folder proyek yang dimulai dengan code-
. Selain itu, ekstensi sekarang mengubah direktori kerja secara default. Anda dapat menonaktifkan fitur ini dengan properti !cwd
yang baru.eslint.format.enable
.editor.codeActionsOnSave
Pengaturan. Pengaturan mendukung source.fixAll.eslint
Properti Spesifik Eslint.fixall.eslint. Ekstensi juga menghormati source.fixAll
properti generik.Fixall.Pengaturan di bawah ini menyalakan perbaikan otomatis untuk semua penyedia termasuk Eslint:
"editor.codeActionsOnSave" : {
"source.fixAll" : " explicit "
}
Sebaliknya, konfigurasi ini hanya menyalakannya untuk Eslint:
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : " explicit "
}
Anda juga dapat secara selektif menonaktifkan Eslint melalui:
"editor.codeActionsOnSave" : {
"source.fixAll" : " explicit " ,
"source.fixAll.eslint" : " never "
}
Perhatikan juga bahwa ada anggaran waktu 750ms untuk menjalankan tindakan kode pada save yang mungkin tidak cukup untuk file javascript / typeScript besar. Anda dapat meningkatkan anggaran waktu menggunakan editor.codeActionsOnSaveTimeout
.
Pengaturan eslint.autoFixOnSave
lama sekarang sudah usang dan dapat dihapus dengan aman.
Jika Anda menggunakan versi Eslint Extension <2.x maka silakan merujuk ke opsi Pengaturan di sini.
Ekstensi ini berkontribusi variabel berikut ke pengaturan:
eslint.enable
: Mengaktifkan/menonaktifkan ESLINT untuk folder ruang kerja. Diaktifkan secara default.
eslint.debug
: Mengaktifkan mode debug Eslint (sama seperti -opsi baris perintah -debug). Silakan lihat saluran output ESLINT untuk output debug. Opsi ini sangat membantu untuk melacak konfigurasi dan masalah instalasi dengan ESLint karena memberikan informasi verbose tentang bagaimana ESLINT memvalidasi file.
eslint.lintTask.enable
: Apakah ekstensi berkontribusi tugas serat untuk meletakkan seluruh folder ruang kerja.
eslint.lintTask.options
: Opsi baris perintah diterapkan saat menjalankan tugas untuk meluncurkan seluruh ruang kerja (https://eslint.org/docs/user-guide/command-line-intface). Contoh untuk menunjuk ke file .eslintrc.json
khusus dan .eslintignore
adalah:
{
"eslint.lintTask.options" : " -c C:/mydirectory/.eslintrc.json --ignore-path C:/mydirectory/.eslintignore . "
}
Pengaturan eslint.packageManager
lama sekarang sudah usang dan dapat dihapus dengan aman. Ini mengendalikan manajer paket yang akan digunakan untuk menyelesaikan perpustakaan Eslint. Ini hanya memiliki pengaruh jika perpustakaan Eslint diselesaikan secara global. Nilai yang valid adalah "npm"
atau "yarn"
atau "pnpm"
.
eslint.options
: Opsi untuk mengonfigurasi bagaimana ESLINT mulai menggunakan API Kelas ESLINT atau API CliEngine. Ekstensi menggunakan ESLINT Class API jika ESLINT versi 8 atau lebih tinggi digunakan atau jika ESLINT versi 7 digunakan dan pengaturan eslint.useESLintCLass
diatur ke True. Dalam semua kasus lain, API CliEngine digunakan. Contoh untuk menunjuk ke file .eslintrc.json
kustom menggunakan ESLINT API baru adalah:
{
"eslint.options" : { "overrideConfigFile" : " C:/mydirectory/.eslintrc.json " }
}
Contoh untuk menunjuk ke file .eslintrc.json
kustom menggunakan API CliEngine lama adalah:
{
"eslint.options" : { "configFile" : " C:/mydirectory/.eslintrc.json " }
}
eslint.useESLintClass
(@since 2.2.0) - Apakah akan menggunakan API Kelas ESLINT bahkan jika API CliEngine hadir. Pengaturan hanya kehormatan saat menggunakan ESLINT Versi 7.x.
eslint.run
- Jalankan linter onSave
atau onType
, default adalah onType
.
eslint.quiet
- Abaikan peringatan.
eslint.runtime
- Gunakan pengaturan ini untuk mengatur jalur runtime simpul untuk menjalankan Eslint di bawah. Gunakan "node"
jika Anda ingin menggunakan Node Sistem Default versi Anda.
eslint.execArgv
-Gunakan pengaturan ini untuk meneruskan argumen tambahan ke node runtime seperti --max_old_space_size=4096
eslint.nodeEnv
- Gunakan pengaturan ini jika plugin ESLINT atau konfigurasi membutuhkan process.env.NODE_ENV
untuk didefinisikan.
eslint.nodePath
- Gunakan pengaturan ini jika paket Eslint yang diinstal tidak dapat dideteksi, misalnya /myGlobalNodePackages/node_modules
.
eslint.probe
- Array untuk pengidentifikasi bahasa yang harus diaktifkan oleh ekstensi Eslint dan harus mencoba memvalidasi file. Jika validasi gagal untuk bahasa yang diselidiki, ekstensi mengatakan diam. Default ke ["astro", "javascript", "javascriptreact", "typescript","typescriptreact", "html", "mdx", "vue", "markdown", "json", "jsonc"]
.
eslint.validate
- Sejumlah pengidentifikasi bahasa yang menentukan file yang validasi akan ditegakkan. Jika hanya ditentukan file dengan salah satu ID bahasa yang ditentukan akan divalidasi. Ini sebanding dengan opsi Baris Perintah --ext
. Default ke null
.
eslint.format.enable
: Mengaktifkan Eslint sebagai formatter untuk file yang divalidasi. Meskipun Anda juga dapat menggunakan formatter pada save menggunakan editor.formatOnSave
pengaturan. Pribadi yang disarankan untuk menggunakan fitur editor.codeActionsOnSave
karena memungkinkan untuk konfigurasi yang lebih baik.
eslint.workingDirectories
- Menentukan bagaimana Direktori Kerja Eslint digunakan dihitung. Eslint menyelesaikan file konfigurasi (misalnya eslintrc
, .eslintignore
) relatif terhadap direktori yang berfungsi sehingga penting untuk mengonfigurasi ini dengan benar. Jika mengeksekusi Eslint di terminal mengharuskan Anda untuk mengubah direktori kerja di terminal menjadi sub folder maka biasanya perlu untuk mengubah pengaturan ini. (Lihat juga Opsi Kelas Eslint#CWD). Harap juga diingat bahwa file .eslintrc*
diselesaikan dengan mempertimbangkan direktori induk sedangkan file .eslintignore
hanya dihormati di direktori kerja saat ini. Nilai -nilai berikut dapat digunakan:
[{ "mode": "location" }]
(@since 2.0.0): menginstruksikan Eslint untuk menggunakan lokasi folder ruang kerja atau lokasi file (jika tidak ada folder ruang kerja terbuka) sebagai direktori kerja. Ini adalah default dan merupakan strategi yang sama seperti yang digunakan dalam versi yang lebih lama dari ekstensi Eslint (1.9.x versi).[{ "mode": "auto" }]
(@since 2.0.0): menginstruksikan Eslint untuk menyimpulkan direktori kerja berdasarkan lokasi package.json
, eslint.config.js
, .eslintignore
dan .eslintrc*
file. Ini mungkin berhasil dalam banyak kasus tetapi dapat menyebabkan hasil yang tidak terduga juga.string[]
: Array direktori yang berfungsi untuk digunakan. Pertimbangkan tata letak direktori berikut: root/
client/
.eslintrc.json
client.js
server/
.eslintignore
.eslintrc.json
server.js
"eslint.workingDirectories" : [ "./client" , "./server" ]
!cwd
dapat digunakan (misalnya { "directory": "./client", "!cwd": true }
). Ini akan menggunakan direktori klien sebagai direktori kerja Eslint tetapi tidak akan mengubah direktori kerja proses.[{ "pattern": glob pattern }]
(@since 2.0.0): Memungkinkan untuk menentukan pola untuk mendeteksi direktori kerja. Ini pada dasarnya adalah jalan pintas untuk mendaftar setiap direktori. Jika Anda memiliki repositori mono dengan semua proyek Anda berada di bawah folder paket yang dapat Anda gunakan { "pattern": "./packages/*/" }
untuk membuat semua folder ini bekerja direktori. eslint.codeAction.disableRuleComment
- Objek dengan Properties:
enable
- Show Nonaktifkan aturan serat di menu Perbaikan Cepat. true
secara default.location
- Pilih untuk menambahkan komentar eslint-disable
pada separateLine
atau sameLine
. separateLine
adalah default. Contoh: { "enable" : true , "location" : " sameLine " }
eslint.codeAction.showDocumentation
- Objek dengan Properties:
enable
- Tampilkan halaman Web Dokumentasi aturan Lint Open di menu Perbaikan Cepat. true
secara default. eslint.codeActionsOnSave.mode
(@since 2.0.12) - Mengontrol masalah mana yang diperbaiki saat menjalankan tindakan kode saat disimpan.
all
: Memperbaiki semua masalah yang mungkin dengan menilai kembali konten file. Ini menjalankan jalur kode yang sama dengan menjalankan ESLINT dengan opsi --fix
di terminal dan karenanya dapat memakan waktu. Ini adalah nilai default.problems
: Memperbaiki hanya masalah yang dapat ditetapkan saat ini selama pengeditan tekstual mereka tidak tumpang tindih. Mode ini jauh lebih cepat tetapi sangat mungkin hanya memperbaiki bagian dari masalah. Harap dicatat bahwa jika eslint.codeActionsOnSave.mode
disetel ke problems
, eslint.codeActionsOnSave.rules
diabaikan.
eslint.codeActionsOnSave.rules
(@since 2.2.0) - Mengontrol aturan yang dipertimbangkan selama tindakan kode pada simpan eksekusi. Jika tidak ditentukan semua aturan yang ditentukan melalui mekanisme konfigurasi ESLINT normal dipertimbangkan. Array kosong menghasilkan tidak ada aturan yang dipertimbangkan. Jika array berisi lebih dari satu entri, pesanan penting dan pertandingan pertama menentukan status hidup / off aturan. Pengaturan ini hanya dihormati dalam kasus -kasus berikut:
eslint.codeActionsOnSave.mode
memiliki nilai yang berbeda dari problems
eslint.useESLintClass
diatur ke true (versi> = 8 || (versi == 7.x && eslint.useeslintclass)).Dalam contoh ini hanya aturan terkait titik koma yang dipertimbangkan:
"eslint.codeActionsOnSave.rules" : [
" *semi* "
]
Contoh ini menghapus semua aturan spesifik ESLINT ESLINT dari tindakan kode pada save pass tetapi menjaga semua aturan lainnya:
"eslint.codeActionsOnSave.rules" : [
" !@typescript-eslint/* " ,
" * "
]
Contoh ini menjaga aturan indentasi dan semi dari naskah eslint, menonaktifkan semua aturan eslint naskah lain dan menjaga sisanya:
"eslint.codeActionsOnSave.rules" : [
" @typescript-eslint/semi " ,
" @typescript-eslint/indent " ,
" !@typescript-eslint/* " ,
" * "
]
eslint.rules.customizations
(@since 2.1.20) - memaksa aturan untuk melaporkan tingkat keparahan yang berbeda dalam kode VS dibandingkan dengan konfigurasi ESLint yang sebenarnya dari proyek. Berisi sifat -sifat ini:
"rule
": Pilih aturan dengan nama yang cocok, anjak tandat dalam tanda bintang sebagai wildcard: { "rule": "no-*", "severity": "warn" }
"!"
Untuk menargetkan semua aturan yang tidak cocok dengan nama: { "rule": "!no-*", "severity": "info" }
"severity"
: menetapkan keparahan baru untuk aturan yang cocok, "downgrade"
mereka menjadi tingkat keparahan yang lebih rendah, "upgrade"
mereka ke tingkat keparahan yang lebih tinggi, atau "default"
mereka dengan keparahan asli mereka"fixable"
: pilih hanya aturan autofixable: { "rule": "no-*", "fixable": true, "severity": "info" }
Dalam contoh ini, semua aturan ditimpa untuk peringatan:
"eslint.rules.customizations" : [
{ "rule" : " * " , "severity" : " warn " }
]
Dalam contoh ini, no-
aturan informatif, aturan lain diturunkan, dan "radix"
diatur ulang ke default:
"eslint.rules.customizations" : [
{ "rule" : " no-* " , "severity" : " info " },
{ "rule" : " !no-* " , "severity" : " downgrade " },
{ "rule" : " radix " , "severity" : " default " }
]
Dalam contoh ini, semua aturan yang dapat di -autofixable ditimpa untuk info:
"eslint.rules.customizations" : [
{ "rule" : " * " , "fixable" : true , "severity" : " info " }
]
eslint.format.enable
(@since 2.0.0) - Menggunakan Eslint sebagai formatter untuk file yang divalidasi oleh ESLINT. Jika diaktifkan, pastikan untuk menonaktifkan formate lain jika Anda ingin menjadikan ini default. Cara yang baik untuk melakukannya adalah dengan menambahkan pengaturan berikut "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }
untuk javascript. Untuk naskah Anda perlu menambahkan "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }
.
eslint.onIgnoredFiles
(@Since 2.0.10): Digunakan untuk mengontrol apakah peringatan harus dihasilkan ketika mencoba untuk memasukkan file yang diabaikan. Default off
. Dapat diatur untuk warn
.
editor.codeActionsOnSave
(@since 2.0.0): Pengaturan ini sekarang mendukung entri source.fixAll.eslint
. Jika disetel ke semua kesalahan ESLint yang dapat diperbaiki secara otomatis dari semua plugin akan diperbaiki pada Simpan. Anda juga dapat secara selektif mengaktifkan dan menonaktifkan bahasa tertentu menggunakan pengaturan berbulu bahasa VS Code. Untuk menonaktifkan codeActionsOnSave
untuk file html menggunakan pengaturan berikut:
"[html]" : {
"editor.codeActionsOnSave" : {
"source.fixAll.eslint" : false
}
}
Pengaturan eslint.autoFixOnSave
lama sekarang sudah usang dan dapat dihapus dengan aman. Harap perhatikan juga bahwa jika Anda menggunakan Eslint sebagai formatter default Anda, Anda harus mematikan editor.formatOnSave
ketika Anda telah mengaktifkan editor.codeActionsOnSave
. Kalau tidak, file Anda diperbaiki dua kali yang tidak perlu.
eslint.problems.shortenToSingleLine
: (@since 2.3.0) - Memperpendek rentang teks dari masalah yang digarisbawahi ke baris terkait pertama mereka.
eslint.experimental.useFlatConfig
: (@since 2.3.0) - Mengaktifkan dukungan konfigurasi datar eksperimental (alias eslint.config.js, didukung oleh Eslint versi 8.21 atau lebih baru)
eslint.timeBudget.onValidation
(@since 2.3.5) - Mengontrol anggaran waktu yang dapat digunakan untuk validasi sebelum peringatan atau kesalahan ditampilkan.
eslint.timeBudget.onFixes
(@since 2.3.5) - Mengontrol anggaran waktu yang dapat digunakan untuk menghitung perbaikan sebelum peringatan atau kesalahan ditampilkan.
Jika opsi eslint.autoFixOnSave
lama diatur ke ESLINT True akan meminta untuk mengonversinya ke editor baru. editor.codeActionsOnSave
Format. Jika Anda ingin menghindari migrasi, Anda dapat merespons dalam dialog dengan cara berikut:
eslint.migration.2_x
ke off
Migrasi selalu dapat dipicu secara manual menggunakan perintah ESLint: Migrate Settings
Ekstensi ini menyumbangkan perintah berikut ke Palet Perintah.
Create '.eslintrc.json' file
: Membuat file .eslintrc.json
baru.Fix all auto-fixable problems
: Menerapkan resolusi perbaikan otomatis ESLINT untuk semua masalah yang dapat diperbaiki. Ekstensi tersebut berjarak satu file individual hanya pada pengetikan. Jika Anda ingin meletakkan seluruh ruang kerja mengatur eslint.lintTask.enable
to true
dan ekstensi juga akan berkontribusi pada tugas eslint: lint whole folder
. Tidak perlu lagi untuk mendefinisikan tugas khusus di tasks.json
.
Pendahuluan yang bagus tentang cara berbaris naskah menggunakan Eslint dapat ditemukan di The TypeScript - Eslint. Harap buat diri Anda terbiasa dengan pengantar sebelum menggunakan ekstensi VS ESLINT dalam pengaturan TypePript. Terutama pastikan bahwa Anda dapat memvalidasi file naskah berhasil di terminal menggunakan perintah eslint
.
Proyek ini sendiri menggunakan Eslint untuk memvalidasi file naskahnya. Jadi dapat digunakan sebagai cetak biru untuk memulai.
Untuk menghindari validasi dari instalasi TSLINT yang menonaktifkan TSLINT menggunakan "tslint.enable": false
.
Seperti halnya JavaScript memvalidasi naskah dalam repositori mono mengharuskan Anda memberi tahu Ekstensi Eslint kode VS apa direktori kerja saat ini. Gunakan pengaturan eslint.workingDirectories
untuk melakukannya. Untuk repositori ini, pengaturan direktori kerja terlihat sebagai berikut:
"eslint.workingDirectories" : [ " ./client " , " ./server " ]
Migrasi dari Eslint 5.x ke Eslint 6.x mungkin memerlukan beberapa adaptasi (lihat Panduan Migrasi Eslint untuk detail). Sebelum mengajukan masalah terhadap Ekstensi Eslint VS Code Harap pastikan bahwa Anda dapat berhasil memvalidasi file Anda di terminal menggunakan perintah Eslint.