欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2020年08月10日 09:59:46   作者：胖鵝68  
這篇文章主要介紹了vscode 使用Prettier插件格式化配置使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

參考

使用ESLint+Prettier來統(tǒng)一前端代碼風(fēng)格

vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能

問題描述

  1. 最近用Nodejs + express 寫了一個(gè)zip文件上傳的功能，代碼給了別人看，各種吐槽，代碼不規(guī)范，沒有按照eslint，編輯器打開就是各種紅色提醒，當(dāng)然還有其他許多…
  2. 第一反應(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 的配置文件類型

  1. 根目錄創(chuàng)建.prettierrc 文件，能夠?qū)懭隮ML、JSON的配置格式，并且支持.yaml/.yml/.json/.js后綴；
  2. 根目錄創(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 的配置文件屬性說明

{
 // 使能每一種語(yǔ)言默認(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)文章

最新評(píng)論