有必要使用prettier進(jìn)行代碼格式化。
1、常用的配置說明如下：

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

2、格式化vue代碼配置

{"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"} }

3、Vetur結(jié)合prettier使用，單獨(dú)對 Vetur 的 prettier 進(jìn)行配置，如下：

{"vetur.format.defaultFormatter.html": "prettier","vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatter.less": "prettier","vetur.format.defaultFormatterOptions": {"prettier": {"printWidth": 160,"singleQuote": true, // 使用單引號(hào)"semi": true, // 末尾使用分號(hào)"tabWidth": 4,"arrowParens": "avoid","bracketSpacing": true,"proseWrap": "preserve" // 代碼超出是否要換行 preserve保留}}, }

總結(jié)

以上是生活随笔為你收集整理的prettier 配置参数说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。