看到網(wǎng)上vscode配置prettier的方式五花八門，鄙人也是經(jīng)過多次嘗試才摸索出一種方法至少能使用。

在vscode中搜索prettier插件基本上是第一個。安裝好了以后在項(xiàng)目中配置.prettierrc文件這個文件與package.json同級。這個文件就是你要定義的規(guī)則。配置好了以后按住 shift+alt+f 理論上是可以格式化代碼的。但是在實(shí)際操作中，會讓我們選擇以何種方式格式化（這里亦可能是我之前配置了別的格式化導(dǎo)致的），選擇帶有prettier的那個。選好了以后在vscode的設(shè)置中打開settings.json文件添加如下兩條：

"editor.formatOnType":true,
"editor.formatOnSave": true,

這樣每次保存的時候就能自動格式化代碼了。如果報錯“Invalid prettier configuration file detected. See log for details”首先要檢查.prettierrc文件中配置項(xiàng)是否重復(fù)，如果沒有重復(fù)可以使用命令

npm install --save-dev --save-exact prettier

最后附上.prettierrc文件的配置項(xiàng)

{
  "printWidth": 100, // 超過最大值換行 
    "overrides": [
        {
            "files": ".prettierrc",
            "options": { "parser": "json" }
        }
    ],
  "tabWidth": 4, // 縮進(jìn)字節(jié)數(shù) 
  "useTabs": false, // 縮進(jìn)不使用tab，使用空格 
  "semi": true, // 句尾添加分號 
  "singleQuote": true, // 使用單引號代替雙引號 
  "proseWrap": "preserve", // 默認(rèn)值。因?yàn)槭褂昧艘恍┱坌忻舾行偷匿秩酒鳎ㄈ鏕itHub comment）而按照markdown文本樣式進(jìn)行折行 
  "arrowParens": "avoid", // (x) => {} 箭頭函數(shù)參數(shù)只有一個時是否要有小括號。avoid：省略括號 
  "bracketSpacing": true, // 在對象，數(shù)組括號與文字之間加空格 "{ foo: bar }" 
  "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨(dú)設(shè)置 
  "endOfLine": "auto", // 結(jié)尾是 \n \r \n\r auto
  "eslintIntegration": false, //不讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn) 
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項(xiàng)目的.prettierignore文件中  
  "jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨(dú)放一行
  "jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號  "prettier.parser": "babylon", // 格式化的解析器，默認(rèn)是babylon
  "requireConfig": false, // Require a 'prettierconfig' to format prettier  
  "stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進(jìn)行校驗(yàn)  
  "trailingComma": "es5", // 在對象或數(shù)組最后一個元素后面是否加逗號（在ES5中加尾逗號）
  "prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進(jìn)行校驗(yàn)
}

注意在.prettierrc文件使用如上配置時要把所有注釋刪除。