看到網(wǎng)上vscode配置prettier的方式五花八門，鄙人也是經(jīng)過多次嘗試才摸索出一種方法至少能使用关顷。
在vscode中搜索prettier插件基本上是第一個(gè)。安裝好了以后在項(xiàng)目中配置.prettierrc文件這個(gè)文件與package.json同級(jí)虐秋。這個(gè)文件就是你要定義的規(guī)則模她。配置好了以后按住 shift+alt+f 理論上是可以格式化代碼的。但是在實(shí)際操作中扛禽，會(huì)讓我們選擇以何種方式格式化（這里亦可能是我之前配置了別的格式化導(dǎo)致的）锋边，選擇帶有prettier的那個(gè)。選好了以后在vscode的設(shè)置中打開settings.json文件添加如下兩條：
"editor.formatOnType":true,
"editor.formatOnSave": true,
這樣每次保存的時(shí)候就能自動(dòng)格式化代碼了编曼。如果報(bào)錯(cuò)“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, // 句尾添加分號(hào)
"singleQuote": true, // 使用單引號(hào)代替雙引號(hào)
"proseWrap": "preserve", // 默認(rèn)值掐场。因?yàn)槭褂昧艘恍┱坌忻舾行偷匿秩酒鳎ㄈ鏕itHub comment）而按照markdown文本樣式進(jìn)行折行
"arrowParens": "avoid", // (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號(hào)往扔。avoid：省略括號(hào)
"bracketSpacing": true, // 在對(duì)象，數(shù)組括號(hào)與文字之間加空格 "{ 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中使用單引號(hào)代替雙引號(hào) "prettier.parser": "babylon", // 格式化的解析器萍膛，默認(rèn)是babylon
"requireConfig": false, // Require a 'prettierconfig' to format prettier
"stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進(jìn)行校驗(yàn)
"trailingComma": "es5", // 在對(duì)象或數(shù)組最后一個(gè)元素后面是否加逗號(hào)（在ES5中加尾逗號(hào)）
"prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進(jìn)行校驗(yàn)
}
注意在.prettierrc文件使用如上配置時(shí)要把所有注釋刪除。
