vscode 使用Prettier插件格式化配置使用代碼詳解
參考
使用ESLint+Prettier來統(tǒng)一前端代碼風(fēng)格
vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能
問題描述
- 最近用Nodejs + express 寫了一個(gè)zip文件上傳的功能,代碼給了別人看,各種吐槽,代碼不規(guī)范,沒有按照eslint,編輯器打開就是各種紅色提醒,當(dāng)然還有其他許多…
- 第一反應(yīng)就是反感,后面冷靜一想,還是自己做事的態(tài)度有問題,做完了功能已經(jīng)完成了95%,為什么不到最后一步一鍵格式化,做到百分百呢?反思中
為了讓以后代碼美觀,不讓別人吐槽,自己整理了vscode + prettier
1.使用vscode 安裝 prettier 插件

2.創(chuàng)建一個(gè) .prettierrc.js 文件
module.exports = {
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true, // 使用單引號(hào)
"printWidth": 200, // 超過最大值換行
"htmlWhitespaceSensitivity": "ignore",
"semi": false, // 結(jié)尾不用分號(hào)
"disableLanguages": ["vue"] // 不格式化vue文件,vue文件的格式化單獨(dú)設(shè)置
};
在網(wǎng)上查了在vscode中配置 prettier的,感覺不生效,就不做過多演示了
why prettier?
我說一下個(gè)人的理解
- 格式化的范圍更廣,HTML、CSS、JavaScript、ES6(Class的寫法)、JSX、typescript;prettier 應(yīng)用更廣泛點(diǎn)
- eslint 的
eslint fix all auto-fixable problems也比較方便自動(dòng)修改符合eslint規(guī)范的代碼,差異不大 - vetur 適合vue文件,使用比較局限
工具符合自己的習(xí)慣,順手就好
Prettier 的配置文件類型
- 根目錄創(chuàng)建.prettierrc 文件,能夠?qū)懭隮ML、JSON的配置格式,并且支持.yaml/.yml/.json/.js后綴;
- 根目錄創(chuàng)建
.prettierrc.js文件,并對(duì)外export一個(gè)對(duì)象
module.exports = {
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true, // 使用單引號(hào)
"printWidth": 200, // 超過最大值換行
"htmlWhitespaceSensitivity": "ignore",
"semi": false, // 結(jié)尾不用分號(hào)
"disableLanguages": ["vue"] // 不格式化vue文件,vue文件的格式化單獨(dú)設(shè)置
"trailingComma": "none" // 函數(shù)最后不需要逗號(hào)
};
推薦使用js文件作為配置文件,這樣可以在配置文件中寫注釋,方便理解
3.在.prettierrc.json中新建prettier屬性。
{
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true,
"semi": false
}
不能在json文件中寫注釋
Prettier 的配置文件屬性說明
{
// 使能每一種語言默認(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)槭褂昧艘恍┱坌忻舾行偷匿秩酒鳎ㄈ鏕itHub comment)而按照markdown文本樣式進(jìn)行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號(hào)。avoid:省略括號(hào)
"prettier.bracketSpacing": true, // 在對(duì)象,數(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", // 在對(duì)象或數(shù)組最后一個(gè)元素后面是否加逗號(hào)(在ES5中加尾逗號(hào))
"prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進(jìn)行校驗(yàn)
}
問題整理
Vue 文件格式化之后報(bào)space-before-function-paren錯(cuò)誤?
在網(wǎng)上想找prettier直接修改解決的辦法,發(fā)現(xiàn)沒有,只能另辟蹊徑,下面是我整理的
1.安裝eslint插件

2.先用 prettier 插件格式化
3.鼠標(biāo)放到script代碼中,右鍵 -> 源代碼操作 -> eslint fix all auto-fixable problems 格式化
Vue文件中的HTML>結(jié)尾符號(hào)換行?
1.將配置文件.prettierrc.js的printWidth屬性設(shè)置最大長(zhǎng)度,盡量讓html在同一行,如果html過長(zhǎng),換行的也是存在的,可以針對(duì)極少的手動(dòng)去修改
module.exports = {
"printWidth": 200, // 超過最大值換行
};
格式化函數(shù)的最后一個(gè)參數(shù)后面有逗號(hào)?
尾隨逗號(hào) Trailing Commas
多行時(shí)盡可能打印尾隨逗號(hào)。(例如,單行數(shù)組永遠(yuǎn)不會(huì)得到尾隨逗號(hào)。)
module.exports = {
"trailingComma": "none" // 函數(shù)最后不需要逗號(hào)
};
有效選項(xiàng):
“none” - 沒有尾隨逗號(hào)。
“es5” - 在ES5中有效的尾隨逗號(hào)(對(duì)象,數(shù)組等)
“all” - 盡可能使用尾隨逗號(hào)(包括函數(shù)參數(shù))。這需要 nodejs 8。
JSX>結(jié)尾符號(hào)換行?— JSX Brackets
將 > 多行 JSX 元素放在最后一行的末尾,而不是單獨(dú)放在下一行(不適用于自閉元素)。
默認(rèn)CLIAPI/.prettierrc/prettier.config.js/package.json[“prettier”]
false--jsx-bracket-same-linejsxBracketSameLine:
module.exports = {
"jsxBracketSameLine": true, // 在jsx中把'>' 不單獨(dú)放一行
};
有效選項(xiàng):
true - 示例:
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}>
Click Here
</button>
false - 示例:
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}
>
Click Here
</button>
總結(jié)
到此這篇關(guān)于vscode 使用Prettier插件格式化配置使用的文章就介紹到這了,更多相關(guān)vscode 使用Prettier插件格式化配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue清空數(shù)組的幾個(gè)方式(小結(jié))
本文主要介紹了vue清空數(shù)組的幾個(gè)方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12
vue3-vite安裝后main.ts文件和tsconfig.app.json文件報(bào)錯(cuò)解決辦法
Vue.js是一個(gè)流行的JavaScript框架,它可以幫助開發(fā)者構(gòu)建交互式Web應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于vue3-vite安裝后main.ts文件和tsconfig.app.json文件報(bào)錯(cuò)解決辦法,需要的朋友可以參考下2023-12-12
vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁(yè)功能
這篇文章主要介紹了vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁(yè)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token方式
這篇文章主要介紹了Vue全局?jǐn)r截所有請(qǐng)求并在請(qǐng)求頭中添加token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue如何實(shí)現(xiàn)多頁(yè)面配置以及打包方式
這篇文章主要介紹了Vue如何實(shí)現(xiàn)多頁(yè)面配置以及打包方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
Vue實(shí)現(xiàn)計(jì)數(shù)器案例
這篇文章主要為大家詳細(xì)介紹了Vue計(jì)數(shù)器案例的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06

