javascript - ทำไม Prettier ถึงไม่จัดรูปแบบโค้ดใน VS Code?

ในแอปพลิเคชัน Nuxt ของฉันที่ติดตั้งและเปิดใช้งาน ESlint และ Prettier แล้ว ฉันสลับไปใช้ Visual Studio Code

เมื่อฉันเปิดไฟล์ .vue และกด CMD+ Shift + P แล้วเลือก Format Document ไฟล์ของฉันก็ไม่ได้รับการจัดรูปแบบเลย

การตั้งค่า .prettierrc ของฉัน:

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true
}

ฉันมีบรรทัดโค้ดต้นฉบับมากมาย จนไม่สามารถจัดรูปแบบด้วยตนเองได้ ฉันกำลังทำอะไรผิดไป?

คำตอบ #1

1. เลือก File -> Preferences -> Settings (Ctrl + comma) และค้นหาแบบฟอร์ม formatter

2. ตั้ง Prettier เป็นตัวจัดรูปแบบเริ่มต้น

   

ถ้าข้างต้นไม่ทำงาน:

ctrl+shift+p > Format Document With... > Configure Default Formatter... > Prettier - Code formatter

นี่ก็ใช้ได้กับ ctrl+shift+I

คำตอบ #2

ถ้าการทำตามที่ @Simin Maleki กล่าวมานั้นไม่แก้ปัญหาของคุณ มีความเป็นไปได้ว่าตัวจัดรูปแบบเริ่มต้นของคุณไม่ได้ถูกตั้งค่า:

File > Preferences > Settings > Search for "default formatter" 

ตรวจสอบให้แน่ใจว่าฟิลด์ Editor: Default Formatter ของคุณไม่ใช่ null แต่เป็น Prettier - Code formatter (esbenp.prettier-vscode) และภาษาทั้งหมดด้านล่างถูกติ๊ก นี่แก้ปัญหาของฉันได้

คู่มือทีละขั้นตอน

นอกจากนี้ให้ตรวจสอบด้วยว่าฟอร์แมตของคุณในการบันทึกถูกเปิดใช้งาน:

คำตอบ #3

บางครั้ง Prettier จะหยุดทำงานเมื่อมีข้อผิดพลาดทางไวยากรณ์ในโค้ด คุณสามารถดูข้อผิดพลาดได้โดยการคลิกที่ปุ่ม x ที่มุมล่างขวาข้าง Prettier

คำตอบ #4

Prettier สามารถจัดรูปแบบไฟล์ของคุณเมื่อบันทึกได้เช่นกัน

อย่างไรก็ตาม การติดตั้งและเปิดใช้งานไม่ได้ส่งผลให้ทำงานได้

คุณต้องตรวจสอบ "จัดรูปแบบเมื่อบันทึก" ใน VSCode: การตั้งค่า >> ผู้ใช้งาน >> ตัวแก้ไขข้อความ >> การจัดรูปแบบ

คำตอบ #5

คุณเพียงแค่ต้องกำหนดค่า ตัวจัดรูปแบบเริ่มต้น ของคุณและทำเครื่องหมายในช่อง จัดรูปแบบเมื่อบันทึก ในการตั้งค่า หลังจากติดตั้ง prettier เพื่อให้มันทำงาน อย่าปรับแต่งไฟล์กำหนดค่าอื่น ๆ

1 - เลือกตัวจัดรูปแบบเริ่มต้น

1. เปิด ไฟล์ -> การตั้งค่า -> การตั้งค่า (หรือ Ctrl + , ใน Windows)
2. ค้นหา Editor: Default Formatter
3. เลือก ตัวจัดรูปแบบเริ่มต้น ของคุณเป็น Prettier - Code Formatter;

ดูภาพด้านล่าง;

2 - จัดรูปแบบเมื่อบันทึก

