prettier eslint
v16.3.0
จัดรูปแบบ JavaScript ของคุณโดยใช้ prettier ตามด้วย eslint --fix
คุณสมบัติ fix ของ eslint นั้นค่อนข้างดีและสามารถจัดรูปแบบอัตโนมัติ/แก้ไขรหัสของคุณได้มากตามการกำหนดค่า ESLINT ของคุณ prettier เป็นตัวฟอร์แมตอัตโนมัติที่ทรงพลังกว่า หนึ่งในสิ่งที่ดีเกี่ยวกับ Prettier คือความเห็นของมัน น่าเสียดายที่มันไม่ได้ให้ความเห็นเพียงพอและ/หรือความคิดเห็นบางอย่างแตกต่างจากฉันเอง ดังนั้นหลังจากรูปแบบรหัสที่สวยงามฉันเริ่มได้รับข้อผิดพลาดในการผ้าสำลี
รูปแบบรหัสของคุณผ่าน prettier จากนั้นส่งผลให้นั้นไปยัง eslint --fix วิธีนี้คุณจะได้รับประโยชน์จากความสามารถในการจัดรูปแบบที่เหนือกว่าของ prettier แต่ยังได้รับประโยชน์จากความสามารถในการกำหนดค่าของ eslint
สำหรับไฟล์ที่มีส่วนขยายของ
.css,.less,.scssหรือ.jsonสิ่งนี้ทำงานprettierเนื่องจากeslintไม่สามารถประมวลผลได้
โมดูลนี้มีการกระจายผ่าน NPM ซึ่งรวมกับโหนดและควรติดตั้งเป็นหนึ่งใน devDependencies ของโครงการของคุณ:
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 } = barซอร์สโค้ดเพื่อจัดรูปแบบ
เส้นทางของไฟล์ที่ฟอร์แมตสามารถใช้เพื่อแทนที่ eslintConfig (ESLINT จะถูกใช้เพื่อค้นหาการกำหนดค่าที่เกี่ยวข้องสำหรับไฟล์)
การกำหนดค่าที่จะใช้สำหรับการจัดรูปแบบด้วย ESLINT สามารถถูกแทนที่ด้วย filePath
ตัวเลือกที่จะผ่านการจัดรูปแบบด้วย prettier หากไม่ได้รับการจัดเตรียม prettier-eslint จะพยายามสร้างตัวเลือกตาม eslintConfig (ไม่ว่าจะเป็นหรือได้มาจาก filePath ) คุณยังสามารถให้ตัวเลือก บางอย่าง และมีตัวเลือกที่เหลืออยู่ผ่านการกำหนดค่า ESLINT ของคุณ สิ่งนี้มีประโยชน์สำหรับตัวเลือกเช่น parser
หมายเหตุ: ตัวเลือกเหล่านี้ แทนที่ การกำหนดค่า ESLINT หากคุณต้องการให้ตัวเลือกทางเลือกใช้ในกรณีที่กฎไม่สามารถอนุมานได้จาก ESLINT ให้ดูที่ "FlackPrettierOptions" ด้านล่าง
ตัวเลือกที่จะผ่านการจัดรูปแบบด้วย prettier ถ้า prettier-eslint ไม่สามารถสร้างตัวเลือกตาม eslintConfig (ไม่ว่าจะให้หรือได้รับผ่านทาง filePath ) ตัวเลือกเหล่านี้จะถูกใช้ในกรณีที่ไม่สามารถพบกฎ ESLINT ที่สอดคล้องกันได้และตัวเลือกที่สวยงามกว่านั้นไม่ได้ถูกกำหนดด้วยตนเองใน prettierOptions หากไม่ได้รับทางเลือกทางเลือก prettier-eslint จะใช้ค่า prettier เริ่มต้นในสถานการณ์นี้
prettier-eslint ทำการบันทึกค่อนข้างน้อยถ้าคุณต้องการ ผ่านสิ่งนี้เพื่อตั้งค่าจำนวนบันทึกที่คุณต้องการดู ค่าเริ่มต้นคือ process.env.LOG_LEVEL || 'warn' .
โดยค่าเริ่มต้น prettier-eslint จะพยายามค้นหาโมดูล eslint (และ prettier ) ที่เกี่ยวข้องตาม filePath หากไม่สามารถหาได้ก็จะใช้เวอร์ชันที่ prettier-eslint ติดตั้งในเครื่อง หากคุณต้องการระบุเส้นทางไปยังโมดูล eslint ที่คุณต้องการใช้ prettier-eslint คุณสามารถให้เส้นทางเต็มรูปแบบกับตัวเลือก eslintPath
นี่คือโดยทั่วไปเหมือนกับ eslintPath ยกเว้นโมดูล prettier
โดยค่าเริ่มต้น prettier-eslint จะทำงาน prettier ก่อนจากนั้น eslint --fix นี่เป็นสิ่งที่ดีถ้าคุณต้องการใช้ prettier แต่แทนที่สไตล์บางอย่างที่คุณไม่ชอบใช้ eslint --fix
อีกทางเลือกหนึ่งคือการใช้เครื่องมือที่แตกต่างกันสำหรับข้อกังวลที่แตกต่างกัน หากคุณให้ prettierLast: true มันจะเรียกใช้ eslint --fix ก่อนแล้ว prettier สิ่งนี้ช่วยให้คุณใช้ eslint เพื่อค้นหาข้อบกพร่องและ/หรือแนวทางปฏิบัติที่ไม่ดีและใช้รูปแบบรหัส prettier
prettier-eslint จะ เผยแพร่ ข้อผิดพลาด ในการแยกวิเคราะห์ เมื่อไม่ว่าจะเป็น prettier หรือ eslint ล้มเหลว นอกเหนือจากการเผยแพร่ข้อผิดพลาดแล้วมันจะบันทึกข้อความเฉพาะที่ระบุว่ามันกำลังทำอะไรในเวลาที่เกิดความล้มเหลว
หมายเหตุ: format จะไม่แสดงข้อความใด ๆ เกี่ยวกับกฎที่เสียในทั้ง prettier หรือ 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 ) ;ผลิตบนคอนโซล
[{
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 การส่งออกเพิ่มเติมนั้นเหมือนกับ format ยกเว้นว่าจะส่งคืนวัตถุอย่างง่ายพร้อม output คุณสมบัติให้สตริงที่แน่นอนที่ format จะกลับมาและ messages ที่ให้อาร์เรย์ของคำอธิบายข้อความ (พร้อมโครงสร้างที่แสดงด้านบน) ที่ผลิตโดยการวิเคราะห์ eslint ของรหัส คุณสามารถใช้ analyze แทน format หากคุณต้องการดำเนินการจัดรูปแบบ แต่ยังจับข้อผิดพลาดใด ๆ ที่ eslint อาจสังเกตเห็น
รหัส➡สวยกว่า➡ ESLINT -FIX ➡รหัสฟอร์แมต
eslintConfig และ prettierOptions สามารถให้เป็นอาร์กิวเมนต์ได้ หากไม่มีการจัดเตรียม eslintConfig แล้ว prettier-eslint จะมองหาพวกเขาตาม fileName (หากไม่มี fileName ให้ใช้ให้ใช้ process.cwd() ) เมื่อ prettier-eslint พบ eslintConfig แล้ว prettierOptions จะถูกอนุมานจาก eslintConfig หากมีการจัดเตรียม prettierOptions บางอย่างแล้ว prettier-eslint จะอนุมานเฉพาะตัวเลือกที่เหลือเท่านั้น การอนุมานนี้เกิดขึ้นใน src/utils.js
สิ่งสำคัญที่ควรทราบ เกี่ยวกับการอนุมานนี้คืออาจไม่รองรับการกำหนดค่า ESLINT ของคุณ ดังนั้นคุณจะต้องตรวจสอบ src/utils.js เพื่อดูว่าการอนุมานนั้นทำอย่างไรสำหรับแต่ละตัวเลือก (กฎใดที่อ้างอิงถึง ฯลฯ ) และทำการร้องขอการดึงหากรองรับการกำหนดค่าของคุณ
ค่าเริ่มต้น หากคุณมีกฎ ESLINT ที่เกี่ยวข้องทั้งหมดปิดการใช้งาน (หรือมีการปิดใช้งาน ESLINT ทั้งหมดผ่าน /* eslint-disable */ จากนั้นตัวเลือกที่สวยกว่าจะกลับไปเป็นค่าเริ่มต้น 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 ,
} มีการบันทึกจำนวนมากพร้อมกับ prettier-eslint เมื่อทำการดีบักคุณสามารถใช้หนึ่งใน logLevel S เพื่อให้ได้แนวคิดที่ดีขึ้นว่าเกิดอะไรขึ้น หากคุณใช้ prettier-eslint-cli คุณสามารถใช้ --log-level trace ได้หากคุณใช้ปลั๊กอินอะตอมคุณสามารถเปิดเครื่องมือนักพัฒนาซอฟต์แวร์และป้อน: process.env.LOG_LEVEL = 'trace' ในคอนโซลแล้วเรียกใช้รูปแบบ คุณจะเห็นบันทึกจำนวนมากที่จะช่วยคุณตรวจสอบว่าปัญหานั้น prettier eslint --fix แก้ไข prettier-eslint กว่าตัวเลือก prettier ของคุณหรือสิ่งอื่นใด คุณจะถูกขอให้ทำสิ่งนี้ก่อนยื่นปัญหาดังนั้นโปรดทำ?
หมายเหตุ: เมื่อคุณทำสิ่งนี้ขอแนะนำให้คุณเรียกใช้ไฟล์นี้ในไฟล์เดียวเท่านั้นเพราะมีบันทึกจำนวนมาก :)
ในขณะที่ใช้ // eslint-disable-line บางครั้งคุณอาจได้รับข้อผิดพลาดผ้าสำลีหลังจากที่รหัสได้รับการประมวลผลโดยโมดูลนี้ นั่นเป็นเพราะการเปลี่ยนแปลง prettier นี้:
// prettier-ignore
if ( x ) { // eslint-disable-line
}ถึงสิ่งนี้:
if ( x ) {
// eslint-disable-line
} และ eslint --fix จะไม่เปลี่ยนกลับ คุณสามารถสังเกตได้ว่า // eslint-disable-line ได้ย้ายไปยังบรรทัดใหม่ ในการแก้ไขปัญหานี้คุณสามารถใช้ //eslint-disable-next-line แทน // eslint-disable-line เช่นนี้:
// eslint-disable-next-line
if ( x ) {
} prettiereslintไม่มีใครรู้ อย่าลังเลที่จะยื่นเรื่องประชาสัมพันธ์หากคุณรู้วิธีแก้ปัญหาอื่น ๆ
prettier-eslint-cli อินเตอร์เฟสบรรทัดคำสั่งprettier-atom - ปลั๊กอินอะตอม (ตรวจสอบช่องทำเครื่องหมาย "ESLINT Integration" ในการตั้งค่า)vs-code-prettier-eslint Visual Studio Codeeslint-plugin-prettier ปลั๊กอิน ESLINT ในขณะที่ Prettier-Eslint ใช้ eslint --fix เพื่อเปลี่ยนเอาต์พุตของ prettier , Eslint-Plugin-Prettier ช่วยให้เอาต์พุต prettier ตามที่ IS และรวมเข้ากับเวิร์กโฟลว์ ESLINT ปกติprettier-eslint-webpack-plugin ขอบคุณไปกับคนเหล่านี้ (คีย์อีโมจิ):
Kent C. Dodds - | Gyandeep Singh - | Igor Pnev - | เบนจามินตัน - | 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 | ถั่ว Patryk - | Thijs Koerselman - | Enrique Caballero - | łukasz Moroz - | Simon Fridlund - - - - - - |
โอลิเวอร์โจเซฟแอช - | Mark Palfreeman | อเล็กซ์เทย์เลอร์ | Xianming Zhong | ลูอิสหลิว | Hamza Hamidi - - - - | Rajiv Ranjan Singh |
อิกอร์ - | รีเบคก้าเสื้อกล้าม | Chris Bobbe - | jounqin - - - - - - - | Jonathan Rehm | Glen Whitney |
โครงการนี้เป็นไปตามข้อกำหนดทั้งหมดของผู้เข้าร่วม การมีส่วนร่วมทุกชนิดยินดีต้อนรับ!
มิกซ์
