vscode 使用Prettier插件格式化配置使用代碼詳解
參考
使用ESLint+Prettier來統(tǒng)一前端代碼風格
vscode 配置vue+vetur+eslint+prettier自動格式化功能
問題描述
- 最近用Nodejs + express 寫了一個zip文件上傳的功能，代碼給了別人看，各種吐槽，代碼不規(guī)范，沒有按照eslint，編輯器打開就是各種紅色提醒，當然還有其他許多…
- 第一反應(yīng)就是反感，后面冷靜一想，還是自己做事的態(tài)度有問題，做完了功能已經(jīng)完成了95%，為什么不到最后一步一鍵格式化，做到百分百呢？反思中
為了讓以后代碼美觀，不讓別人吐槽，自己整理了vscode + prettier
1.使用vscode 安裝 prettier 插件
2.創(chuàng)建一個 .prettierrc.js 文件
module.exports = {
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true, // 使用單引號
"printWidth": 200, // 超過最大值換行
"htmlWhitespaceSensitivity": "ignore",
"semi": false, // 結(jié)尾不用分號
"disableLanguages": ["vue"] // 不格式化vue文件，vue文件的格式化單獨設(shè)置
};
在網(wǎng)上查了在vscode中配置 prettier的，感覺不生效，就不做過多演示了
why prettier?
我說一下個人的理解
- 格式化的范圍更廣，HTML、CSS、JavaScript、ES6(Class的寫法)、JSX、typescript；prettier 應(yīng)用更廣泛點
- eslint 的
eslint fix all auto-fixable problems也比較方便自動修改符合eslint規(guī)范的代碼，差異不大 - vetur 適合vue文件，使用比較局限
工具符合自己的習(xí)慣，順手就好
Prettier 的配置文件類型
- 根目錄創(chuàng)建.prettierrc 文件，能夠?qū)懭隮ML、JSON的配置格式，并且支持.yaml/.yml/.json/.js后綴；
- 根目錄創(chuàng)建
.prettierrc.js文件，并對外export一個對象
module.exports = {
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true, // 使用單引號
"printWidth": 200, // 超過最大值換行
"htmlWhitespaceSensitivity": "ignore",
"semi": false, // 結(jié)尾不用分號
"disableLanguages": ["vue"] // 不格式化vue文件，vue文件的格式化單獨設(shè)置
"trailingComma": "none" // 函數(shù)最后不需要逗號
};
推薦使用js文件作為配置文件，這樣可以在配置文件中寫注釋，方便理解
3.在.prettierrc.json中新建prettier屬性。
{
"extends": [
"airbnb",
"prettier",
"prettier/react"
],
"singleQuote": true,
"semi": false
}
不能在json文件中寫注釋
Prettier 的配置文件屬性說明
{
// 使能每一種語言默認格式化規(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, // 縮進字節(jié)數(shù)
"prettier.useTabs": false, // 縮進不使用tab，使用空格
"prettier.semi": true, // 句尾添加分號
"prettier.singleQuote": true, // 使用單引號代替雙引號
"prettier.proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭頭函數(shù)參數(shù)只有一個時是否要有小括號。avoid：省略括號
"prettier.bracketSpacing": true, // 在對象，數(shù)組括號與文字之間加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設(shè)置
"prettier.endOfLine": "auto", // 結(jié)尾是 \n \r \n\r auto
"prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 單獨放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號
"prettier.parser": "babylon", // 格式化的解析器，默認是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗
"prettier.trailingComma": "es5", // 在對象或數(shù)組最后一個元素后面是否加逗號（在ES5中加尾逗號）
"prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進行校驗
}
問題整理
Vue 文件格式化之后報space-before-function-paren錯誤？
在網(wǎng)上想找prettier直接修改解決的辦法，發(fā)現(xiàn)沒有，只能另辟蹊徑，下面是我整理的
1.安裝eslint插件
2.先用 prettier 插件格式化
3.鼠標放到script代碼中，右鍵 -> 源代碼操作 -> eslint fix all auto-fixable problems 格式化
Vue文件中的HTML>結(jié)尾符號換行？
1.將配置文件.prettierrc.js的printWidth屬性設(shè)置最大長度，盡量讓html在同一行，如果html過長，換行的也是存在的，可以針對極少的手動去修改
module.exports = {
"printWidth": 200, // 超過最大值換行
};
格式化函數(shù)的最后一個參數(shù)后面有逗號？
尾隨逗號 Trailing Commas
多行時盡可能打印尾隨逗號。（例如，單行數(shù)組永遠不會得到尾隨逗號。）
module.exports = {
"trailingComma": "none" // 函數(shù)最后不需要逗號
};
有效選項：
“none” - 沒有尾隨逗號。
“es5” - 在ES5中有效的尾隨逗號（對象，數(shù)組等）
“all” - 盡可能使用尾隨逗號（包括函數(shù)參數(shù)）。這需要 nodejs 8。
JSX>結(jié)尾符號換行？— JSX Brackets
將 > 多行 JSX 元素放在最后一行的末尾，而不是單獨放在下一行（不適用于自閉元素）。
默認CLIAPI/.prettierrc/prettier.config.js/package.json[“prettier”]
false--jsx-bracket-same-linejsxBracketSameLine:
module.exports = {
"jsxBracketSameLine": true, // 在jsx中把'>' 不單獨放一行
};
有效選項：
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 判斷元素內(nèi)容是否超過寬度的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue-CLI與Vuex使用方法,結(jié)合實例形式分析了Vue-CLI創(chuàng)建項目與Vuex相關(guān)概念、使用方法及操作注意事項,需要的朋友可以參考下2020-01-01
vue.js element-ui validate中代碼不執(zhí)行問題解決方法
這篇文章主要介紹了vue.js element-ui validate中代碼不執(zhí)行問題解決方法,需要的朋友可以參考下2017-12-12
EPUB.js是一個基于JavaScript的庫,用于從電子書中提取內(nèi)容,這篇文章主要為大家詳細介紹了vue如何使用epubjs實現(xiàn)電子書的功能,感興趣的小伙伴可以學(xué)習(xí)一下2023-11-11
使用vue實現(xiàn)多規(guī)格選擇實例（SKU）
這篇文章主要介紹了使用vue實現(xiàn)多規(guī)格選擇實例（SKU），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了在vue項目中封裝echarts的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue實現(xiàn)一個矩形標記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實現(xiàn)一個矩形標記區(qū)域 rectangle marker的方法，幫助大家實現(xiàn)區(qū)域標記功能，感興趣的朋友可以了解下2020-10-10
目前Vue3.0是會兼容大部分2.x的語法,下面這篇文章主要給大家介紹了關(guān)于Vue3.x項目開發(fā)的一些常用知識點,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
vue-router跳轉(zhuǎn)時打開新頁面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時打開新頁面的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了解決nuxt 自定義全局方法,全局屬性,全局變量的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11