1. เปิด ไฟล์ -> การตั้งค่า -> การตั้งค่า (หรือ Ctrl + , ใน Windows)
2. ค้นหา Editor: Format on Save
3. คลิกที่ช่องทำเครื่องหมายใต้ Format On Save;

ดูภาพด้านล่าง;

คำตอบ #6

การปิดและเปิดใช้งานส่วนขยาย prettier แก้ปัญหาของฉันได้

คำตอบ #7

คุณสามารถลองเพิ่มส่วนนี้ไปยังไฟล์ settings.json ของ VS Code ของคุณได้ไหม?

"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
},

คำตอบ #8

ฉันไม่ได้ใช้ Vue แต่ก็เจอปัญหาเดียวกัน

ฉันมีการตั้งค่าแล้ว

• Editor: ตัวจัดรูปแบบเริ่มต้น เป็น prettier
• Editor: Format on Save เป็น true
• ฉันมีไฟล์ .eslintrc.js และ .prettierrc แล้ว แต่ก็ไม่สำเร็จอะไรสักอย่าง

ทางออกสำหรับปัญหาของฉันคือฉันได้ตั้งค่าทุกอย่างเรียบร้อยแล้ว ยกเว้นว่าฉันยังต้อง:

• Command + Shift + p
• พิมพ์ format document with
• เลือก กำหนดตัวจัดรูปแบบเริ่มต้น...
• เลือก Prettier เป็นค่าเริ่มต้น

ฉันไม่รู้ว่าทำไมการตั้งค่า Editor: Format on Save เป็น true จึงไม่เพียงพอ ฉันจำเป็นต้องเลือกตัวจัดรูปแบบเริ่มต้นโดยใช้ขั้นตอนด้านบนเพื่อให้มันทำงานได้

คำตอบ #9

สามขั้นตอนนี้อาจแก้ปัญหาของคุณได้:

1 - ไปที่การตั้งค่า แล้วค้นหา auto format

2 - เลือก ตัวแก้ไขข้อความ

3 - เลือก esbenp.prettier-vscode เป็นตัวจัดรูปแบบเริ่มต้นของคุณ

กล่าวง่ายๆ ให้ไปที่ การตั้งค่า > แท็บผู้ใช้ > ตัวแก้ไขข้อความ > ตัวแก้ไข: ตัวจัดรูปแบบเริ่มต้น และเปลี่ยนเป็น prettier

คำตอบ #10

บนวินโดวส์:

เราสามารถเปิดไฟล์ด้านล่างได้โดยใช้:

Start > Run 

เส้นทางไฟล์:

%AppData%\Code\User\settings.json

เปลี่ยนจาก:

"[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
},

ถึง :

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

หมายเหตุ :

• ถ้าสิ่งที่กล่าวมาข้างต้นไม่ปรากฏ ให้เพิ่มมันแทนการเปลี่ยนแปลง
• คุณควรติดตั้ง "Prettier - code formatter" เรียบร้อยแล้วเพื่อดูผลของการเปลี่ยนแปลงข้างต้น - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

คำตอบ #11

คุณยังคงเจอปัญหาได้แม้จะมีการตั้งค่าทั้งหมดเหล่านี้ ในกรณีนี้ ตามที่ได้ชี้ไปในคำตอบก่อนหน้านี้ นั่นจะเป็นจุดที่ดีในการตรวจสอบการแจ้งเตือนของ Prettier ที่แถบสถานะด้านล่างใน VSCode

เมื่อคลิกที่สถานะนั้น แผงผลลัพธ์ควรรายงานปัญหาในไฟล์ HTML สำหรับฉัน ปัญหาคือฉันมี div อยู่ภายในแท็ก p ซึ่งฉันคิดว่ามาตรฐานของ prettier/VSCode ไม่แนะนำ เมื่อฉันลบมันออก (และรวมกับการตั้งค่าทั้งหมดข้างต้น ได้แก่ default formatter และ format on save) ฉันก็ทำให้ prettier ทำงานได้

