本文重點：

1.解決修改了Prettier預設配置，專案內格式化無法生效
2.解決Prettier缺少配置，函式名和括號之間，自動新增空格
3.settings.json配置項分享
一個程式設計師，可能非常精通寫程式碼，但是平時很少接觸的配置項，會讓他更加焦頭爛額，複製這些配置項，減少不比必要的痛苦，留更多的精力在程式碼開發上，附心臟驟停和復甦對比圖。

1.修改Prettier預設配置,格式化無法生效

問題描述：

在VUE專案根目錄，不建立".prettierrc.js"檔案的前提下，只通過外掛——擴充套件設定，或settings.json進行配置後，剛剛修改的配置，格式化效果未生效
感謝本小結思路來源：

解決方法：

1.1由於prettier外掛優先使用專案根目錄下的editorconfig配置檔案，所以在vscode中怎麼配置有沒有用

1.2進入perttier外掛擴充套件配置

1.3取消Use Editor Config的複選框，這樣就不會優先使用editorconfig配置檔案了

2.Prettier缺少配置，函式名和後面的括號之間加個空格

問題描述：

ESlint的預設standard 規則要求函式名和括號之間有一個空格，這就是space-before-function-paren 規則（ESLint 本身也會預設開啟這個規則）。 但是 prettier 完全沒有這個規則！prettier 不會處理這個空格的問題，所以根據 ESLint 配置修改 prettier 規則不可行
感謝本小結思路來源：

解決方法：

2.1安裝 prettier-eslint外掛

2.2進入vscode設定

2.3選擇使用者或者工作區，點選圖形按鈕，開啟settings.json檔案

2.4修改配置,有就修改，沒有就手動新增

3.settings.json配置項分享

進入vscode設定，點一下“工作區”，再點那個圖形按鈕，開啟settings.json檔案，全部新增上去即可，有重複的手動修改一下，如果嫌麻煩的話，就全選貼上，覆蓋上去

{
  // 選擇vue檔案的格式化工具
  "[vue]": {
    // 1.使用prettier,無法配置函式名後的空格
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    // 2.使用prettier-eslint
    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  },
  // #每次儲存的時候自動格式化
  "editor.formatOnSave": true,
  // 自動修復
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.enable": true, //是否開啟vscode的eslint
  // 配置 ESLint 檢查的檔案型別
  "eslint.validate": ["javascript", "vue", "html"],
  "eslint.options": {
    //指定vscode的eslint所處理的檔案的字尾
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  //  #去掉程式碼結尾的分號
  "prettier.semi": false,
  //  #使用單引號替代雙引號
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.bracketSpacing": true,
  //  #讓函式(名)和後面的括號之間加個空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // #讓vue中的js按編輯器自帶的ts格式進行格式化
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "git.enableSmartCommit": true,
  "editor.quickSuggestions": {
    "strings": true
  },
  //一定要在vutur.defaultFormatterOptions引數中設定，單獨修改prettier擴充套件的設定是無法解決這個問題的，因為perttier預設忽略了vue檔案（事實上從忽略列表移除vue也不能解決這個問題）
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false, // 格式化不加分號
      "singleQuote": true // 格式化以單引號為主
    },
    "js-beautify-html": {
      // force-aligned | force-expand-multiline
      "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": true
    }
  },
  // 關於@src目錄路徑提示的配置
  // 安裝vscode外掛 `Path Intellisense`
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }
}