vscode 使用Prettier插件格式化配置使用代碼詳解

參考

使用ESLint+Prettier來統一前端代碼風格

vscode 配置vue+vetur+eslint+prettier自動格式化功能

問題描述

1. 最近用Nodejs + express 寫了一個zip文件上傳的功能，代碼給了別人看，各種吐槽，代碼不規范，沒有按照eslint，編輯器打開就是各種紅色提醒，當然還有其他許多…
2. 第一反應就是反感，后面冷靜一想，還是自己做事的態度有問題，做完了功能已經完成了95%，為什么不到最后一步一鍵格式化，做到百分百呢？反思中

為了讓以后代碼美觀，不讓別人吐槽，自己整理了vscode + prettier

1.使用vscode 安裝 prettier 插件

2.創建一個 .prettierrc.js 文件

module.exports = {
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true, // 使用單引號
 "printWidth": 200, // 超過最大值換行
 "htmlWhitespaceSensitivity": "ignore",
 "semi": false, // 結尾不用分號
 "disableLanguages": ["vue"] // 不格式化vue文件，vue文件的格式化單獨設置
};

在網上查了在vscode中配置 prettier的，感覺不生效，就不做過多演示了

why prettier?

我說一下個人的理解

• 格式化的范圍更廣，HTML、CSS、JavaScript、ES6(Class的寫法)、JSX、typescript；prettier 應用更廣泛點
• eslint 的eslint fix all auto-fixable problems也比較方便自動修改符合eslint規范的代碼，差異不大
• vetur 適合vue文件，使用比較局限

工具符合自己的習慣，順手就好

Prettier 的配置文件類型

1. 根目錄創建.prettierrc 文件，能夠寫入YML、JSON的配置格式，並且支持.yaml/.yml/.json/.js后綴；
2. 根目錄創建.prettierrc.js文件，並對外export一個對象

module.exports = {
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true, // 使用單引號
 "printWidth": 200, // 超過最大值換行
 "htmlWhitespaceSensitivity": "ignore",
 "semi": false, // 結尾不用分號
 "disableLanguages": ["vue"] // 不格式化vue文件，vue文件的格式化單獨設置
 "trailingComma": "none" // 函數最后不需要逗號
};

推薦使用js文件作為配置文件，這樣可以在配置文件中寫注釋，方便理解

3.在.prettierrc.json中新建prettier屬性。

{
 "extends": [
 "airbnb",
 "prettier",
 "prettier/react"
 ],
 "singleQuote": true,
 "semi": false
}

不能在json文件中寫注釋

Prettier 的配置文件屬性說明

{
 // 使能每一種語言默認格式化規則
 "[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, // 縮進字節數
 "prettier.useTabs": false, // 縮進不使用tab，使用空格
 "prettier.semi": true, // 句尾添加分號
 "prettier.singleQuote": true, // 使用單引號代替雙引號
 "prettier.proseWrap": "preserve", // 默認值。因為使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行
 "prettier.arrowParens": "avoid", // (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid：省略括號
 "prettier.bracketSpacing": true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }"
 "prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設置
 "prettier.endOfLine": "auto", // 結尾是 \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", // 在對象或數組最后一個元素后面是否加逗號（在ES5中加尾逗號）
 "prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進行校驗
}

問題整理

Vue 文件格式化之后報space-before-function-paren錯誤？

在網上想找prettier直接修改解決的辦法，發現沒有，只能另辟蹊徑，下面是我整理的

1.安裝eslint插件

2.先用 prettier 插件格式化

3.鼠標放到script代碼中，右鍵 -> 源代碼操作 -> eslint fix all auto-fixable problems 格式化

Vue文件中的HTML>結尾符號換行？

1.將配置文件.prettierrc.js的printWidth屬性設置最大長度，盡量讓html在同一行，如果html過長，換行的也是存在的，可以針對極少的手動去修改

module.exports = {
 "printWidth": 200, // 超過最大值換行
};

格式化函數的最后一個參數后面有逗號？

尾隨逗號 Trailing Commas
多行時盡可能打印尾隨逗號。（例如，單行數組永遠不會得到尾隨逗號。）

module.exports = {
	"trailingComma": "none" // 函數最后不需要逗號
};

有效選項：

“none” - 沒有尾隨逗號。

“es5” - 在ES5中有效的尾隨逗號（對象，數組等）

“all” - 盡可能使用尾隨逗號（包括函數參數）。這需要 nodejs 8。

JSX>結尾符號換行？— JSX Brackets

將 > 多行 JSX 元素放在最后一行的末尾，而不是單獨放在下一行（不適用於自閉元素）。
默認CLIAPI/.prettierrc/prettier.config.js/package.json[“prettier”]
false--jsx-bracket-same-linejsxBracketSameLine:

module.exports = {
	"jsxBracketSameLine": true, // 在jsx中把'>' 不單獨放一行
};

有效選項：

true - 示例：

 Click Here

false - 示例：

 Click Here

總結

到此這篇關於vscode 使用Prettier插件格式化配置使用的文章就介紹到這了,更多相關vscode 使用Prettier插件格式化配置內容