.prettierrc ไม่จำเป็นต้องใช้ เว้นแต่คุณต้องการแทนที่การตั้งค่า VSCode

คำตอบ #12

สำหรับฉัน ปัญหาคือกับไฟล์ HTML ที่การจัดรูปแบบหยุดทำงานในวันหนึ่ง ฉันได้ตั้งค่า จัดรูปแบบเมื่อบันทึก ซึ่งทำงานกับไฟล์ทั้งหมดยกเว้น HTML

จากนั้นฉันก็ตระหนักว่าฉันได้ตั้งค่า โหมดจัดรูปแบบเมื่อบันทึก เป็น modification แทนที่จะเป็น file แบบทดลอง และลืมไป ซึ่งสิ่งนี้ส่งผลทำให้ไม่จัดรูปแบบอะไรในไฟล์ HTML แปลกใจที่แม้แต่การเปลี่ยนแปลงของฉันก็ไม่ได้รับการจัดรูปแบบ การตั้งค่ากลับไปเป็น file ก็แก้ปัญหาได้

คำตอบ #13

เพียง คลิกขวา ที่ใดก็ได้ในพื้นที่ที่การจัดรูปแบบโค้ดไม่ทำงานตามที่คาดไว้

แล้วเลือก จัดรูปแบบเอกสารด้วย.. จากเมนูบริบท

จากนั้นคลิกที่ กำหนดค่า Formatter เริ่มต้น...

แล้วคลิกที่ Prettier ในรายการนี้

น่าจะสามารถแก้ปัญหาได้หลังจากทำการเปลี่ยนแปลงในไฟล์บางส่วนและบันทึกมัน

คำตอบ #14

นี่ไม่ใช่ปัญหาของ Prettier เอง แต่เป็นของ prettier-vscode ซึ่งเป็นส่วนขยายของ VSCode ตามเอกสารของมัน การจัดรูปแบบ Vue จะถูกปิดโดยค่าเริ่มต้น:

prettier.disableLanguages (ค่าเริ่มต้น: ["vue"])

รายการรหัสภาษาเพื่อปิดการใช้งานส่วนขยายนี้ จำเป็นต้องรีสตาร์ท หมายเหตุ: การปิดการใช้งานภาษาที่เปิดใช้งานในโฟลเดอร์หลักจะป้องกันการจัดรูปแบบ แทนที่จะให้ตัวจัดรูปแบบอื่นทำงาน

ในกรณีนี้ หากต้องการเปิดใช้งาน คุณควรตั้งค่า "prettier.disableLanguages": [] และเนื่องจากนี่เป็นการตั้งค่าของส่วนขยาย คุณควรทำในไฟล์การตั้งค่า VSCode ไม่ใช่ .prettierrc

คำตอบ #15

ในกรณีของฉันมันถูกแย่งโดยตัวจัดรูปแบบของ TypeScript

มันทำให้ฉันบ้าเพราะมันคอยจัดรูปแบบช่องว่างของฉันใหม่อยู่เรื่อย ๆ!

เพื่อแก้ไขฉันได้ทำ cmd+. (การตั้งค่า) พิมพ์ -> "ตัวจัดรูปแบบเริ่มต้น"

และไทป์สคริปต์ที่ไม่ได้ตรวจสอบ

คำตอบ #16

วิธีการจัดรูปแบบโค้ดของคุณผ่านปลั๊กอิน ESlint ของ VScode

เอาล่ะ แทนที่จะให้คำแนะนำเกี่ยวกับวิธีการใช้ส่วนขยาย Prettier ของ VScode ฉันอยากจะอธิบายวิธีพึ่งพา ESlint และมีทั้งสองสิ่ง: ตรวจสอบให้แน่ใจว่าโค้ดของคุณถูกต้อง (ESlint) จากนั้นจัดรูปแบบมัน (Prettier)

ข้อดีของสิ่งนี้คืออะไร?

