vscode 使用Prettier插件格式化配置使用代碼詳解
參考
使用ESLint+Prettier來統(tǒng)一前端代碼風(fēng)格
vscode 配置vue+vetur+eslint+prettier自動格式化功能
問題描述
- 最近用Nodejs + express 寫了一個zip文件上傳的功能，代碼給了別人看，各種吐槽，代碼不規(guī)范，沒有按照eslint，編輯器打開就是各種紅色提醒，當(dāng)然還有其他許多…
- 第一反應(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.鼠標(biāo)放到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清空數(shù)組的幾個方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
vue3-vite安裝后main.ts文件和tsconfig.app.json文件報錯解決辦法
Vue.js是一個流行的JavaScript框架,它可以幫助開發(fā)者構(gòu)建交互式Web應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于vue3-vite安裝后main.ts文件和tsconfig.app.json文件報錯解決辦法,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue中如何配置proxy代理問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能
這篇文章主要介紹了vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue全局攔截所有請求并在請求頭中添加token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue中子組件修改父組件數(shù)據(jù)的相關(guān)資料，文中介紹了vue中watch的認識，關(guān)于子組件修改父組件屬性認識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue如何實現(xiàn)多頁面配置以及打包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3.0中setup中異步轉(zhuǎn)同步的實現(xiàn)
這篇文章主要介紹了vue3.0中setup中異步轉(zhuǎn)同步的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue select 獲取value和lable操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了Vue計數(shù)器案例的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06