prettier eslint
v16.3.0
Format JavaScript Anda Menggunakan prettier Diikuti oleh eslint --fix
Fitur fix eslint cukup bagus dan dapat format otomatis/memperbaiki banyak kode Anda sesuai dengan konfigurasi eslint Anda. prettier adalah formatter otomatis yang lebih kuat. Salah satu hal menyenangkan tentang lebih cantik adalah seberapa opini itu. Sayangnya, ini tidak cukup berpendapat dan/atau beberapa pendapat berbeda dari pendapat saya. Jadi setelah yang lebih cantik memformat kode, saya mulai mendapatkan kesalahan berbaris.
Ini memformat kode Anda melalui prettier , dan kemudian berikan hasilnya ke eslint --fix . Dengan cara ini Anda bisa mendapatkan manfaat dari kemampuan pemformatan superior prettier , tetapi juga mendapat manfaat dari kemampuan konfigurasi eslint .
Untuk file dengan ekstensi
.css,.less,.scss, atau.jsonIni hanya berjalanprettierkarenaeslinttidak dapat memprosesnya.
Modul ini didistribusikan melalui NPM yang dibundel dengan node dan harus diinstal sebagai salah satu devDependencies proyek Anda:
npm install --save-dev prettier-eslint
const format = require ( 'prettier-eslint' ) ;
// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar' ;
const options = {
text : sourceCode ,
eslintConfig : {
parserOptions : {
ecmaVersion : 7
} ,
rules : {
semi : [ 'error' , 'never' ]
}
} ,
prettierOptions : {
bracketSpacing : true
} ,
fallbackPrettierOptions : {
singleQuote : false
}
} ;
const formatted = await format ( options ) ;
// notice no semicolon in the formatted text
formatted ; // const { foo } = barKode sumber untuk format.
Jalur file yang diformat dapat digunakan untuk mengganti eslintConfig (ESLINT akan digunakan untuk menemukan konfigurasi yang relevan untuk file).
Konfigurasi yang akan digunakan untuk memformat dengan Eslint. Dapat ditimpa dengan filePath .
Opsi untuk lulus untuk memformat dengan prettier . Jika tidak disediakan, prettier-eslint akan berusaha membuat opsi berdasarkan eslintConfig (apakah itu disediakan atau diturunkan melalui filePath ). Anda juga dapat memberikan beberapa opsi dan memiliki opsi yang tersisa diturunkan melalui konfigurasi eslint Anda. Ini berguna untuk opsi seperti parser .
Catatan: Opsi ini mengganti konfigurasi eslint. Jika Anda ingin opsi fallback hanya digunakan dalam kasus bahwa aturan tidak dapat disimpulkan dari Eslint, lihat "FallbackPrettierOptions" di bawah ini.
Opsi untuk lulus untuk memformat dengan prettier jika prettier-eslint tidak dapat membuat opsi berdasarkan eslintConfig (apakah itu disediakan atau diturunkan melalui filePath ). Opsi -opsi ini hanya akan digunakan dalam kasus bahwa aturan Eslint yang sesuai tidak dapat ditemukan dan opsi yang lebih cantik belum secara manual didefinisikan dalam prettierOptions . Jika fallback tidak diberikan, prettier-eslint hanya akan menggunakan nilai default prettier dalam skenario ini.
prettier-eslint melakukan sedikit logging jika Anda menginginkannya. Lewati ini untuk mengatur jumlah log yang ingin Anda lihat. Default adalah process.env.LOG_LEVEL || 'warn' .
Secara default, prettier-eslint akan mencoba menemukan modul eslint (dan prettier ) yang relevan berdasarkan filePath . Jika tidak dapat menemukannya, maka itu akan menggunakan versi yang telah diinstal secara prettier-eslint . Jika Anda ingin menentukan jalur ke modul eslint , Anda ingin menggunakan prettier-eslint , maka Anda dapat memberikan jalur lengkap untuknya dengan opsi eslintPath .
Ini pada dasarnya sama dengan eslintPath kecuali untuk modul prettier .
Secara default, prettier-eslint akan berjalan prettier terlebih dahulu, lalu eslint --fix . Ini bagus jika Anda ingin menggunakan prettier , tetapi mengesampingkan beberapa gaya yang tidak Anda sukai menggunakan eslint --fix .
Pendekatan alternatif adalah menggunakan alat yang berbeda untuk kekhawatiran yang berbeda. Jika Anda memberikan prettierLast: true , itu akan menjalankan eslint --fix First, maka prettier . Ini memungkinkan Anda menggunakan eslint untuk mencari bug dan/atau praktik buruk, dan menggunakan prettier untuk menegakkan gaya kode.
prettier-eslint hanya akan menyebarkan kesalahan parsing ketika prettier atau eslint gagal. Selain menyebarkan kesalahan, itu juga akan mencatat pesan tertentu yang menunjukkan apa yang dilakukannya pada saat kegagalan.
Catatan: format tidak akan menunjukkan pesan apa pun tentang aturan yang rusak baik dalam prettier atau eslint .
const { analyze } = require ( "prettier-eslint" ) ;
const text = 'var x = 0;' ;
const result = await analyze ( {
text ,
eslintConfig : {
rules : { 'no-var' : 'error' }
}
} )
console . log ( result . messages ) ;menghasilkan di konsol
[{
ruleId: 'no-var',
severity: 2,
message: 'Unexpected var, use let or const instead.',
line: 1,
column: 1,
nodeType: 'VariableDeclaration',
messageId: 'unexpectedVar',
endLine: 1,
endColumn: 11
}]
analyze ekspor tambahan identik dengan format kecuali bahwa ia mengembalikan objek sederhana dengan output properti yang memberikan string yang tepat yang akan dikembalikan format , dan messages yang memberikan array deskripsi pesan (dengan struktur yang ditunjukkan di atas) yang dihasilkan oleh analisis eslint kode. Anda dapat menggunakan analyze sebagai pengganti format jika Anda ingin melakukan pemformatan tetapi juga menangkap kesalahan yang mungkin diperhatikan eslint .
Kode ➡️ lebih cantik ➡️ Eslint -Fix ➡️ Kode yang Diformat
eslintConfig dan prettierOptions masing -masing dapat disediakan sebagai argumen. Jika eslintConfig tidak disediakan, maka prettier-eslint akan mencarinya berdasarkan fileName (jika tidak ada fileName yang disediakan maka ia menggunakan process.cwd() ). Setelah prettier-eslint menemukan eslintConfig , prettierOptions disimpulkan dari eslintConfig . Jika beberapa prettierOptions telah disediakan, maka prettier-eslint hanya akan menyimpulkan opsi yang tersisa. Kesimpulan ini terjadi di src/utils.js .
Suatu hal penting untuk dicatat tentang inferensi ini adalah bahwa ia mungkin tidak mendukung konfigurasi eslint spesifik Anda. Jadi, Anda ingin memeriksa src/utils.js untuk melihat bagaimana inferensi dilakukan untuk setiap opsi (aturan apa yang dirujuk, dll.) Dan membuat permintaan tarik jika konfigurasi Anda didukung.
Default Jika Anda memiliki semua aturan ESLINT yang relevan dinonaktifkan (atau membuat ESLINT dinonaktifkan sepenuhnya melalui /* eslint-disable */ maka opsi yang lebih cantik akan kembali ke default prettier :
{
printWidth : 80 ,
tabWidth : 2 ,
singleQuote : false ,
trailingComma : 'none' ,
bracketSpacing : true ,
semi : true ,
useTabs : false ,
// prettier-eslint doesn't currently support
// inferring these two (Pull Requests welcome):
parser : 'babylon' ,
bracketSameLine : false ,
} Ada banyak penebangan yang tersedia dengan prettier-eslint . Saat men -debug, Anda dapat menggunakan salah satu dari logLevel untuk mendapatkan ide yang lebih baik tentang apa yang terjadi. Jika Anda menggunakan prettier-eslint-cli maka Anda dapat menggunakan --log-level trace , jika Anda menggunakan plugin atom, maka Anda dapat membuka alat pengembang dan memasukkan: process.env.LOG_LEVEL = 'trace' di konsol, lalu jalankan format. Anda akan melihat banyak log yang akan membantu Anda menentukan apakah masalahnya prettier , eslint --fix , bagaimana prettier-eslint menyimpulkan opsi prettier , atau sejumlah hal lainnya. Anda akan diminta untuk melakukan ini sebelum mengajukan masalah, jadi silakan lakukan?
Catatan: Saat Anda melakukan ini, disarankan agar Anda hanya menjalankan ini pada satu file karena ada banyak log :)
Saat menggunakan // eslint-disable-line , kadang-kadang Anda mungkin mendapatkan kesalahan berbaris setelah kode telah diproses oleh modul ini. Itu karena prettier mengubah ini:
// prettier-ignore
if ( x ) { // eslint-disable-line
}untuk ini:
if ( x ) {
// eslint-disable-line
} Dan eslint --fix tidak akan mengubahnya kembali. Anda dapat melihat bahwa // eslint-disable-line telah pindah ke baris baru. Untuk mengatasi masalah ini, Anda dapat menggunakan //eslint-disable-next-line alih-alih // eslint-disable-line seperti ini:
// eslint-disable-next-line
if ( x ) {
} prettiereslintTidak ada yang saya sadari. Jangan ragu untuk mengajukan PR jika Anda mengetahui solusi lain.
prettier-eslint-cli -Antarmuka baris perintahprettier-atom - Plugin Atom (Periksa kotak centang "Eslint Integration" di Pengaturan)vs-code-prettier-eslint -Plugin Kode Visual Studioeslint-plugin-prettier -plugin Eslint. Sementara Prettier-Eslint menggunakan eslint --fix untuk mengubah output dari prettier , Eslint-plugin-prettier menjaga output prettier juga dan mengintegrasikannya dengan alur kerja Eslint biasa.prettier-eslint-webpack-plugin Webpack Eslint yang lebih cantik Terima kasih kepada orang -orang ini (Kunci Emoji):
Kent C. Dodds ? | Gyandeep Singh ? | Igor Pnev ? | Benjamin Tan ? | Eric McCormick | Simon Lydell | Tom McKearney |
Patrik Åkerstrand | Lochlan Bunn | Daniël Terwiel ? ? | Robin Malfait ? | Michael McDermott | Adam Stankiewicz | Stephen John Sorensen |
Brian Di Palma ? | Rob Wise | Peas Patryk ? | Thijs Koerselman ? | Enrique Caballero ? | Łukasz Moroz ? | Simon Fridlund ? ? ? ? ? ? |
Oliver Joseph Ash ? | Mark Palfreeman | Alex Taylor | Xianming Zhong | Lewis Liu | Hamza Hamidi ? ? ? ? | Rajiv Ranjan Singh |
Igor ? | REBECCA VEST | Chris Bobbe ? | Jounqin ? ? ? ? ? ? ? | Jonathan Rehm | Glen Whitney |
Proyek ini mengikuti spesifikasi semua-kontributor. Kontribusi apa pun yang baik!
Mit