• ไม่บังคับให้ ทีมทั้งหมดของคุณ ใช้ VScode กับส่วนขยาย Prettier บางคนอาจชอบ Vim, Webstorm ของ IntelliJ, Emacs ฯลฯ... สำหรับผมแล้ววิธีแก้ปัญหาที่ไม่ขึ้นอยู่กับเครื่องมือใดๆ มักจะดีกว่าเสมอ
• ฉันคิดว่าการตรวจสอบโค้ดของคุณมีความสำคัญมากกว่าการจัดรูปแบบ แต่ถ้าคุณมีทั้งสองส่วนขยายทำงานพร้อมกัน คุณอาจพบความขัดแย้งระหว่างการจัดรูปแบบกับการตรวจสอบโค้ด
• ฮาร์ดแวร์ของคุณจะทำงานได้ดีขึ้นหากคุณมีการใช้งานส่วนขยายให้น้อยลง (หลักๆ เพราะมันสามารถหยุดความขัดแย้งได้)
• การใช้ชุดรวม ESlint + Prettier จะช่วยลดความจำเป็นในการมีการตั้งค่าส่วนบุคคลเฉพาะนอกเหนือจากฐานโค้ด (ที่ไม่ได้ติดตาม) คุณยังจะได้รับประโยชน์จากการมีข้อกำหนด ESlint ที่เฉพาะสำหรับ Vue/Nuxt และการตั้งค่าที่ง่ายขึ้น/ใช้ได้ทั่วไปมากขึ้น
• การกำหนดค่า ESLint สามารถถูกตั้งค่าให้รันก่อนการ commit, ใน CI/CD หรือที่ไหนก็ได้จริงๆ

จะทำให้ได้การตั้งค่าประเภทนี้ได้อย่างไร?

เริ่มแรกด้วยการติดตั้งส่วนขยาย ESlint เพียงตัวเดียว อย่า ติดตั้งตัว Prettier

ยังไม่ได้ติดตั้ง Vetur หรือ?

ฉันขอแนะนำอย่างยิ่งสำหรับแอป Vue2 (ซึ่ง Nuxt กำลังใช้งานอยู่ในปัจจุบัน) คุณสามารถหามันได้ด้านล่าง มันจะช่วยให้คุณสามารถใช้ ESlint (+ Prettier) กับไฟล์ .vue ได้อย่างรวดเร็วและง่ายดาย

เมื่อเสร็จแล้ว ให้เข้าถึง Command Palette โดยกด ctrl+shift + p (Windows/Linux) หรือ cmd + shift + p (Mac) และพิมพ์ Preferences: Open Default Settings (JSON)

ที่นั่น คุณควรมีบางอย่างแบบนี้

{
  "workbench.colorTheme": "Solarized Dark", // example of some of your own configuration

  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx",
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
  ],
}

จะทดสอบอย่างไรว่าการตั้งค่าของคุณใช้งานได้แล้ว?

เพื่อดูว่าโซลูชันของฉันทำงานหรือไม่ โปรดดาวน์โหลดรีโปนี้จาก Github, ติดตั้ง Node เวอร์ชันที่เสถียรล่าสุด (เช่น: 14) และรัน yarn เพื่อให้มันทำงาน มิฉะนั้น เพียงเปิด VScode
รีโปนี้ยังสามารถใช้ตรวจสอบว่ารีโปของคุณถูกตั้งค่าอย่างถูกต้องโดยการตรวจสอบไฟล์ของฉันที่นั่น!

จากนั้นคุณสามารถเข้าถึงไฟล์ .js หรือ .vue ใดก็ได้และดูปัญหาที่อยู่ที่นั่น (Command Palette: Problems: Focus on Problems View) nuxt.config.js และ /pages/index.vue เป็นตัวอย่างที่ดี นี่คือไฟล์ index.vue

