eslint plugin import
v2.31.0
Plugin ini bermaksud untuk mendukung sintaks impor/ekspor ES2015+ (ES6+), dan mencegah masalah dengan salah mengeja jalur file dan nama impor. Semua kebaikan bahwa Sintaks Modul Statis ES2015+ bermaksud untuk disediakan, ditandai di editor Anda.
Jika Anda menggunakan ini dengan Sublime : lihat bagian bawah untuk info penting.
Konfigurasi diaktifkan di.
Konfigurasi dinonaktifkan di.
❗ Setel dalam konfigurasi errors .
☑️ Setel dalam konfigurasi recommended .
⌨️ Setel dalam konfigurasi typescript .
? Diatur dalam konfigurasi warnings .
? Secara otomatis dapat diperbaiki oleh opsi --fix CLI.
Dapat diperbaiki secara manual dengan saran editor.
Tercerahkan.
| Nama | Keterangan | ? | |||||
|---|---|---|---|---|---|---|---|
| ekspor | Melarang ekspor yang tidak valid, yaitu mengekspor kembali dengan nama yang sama. | ❗ ☑️ | |||||
| tidak ditentukan | Melarang nama yang diimpor ditandai dengan tag dokumentasi @deprecated . | ||||||
| no-mempry-named-blocks | Melarang blok impor bernama kosong. | ? | |||||
| Ketergantungan tanpa ekstran | Melarang penggunaan paket asing. | ||||||
| Ekspor tidak dapat di-mutable | Melarang penggunaan ekspor yang dapat berubah dengan var atau let . | ||||||
| no-named-as-default | Melarang penggunaan nama yang diekspor sebagai pengidentifikasi ekspor default. | ☑️? | |||||
| No-named-as-default-anggota | Melarang penggunaan nama yang diekspor sebagai properti ekspor default. | ☑️? | |||||
| No-No-No-Modules | Melarang modul tanpa ekspor, atau ekspor tanpa mencocokkan impor di modul lain. |
| Nama | Keterangan | ? | |||||
|---|---|---|---|---|---|---|---|
| NO-AMD | Melarang AMD require dan define panggilan. | ||||||
| no-commonjs | Forbid CommonJs require panggilan dan module.exports Ekspor atau exports.* . | ||||||
| Ekspor No-Impor-Module | Melarang pernyataan impor dengan modul CommonJS.Exports. | ? | |||||
| No-nodeJs-modules | Forbid Node.js Modul Builtin. | ||||||
| jelas | Melarang tujuan parse yang berpotensi ambigu ( script vs module ). |
| Nama | Keterangan | ? | |||||
|---|---|---|---|---|---|---|---|
| bawaan | Pastikan ekspor default hadir, diberikan impor default. | ❗ ☑️ | |||||
| Penggunaan Protokol-Node-Node | Menegakkan baik menggunakan, atau menghilangkan, node: protokol saat mengimpor modul node.js builtin. | ? | |||||
| bernama | Pastikan impor bernama sesuai dengan ekspor bernama dalam file jarak jauh. | ❗ ☑️ | ⌨️ | ||||
| namespace | Pastikan ruang nama yang diimpor berisi properti yang diseeferenced karena mereka diereferensi. | ❗ ☑️ | |||||
| No-Absolute-Path | Melarang impor modul menggunakan jalur absolut. | ? | |||||
| tidak siklus | Melarang modul dari mengimpor modul dengan jalur ketergantungan kembali ke dirinya sendiri. | ||||||
| No-Dynamic-Require | Melarang require() panggilan dengan ekspresi. | ||||||
| No-Internal-Modul | Melarang mengimpor submodul dari modul lain. | ||||||
| Paket tidak relatif | Melarang mengimpor paket melalui jalur relatif. | ? | |||||
| no-relative-parent-imports | Melarang mengimpor modul dari direktori induk. | ||||||
| no-restricted-paths | Menegakkan file mana yang dapat diimpor dalam folder yang diberikan. | ||||||
| no-self-import | Melarang modul mengimpor dirinya sendiri. | ||||||
| No-Unresolved | Pastikan impor menunjuk ke file/modul yang dapat diselesaikan. | ❗ ☑️ | |||||
| No-Eseless-Path-Seegments | Melarang segmen jalur yang tidak perlu dalam impor dan memerlukan pernyataan. | ? | |||||
| no-WEBPACK-LOADER-SYNTAX | Melarang sintaks loader webpack di impor. |
| Nama | Keterangan | ? | |||||
|---|---|---|---|---|---|---|---|
| gaya spesifikasi tipe yang konsisten | Menegakkan atau melarang penggunaan penanda jenis inline saja untuk impor bernama. | ? | |||||
| Dynamic-Import-ChunkName | Menegakkan komentar terkemuka dengan WebPackChunkName untuk impor dinamis. | ||||||
| Ekspor Terakhir | Pastikan semua ekspor muncul setelah pernyataan lain. | ||||||
| ekstensi | Pastikan penggunaan ekstensi file yang konsisten dalam jalur impor. | ||||||
| Pertama | Pastikan semua impor muncul sebelum pernyataan lain. | ? | |||||
| Ekspor-grup | Lebih disukai ekspor bernama untuk dikelompokkan bersama dalam satu deklarasi ekspor tunggal | ||||||
| Impor-pertama | Digantikan dengan import/first . | ? | |||||
| ketergantungan maksimal | Menegakkan jumlah dependensi maksimum yang dimiliki modul. | ||||||
| Newline-after-Import | Menegakkan garis baru setelah pernyataan impor. | ? | |||||
| no-anonymous-default-export | Melarang nilai anonim sebagai ekspor default. | ||||||
| no-default-Export | Melarang ekspor default. | ||||||
| tidak ada duplikat | Melarang impor berulang dari modul yang sama di beberapa tempat. | ☑️? | ? | ||||
| no-named-default | Forbid bernama ekspor default. | ||||||
| No-Named-Export | Forbid bernama Ekspor. | ||||||
| no-namespace | Melarang impor namespace (alias "wildcard" * ). | ? | |||||
| no-no-non-diterjemahkan-import | Melarang impor yang belum ditugaskan | ||||||
| memesan | Menegakkan konvensi dalam pesanan impor modul. | ? | |||||
| Ekspor Preferensi-Default | Lebih suka ekspor default jika modul mengekspor satu nama atau beberapa nama. |
eslint-plugin-import untuk perusahaanTersedia sebagai bagian dari langganan tidelift.
Pemelihara eslint-plugin-import dan ribuan paket lainnya bekerja dengan Tidelift untuk memberikan dukungan dan pemeliharaan komersial untuk dependensi open source yang Anda gunakan untuk membangun aplikasi Anda. Hemat waktu, kurangi risiko, dan tingkatkan kesehatan kode, sambil membayar pemelihara dari ketergantungan yang tepat yang Anda gunakan. Pelajari lebih lanjut.
# inside your project's working tree
npm install eslint-plugin-import --save-dev.eslintrc ) Semua aturan dimatikan secara default. Namun, Anda dapat memperpanjang salah satu konfigurasi preset, atau mengkonfigurasinya secara manual di .eslintrc.(yml|json|js) .
{
"extends" : [
"eslint:recommended" ,
"plugin:import/recommended" ,
] ,
} {
"rules" : {
"import/no-unresolved" : [ "error" , { "commonjs" : true , "amd" : true } ] ,
"import/named" : "error" ,
"import/namespace" : "error" ,
"import/default" : "error" ,
"import/export" : "error" ,
// etc...
} ,
} ,eslint.config.js ) Semua aturan dimatikan secara default. Namun, Anda dapat mengonfigurasinya secara manual di eslint.config.(js|cjs|mjs) , atau memperluas salah satu konfigurasi preset:
import importPlugin from 'eslint-plugin-import' ;
import js from '@eslint/js' ;
export default [
js . configs . recommended ,
importPlugin . flatConfigs . recommended ,
{
files : [ '**/*.{js,mjs,cjs}' ] ,
languageOptions : {
ecmaVersion : 'latest' ,
sourceType : 'module' ,
} ,
rules : {
'no-unused-vars' : 'off' ,
'import/no-dynamic-require' : 'warn' ,
'import/no-nodejs-modules' : 'warn' ,
} ,
} ,
] ; Anda dapat menggunakan cuplikan berikut atau merakit konfigurasi Anda sendiri menggunakan pengaturan granular yang dijelaskan di bawahnya.
Pastikan Anda telah menginstal @typescript-eslint/parser dan eslint-import-resolver-typescript yang digunakan dalam konfigurasi berikut.
{
"extends" : [
"eslint:recommended" ,
"plugin:import/recommended" ,
// the following lines do the trick
"plugin:import/typescript" ,
] ,
"settings" : {
"import/resolver" : {
// You will also need to install and configure the TypeScript resolver
// See also https://github.com/import-js/eslint-import-resolver-typescript#configuration
"typescript" : true ,
"node" : true ,
} ,
} ,
}config() di typescript-eslint Jika Anda menggunakan metode config dari typescript-eslint , pastikan bahwa flatConfig termasuk dalam array extends .
import tseslint from 'typescript-eslint' ;
import importPlugin from 'eslint-plugin-import' ;
import js from '@eslint/js' ;
export default tseslint . config (
js . configs . recommended ,
// other configs...
{
files : [ '**/*.{ts,tsx}' ] ,
extends : [ importPlugin . flatConfigs . recommended ] ,
// other configs...
}
) ; Dengan munculnya bundler modul dan keadaan modul saat ini dan spesifikasi sintaks modul, tidak selalu jelas di mana import x from 'module' harus mencari untuk menemukan file di belakang module .
Hingga v0.10ish, plugin ini telah secara langsung menggunakan plugin resolve Substack, yang mengimplementasikan perilaku impor Node. Ini bekerja cukup baik dalam banyak kasus.
Namun, Webpack memungkinkan sejumlah hal dalam string sumber modul impor yang tidak, seperti loader ( import 'file!./whatever' ) dan sejumlah skema aliasing, seperti externals : Memetakan ID modul ke nama global saat runtime (memungkinkan beberapa modul dimasukkan secara lebih tradisional melalui label skrip).
Demi mendukung keduanya, v0.11 memperkenalkan penyelesaian.
Saat ini resolusi Node dan Webpack telah diimplementasikan, tetapi Penyelidik hanyalah paket NPM, sehingga paket pihak ketiga didukung (dan dianjurkan!).
Anda dapat merujuk pada penyelesaian dalam beberapa cara (dalam urutan prioritas):
eslint-import-resolver konvensional, seperti eslint-import-resolver-foo : // .eslintrc
{
"settings" : {
// uses 'eslint-import-resolver-foo':
"import/resolver" : "foo" ,
} ,
} # .eslintrc.yml
settings :
# uses 'eslint-import-resolver-foo':
import/resolver : foo // .eslintrc.js
module . exports = {
settings : {
'import/resolver' : {
foo : { someConfig : value }
}
}
}my-awesome-npm-module : // .eslintrc
{
"settings" : {
"import/resolver" : "my-awesome-npm-module" ,
} ,
} # .eslintrc.yml
settings :
import/resolver : ' my-awesome-npm-module ' // .eslintrc.js
module . exports = {
settings : {
'import/resolver' : {
'my-awesome-npm-module' : { someConfig : value }
}
}
}computed property : // .eslintrc.js
module . exports = {
settings : {
'import/resolver' : {
[ path . resolve ( '../../../my-resolver' ) ] : { someConfig : value }
}
}
} Jalur relatif akan diselesaikan relatif terhadap package.json terdekat sumber.json atau direktori kerja proses saat ini jika tidak ada package.json ditemukan.
Jika Anda menarik dalam menulis resolver, lihat spesifikasi untuk detail lebih lanjut.
Anda dapat mengatur pengaturan berikut di .eslintrc Anda:
import/extensions Daftar ekstensi file yang akan diuraikan sebagai modul dan diperiksa untuk export .
Default ini untuk ['.js'] , kecuali jika Anda menggunakan konfigurasi bersama react , dalam hal ini ditentukan sebagai ['.js', '.jsx'] . Meskipun default, jika Anda menggunakan TypeScript (tanpa plugin:import/typescript yang dijelaskan di atas) Anda harus menentukan ekstensi baru ( .ts , dan juga .tsx jika menggunakan reaksi).
"settings" : {
"import/extensions" : [
".js" ,
".jsx"
]
}Jika Anda memerlukan lebih banyak definisi ekstensi granular, Anda dapat menggunakan:
"settings" : {
"import/resolver" : {
"node" : {
"extensions" : [
".js" ,
".jsx"
]
}
}
} Perhatikan bahwa ini berbeda dari (dan kemungkinan subset dari) pengaturan ekstensi import/resolver , yang mungkin termasuk .json , .coffee , dll. Yang masih akan menjadi faktor dalam aturan no-unresolved .
Juga, pola import/ignore berikut akan mengesampingkan daftar ini.
import/ignore Daftar string regex yang, jika dicocokkan dengan jalur, tidak akan melaporkan modul yang cocok jika tidak ada export yang ditemukan. Dalam praktiknya, ini berarti aturan selain no-unresolved tidak akan melaporkan jalur import dengan (sistem file absolut) yang cocok dengan pola ini.
no-unresolved memiliki pengaturan ignore sendiri.
{
"settings" : {
"import/ignore" : [
".coffee$" , // fraught with parse errors
".(scss|less|css)$" , // can't parse unprocessed CSS modules, either
] ,
} ,
}import/core-modules Serangkaian modul tambahan untuk dianggap sebagai modul "inti"-modul yang harus dianggap diselesaikan tetapi tidak memiliki jalur pada sistem file. Resolver Anda mungkin sudah mendefinisikan beberapa di antaranya (misalnya, resolver simpul tahu tentang fs dan path ), jadi Anda tidak perlu mendefinisikannya kembali.
Misalnya, elektron memperlihatkan modul electron :
import 'electron' // without extra config, will be flagged as unresolved! Itu tidak akan diselesaikan. Untuk menghindari hal ini, Anda dapat memberikan electron sebagai modul inti:
// .eslintrc
{
"settings" : {
"import/core-modules" : [ "electron" ] ,
} ,
} Dalam kasus spesifik elektron, ada konfigurasi bersama bernama electron yang menentukan ini untuk Anda.
Kontribusi lebih banyak konfigurasi bersama untuk platform lain dipersilakan!
import/external-module-folders Serangkaian folder. Modul yang diselesaikan hanya dari folder tersebut akan dianggap sebagai "eksternal". Secara default - ["node_modules"] . Masuk akal jika Anda telah mengkonfigurasi jalur atau web Anda untuk menangani jalur internal Anda secara berbeda dan ingin mempertimbangkan modul dari beberapa folder, misalnya bower_components atau jspm_modules , sebagai "eksternal".
Opsi ini juga berguna dalam pengaturan monorepo: Daftar di sini semua direktori yang berisi paket Monorepo dan mereka akan diperlakukan sebagai yang eksternal tidak peduli resolver mana yang digunakan.
Jika Anda menggunakan yarn PNP sebagai manajer paket Anda, tambahkan folder .yarn dan semua dependensi yang Anda instal akan dianggap sebagai external , bukan internal .
Setiap item dalam array ini adalah nama folder, subpath -nya, atau jalur awalan absolutnya:
jspm_modules akan cocok dengan file atau folder apa pun bernama jspm_modules atau yang memiliki induk langsung atau non-sutradara bernama jspm_modules , misalnya /home/me/project/jspm_modules atau /home/me/project/jspm_modules/some-pkg/index.js .
packages/core akan cocok dengan jalur apa pun yang berisi dua segmen ini, misalnya /home/me/project/packages/core/src/utils.js .
/home/me/project/packages hanya akan cocok dengan file dan direktori di dalam direktori ini, dan direktori itu sendiri.
Harap dicatat bahwa nama yang tidak lengkap tidak diizinkan di sini sehingga components tidak akan cocok dengan bower_components dan packages/ui tidak akan cocok dengan packages/ui-utils (tetapi akan cocok dengan packages/ui/utils ).
import/parsersPeta dari parsers ke array ekstensi file. Jika ekstensi file dicocokkan, parser ketergantungan akan membutuhkan dan menggunakan kunci peta sebagai parser alih -alih parser Eslint yang dikonfigurasi. Ini berguna jika Anda antar op-ing dengan TypeScript langsung menggunakan webpack, misalnya:
// .eslintrc
{
"settings" : {
"import/parsers" : {
"@typescript-eslint/parser" : [ ".ts" , ".tsx" ] ,
} ,
} ,
} Dalam hal ini, @typescript-eslint/parser harus diinstal dan perlu dapat dari lokasi modul eslint yang sedang berjalan (yaitu, instal sebagai peer eslint).
Ini saat ini hanya diuji dengan @typescript-eslint/parser (dan pendahulunya, typescript-eslint-parser ) tetapi secara teoritis harus bekerja dengan parser yang cukup patuh Estree.
Sulit untuk mengatakan seberapa baik berbagai fitur plugin akan didukung juga, tergantung pada seberapa jauh lubang kelinci. Kirimkan masalah jika Anda menemukan perilaku aneh di luar sini, tetapi baja jantung Anda terhadap kemungkinan hasil penutupan dengan wontfix .
import/resolverLihat Resolvers.
import/cache Pengaturan untuk perilaku cache. Memoisasi digunakan di berbagai tingkatan untuk menghindari jumlah yang berlebihan dari panggilan parse fs.statSync /modul yang diperlukan untuk melaporkan kesalahan dengan benar.
Untuk konsol eslint normal berjalan, masa pakai cache tidak relevan, karena kita dapat dengan kuat mengasumsikan bahwa file tidak boleh berubah selama masa pakai proses linter (dan dengan demikian, cache dalam memori)
Untuk proses yang tahan lama, seperti eslint_d atau eslint-loader , bagaimanapun, penting bahwa ada beberapa gagasan tentang staleness.
Jika Anda tidak pernah menggunakan eslint_d atau eslint-loader , Anda dapat mengatur seumur hidup cache menjadi Infinity dan semuanya akan baik-baik saja:
// .eslintrc
{
"settings" : {
"import/cache" : {
"lifetime" : "∞" , // or Infinity, in a JS config
} ,
} ,
}Kalau tidak, atur beberapa entri integer, dan cache akan diusir setelah beberapa detik telah berlalu:
// .eslintrc
{
"settings" : {
"import/cache" : {
"lifetime" : 5 , // 30 is the default
} ,
} ,
}import/internal-regexRegex untuk paket harus diperlakukan sebagai internal. Berguna saat Anda menggunakan pengaturan monorepo atau mengembangkan satu set paket yang saling bergantung.
Secara default, paket apa pun yang dirujuk dari import/external-module-folders akan dianggap sebagai "eksternal", termasuk paket dalam lingkungan kerja monorepo seperti benang atau lingkungan lerna. Jika Anda ingin menandai paket -paket ini sebagai "internal", ini akan berguna.
Misalnya, jika paket Anda di monorepo semuanya ada di @scope , Anda dapat mengonfigurasi import/internal-regex seperti ini
// .eslintrc
{
"settings" : {
"import/internal-regex" : "^@scope/" ,
} ,
}import/node-versionString yang mewakili versi node.js yang Anda gunakan. Nilai falsy akan menyiratkan versi node.js yang Anda jalankan dengan Eslint.
// .eslintrc
{
"settings" : {
"import/node-version" : "22.3.4" ,
} ,
} Sublimelinter-Eeslint memperkenalkan perubahan untuk mendukung file .eslintignore yang mengubah cara jalur file diteruskan ke Eslint saat berbaris selama pengeditan. Perubahan ini mengirimkan jalur relatif alih -alih jalur absolut ke file (seperti yang biasanya disediakan oleh Eslint), yang dapat membuat plugin ini tidak mungkin menyelesaikan ketergantungan pada sistem file.
Penanganan solusi ini seharusnya tidak lagi diperlukan dengan rilis Eslint 2.0, ketika .eslintignore akan diperbarui untuk bekerja lebih seperti .gitignore , yang seharusnya mendukung pengabaian jalur absolut yang tepat melalui --stdin-filename .
Sementara itu, lihat Roadhump/Sublimelinter-Eeslint#58 untuk detail dan diskusi lebih lanjut, tetapi pada dasarnya, Anda mungkin menemukan Anda perlu menambahkan konfigurasi SublimeLinter berikut ke file proyek Sublime Anda:
{
"folders" :
[
{
"path" : " code "
}
],
"SublimeLinter" :
{
"linters" :
{
"eslint" :
{
"chdir" : " ${project}/code "
}
}
}
} Perhatikan bahwa ${project}/code cocok dengan code yang disediakan di folders[0].path .
Tujuan dari pengaturan chdir , dalam hal ini, adalah untuk mengatur direktori kerja dari mana Eslint dieksekusi sama dengan direktori tempat Sublimelinter-Eslint mendasarkan jalur relatif yang disediakannya.
Lihat dokumen Sublimelinter di chdir untuk informasi lebih lanjut, jika ini tidak berfungsi dengan proyek Anda.
Jika Anda tidak menggunakan .eslintignore , atau tidak memiliki file proyek luhur, Anda juga dapat melakukan hal berikut melalui file .sublimelinterrc di beberapa direktori leluhur kode Anda:
{
"linters" : {
"eslint" : {
"args" : [ " --stdin-filename " , " @ " ]
}
}
} Saya juga menemukan bahwa saya perlu mengatur rc_search_limit ke null , yang menghapus batas pencarian hierarki file saat mencari pohon direktori untuk .sublimelinterrc :
Dalam Pengaturan Paket / Pengaturan Sublimelinter / Pengguna:
{
"user" : {
"rc_search_limit" : null
}
} Saya percaya ini default ke 3 , jadi Anda mungkin tidak perlu mengubahnya tergantung pada kedalaman folder proyek Anda.
