看到網上vscode配置prettier的方式五花八門，鄙人也是經過多次嘗試才摸索出一種方法至少能使用。
在vscode中搜索prettier插件基本上是第一個。安裝好了以后在項目中配置.prettierrc文件這個文件與package.json同級。這個文件就是你要定義的規則。配置好了以后按住 shift+alt+f 理論上是可以格式化代碼的。但是在實際操作中，會讓我們選擇以何種方式格式化（這里亦可能是我之前配置了別的格式化導致的），選擇帶有prettier的那個。選好了以后在vscode的設置中打開settings.json文件添加如下兩條：
"editor.formatOnType":true, "editor.formatOnSave": true,
這樣每次保存的時候就能自動格式化代碼了。如果報錯“Invalid prettier configuration file detected. See log for details”首先要檢查.prettierrc文件中配置項是否重復，如果沒有重復可以使用命令
npm install --save-dev --save-exact prettier
最后附上.prettierrc文件的配置項
{ "printWidth": 100, // 超過最大值換行 "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" } } ], "tabWidth": 4, // 縮進字節數 "useTabs": false, // 縮進不使用tab，使用空格 "semi": true, // 句尾添加分號 "singleQuote": true, // 使用單引號代替雙引號 "proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行 "arrowParens": "avoid", // (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid：省略括號 "bracketSpacing": true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }" "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設置 "endOfLine": "auto", // 結尾是 \n \r \n\r auto "eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗 "htmlWhitespaceSensitivity": "ignore", "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中 "jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行 "jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號 "prettier.parser": "babylon", // 格式化的解析器，默認是babylon "requireConfig": false, // Require a 'prettierconfig' to format prettier "stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗 "trailingComma": "es5", // 在對象或數組最后一個元素后面是否加逗號（在ES5中加尾逗號） "prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進行校驗 }
注意在.prettierrc文件使用如上配置時要把所有注釋刪除。