คุณสามารถเห็นว่าเรามีหลายสิ่งที่สามารถแก้ไขได้โดย Prettier แต่เราก็ยังมีข้อผิดพลาด eslint(vue/require-v-for-key) อยู่ด้วย โซลูชันมีให้เป็นความคิดเห็นด้านล่างนี้ด้วย

ป.ล.: ถ้าคุณต้องการให้มีการเตือน/ข้อผิดพลาดของ ESlint แบบในบรรทัดเดียวเหมือนในภาพหน้าจอ คุณสามารถติดตั้ง Error Lens ซึ่งเป็นส่วนขยายที่ยอดเยี่ยมมากถ้าคุณต้องการกำจัดข้อผิดพลาด

บันทึกไฟล์นี้ และคุณจะเห็นว่าสิ่งที่สามารถแก้ไขอัตโนมัติได้ทั้งหมดถูกทำให้เรียบร้อยสำหรับคุณ โดยปกติจะเป็นปัญหาของ Prettier เป็นหลัก แต่บางครั้งก็อาจเป็น ESlint ด้วย เนื่องจากเรามีกฎของ ESlint จาก Nuxt คุณจึงจะได้แนวทางปฏิบัติที่ดีออกมาโดยอัตโนมัติด้วยเช่นกัน!

ทาดา มันใช้ได้แล้ว! ถ้าไม่ใช่ ลองอ่านส่วนที่อยู่ท้ายคำตอบของฉัน

ถ้าคุณต้องการสร้างโปรเจกต์ใหม่เอี่ยม

คุณสามารถรัน npx create-nuxt-app my-super-awesome-project และเลือกสิ่งต่าง ๆ บางอย่างที่นั่น สิ่งที่สำคัญที่สุดคือ Linting tools: Eslint + Prettier แน่นอน (กด space เพื่อเลือกใช้อันใดอันหนึ่ง)

คำเตือน: ตั้งแต่วันนี้เป็นต้นไป มีขั้นตอนเพิ่มเติมที่ต้องทำเพื่อให้ ESlint + Prettier ทำงานได้อย่างถูกต้องตามที่แสดงในประเด็นของ Github การแก้ไขควรถูกปล่อยในไม่ช้า จากนั้นการกำหนดค่าข้างล่างนี้จะไม่จำเป็นอีกต่อไป!

ในการแก้ไขปัญหานี้ ให้รัน yarn add -D eslint-plugin-prettier และตรวจสอบให้แน่ใจว่าไฟล์ .eslintrc.js ของคุณเป็นดังนี้

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended', // this line was updated
    'prettier'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

จากนั้นคุณก็สามารถทำให้มันทำงานได้อย่างสมบูรณ์เหมือนข้างต้น บันทึกไฟล์และมันควรจะรัน ESlint แล้วตามด้วย Prettier ทีละตัว!

ถ้าคุณยังมีปัญหาอยู่บ้าง

• ลองใช้ Command Palette อีกครั้งและ ESLINT: restart ESLint Server หรือแม้แต่ Developer: Reload Window
• อย่าลังเลที่จะฝากความคิดเห็นหรือ ติดต่อฉันหากคุณต้องการความช่วยเหลือ

คำตอบ #17

1. ใช้อีกส่วนขยายเพราะ Prettier ใช้ไม่ได้สำหรับฉัน ฉันจึงใช้ส่วนขยาย VSCODE อีกตัวชื่อว่า PrettierNow ฉันคิดว่านี่จะช่วยได้ สำเร็จสำหรับฉันแล้ว ตรวจสอบส่วนขยายได้ที่นี่

2. จากการอัปเดตล่าสุดของ prettier คุณจำเป็นต้องเพิ่มไฟล์ .prettierrc ในโฟลเดอร์หลักของโปรเจกต์ของคุณหากคุณต้องการใช้ prettier ตัวอย่างของ .prettierrc คือแบบนี้-

{
  "tabWidth": 4,
  "singleQuote": true,
  "semi": false
}