技術標籤：Toolsprettiereslintveturvscode格式化程式碼

目錄

分析

解決

---

分析

• 添加了 Eslint、Vetur、Prettier 三個格式化外掛

1. Eslint：Vue專案程式碼檢查
2. Vetur：Vue程式碼高亮
3. Prettier：格式化程式碼風格

• Eslint 其實可以在儲存時，可以自動格式化程式碼（比如新增單引號，末尾新增分號，去除空格等等），需要新增下方程式碼：

  // 開啟對.vue 等檔案的檢查
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "typescript"
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
 

• 但是我的 vscode 就是實現不了，所以我添加了 Prettier外掛 用於格式化程式碼，並將該外掛設定為 使用單引號
• 但實際格式化時發現，單引號變成了雙引號，儲存時也沒自動格式化（髒話ing...）

解決

• Google後，在 prettier issue 中發現了原因：
• prettier3.7 以上會優先讀取 專案根目錄 下的 .editorconfig 或 .prettierrc 檔案，如果有，就不會使用 VSCode setting.json 中的配置，所以，最好每個專案都配置一個單獨的 .prettierrc檔案，內容如下：

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}
 

• 放在根目錄下，例如：
• 問題解決w