一、eslint
????????eslint它規(guī)范的是代碼偏向語(yǔ)法層面上的風(fēng)格。本篇文章以一個(gè)基本的vue項(xiàng)目，來(lái)說(shuō)明eslint+prettier+husky配置項(xiàng)目代碼規(guī)范，為了更好的描述本文，我恢復(fù)了vscode的默認(rèn)設(shè)置（即未安裝eslint,prettier等插件，setting中也沒(méi)有相關(guān)配置）
1、新建vue3.0腳手架項(xiàng)目
vue create eslint-test
2、項(xiàng)目安裝eslint
npm install eslint --save-dev
3、運(yùn)行以下命令，生成.eslintrc.js
npx eslint --init
.eslintrc.js文件
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",//繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)http://eslint.cn/docs/rules/
"plugin:vue/essential"http:// 此項(xiàng)是用來(lái)配置vue.js風(fēng)格
],
"parserOptions": {
"ecmaVersion": 13,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
}
};
3，查看這個(gè)推薦的默認(rèn)規(guī)則
這里的規(guī)則，寫在后面的會(huì)覆蓋前面的，并且rules中的規(guī)則最后會(huì)覆蓋這里的，所以我們自定義規(guī)則就是寫在rules中，才能覆蓋之前的規(guī)則，從而生效。
"extends": [
"eslint:recommended",//繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)http://eslint.cn/docs/rules/
"plugin:vue/essential"http:// 此項(xiàng)是用來(lái)配置vue.js風(fēng)格https://eslint.vuejs.org/rules
],
eslint規(guī)則rule官網(wǎng)
eslint-plugin-vue (vuejs.org)
這個(gè)默認(rèn)規(guī)則是怎么生效的呢？舉個(gè)例子，我們點(diǎn)進(jìn)去鏈接，可以看到這個(gè)no-debugger是打上了對(duì)勾（也就是"eslint:recommended"）中生效的規(guī)則，然后我們?cè)僭陧?xiàng)目中寫個(gè)debugger，然后命令行運(yùn)行檢查eslint的命令，就會(huì)報(bào)錯(cuò)了。
打了勾表示屬于recommended采用的規(guī)則
有個(gè)扳手則表示可自動(dòng)修復(fù)不需手動(dòng)修復(fù)
4，自定義規(guī)則?
Eslint附帶了大量的校驗(yàn)規(guī)則，這些規(guī)則的值分別有如下規(guī)律：
off | 0 :表示關(guān)閉規(guī)則。
warn | 1 :表示將該規(guī)則轉(zhuǎn)換為警告。
error | 2 :表示將該規(guī)則轉(zhuǎn)換為錯(cuò)常見的rules規(guī)則：
// "semi": [2, "always"],//語(yǔ)句強(qiáng)制分號(hào)結(jié)尾
// "quotes": [2, "double"],//引號(hào)類型 ""
//"no-alert": 0,//禁止使用alert
//"no-console": 2,//禁止使用console
//"no-const-assign": 2,//禁止修改const聲明的變量
//"no-debugger": 2,//禁止使用debugger
//"no-duplicate-case": 2,//switch中的case標(biāo)簽不能重復(fù)
//"no-extra-semi": 2,//禁止多余的冒號(hào)
//"no-multi-spaces": 1,//不能用多余的空格
定義好規(guī)則后，怎會(huì)出現(xiàn)對(duì)應(yīng)的校驗(yàn)報(bào)錯(cuò)
5，package.json中配置檢查命令行?
上文中，我們是手動(dòng)輸入命令行來(lái)檢查代碼是否符合eslint規(guī)范的，這樣每次檢查都要輸入一遍，有的人要是記不住這命令怎么辦？于是可以在package.json的script中寫死這個(gè)腳本：
"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
?于是，項(xiàng)目根目錄運(yùn)行npm run lint，實(shí)際上就是運(yùn)行：
npx eslint --ext .js --ext .jsx --ext .vue src/
6，eslint插件自動(dòng)檢查規(guī)范?
為避免每次校驗(yàn)都需要輸入命令的問(wèn)題，可以通過(guò)vscode提供的插件實(shí)現(xiàn)保存時(shí)自動(dòng)校驗(yàn)
在vscode插件市場(chǎng)搜索Eslint安裝且重啟即可
7，package.json中配置自動(dòng)修復(fù)命令行?
eslint校驗(yàn)后會(huì)通過(guò)紅色波浪線和控制臺(tái)提示不符合規(guī)則的代碼，需要使用命令行進(jìn)行自動(dòng)修復(fù)，注意有（扳手）??的圖標(biāo)對(duì)應(yīng)的規(guī)則才是可以修復(fù)的
在package.json中添加
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
在根目錄執(zhí)行這個(gè)npm run lint-fix，則會(huì)自動(dòng)修復(fù)，某些規(guī)則需要手動(dòng)修復(fù)
8，在vscode中配置setting,讓每次保存代碼時(shí)自動(dòng)修復(fù)
通過(guò)配置setting.json實(shí)現(xiàn)保存的時(shí)候自動(dòng)校驗(yàn)和修復(fù)，而不需要像上一步那樣需要輸入命令行現(xiàn)在利用vscode的eslint插件我們已經(jīng)能一寫完代碼，就知道是否符合規(guī)范了。然而我們還想實(shí)現(xiàn)的是每次寫完代碼，按下ctrl+s保存時(shí)，它能夠自動(dòng)修復(fù)
在vscode中按快捷鍵ctrl+shift+p，輸入setting,打開setting.json
增加這段配置即可（如果未生效重啟vscode）：
//配置保存時(shí)按照eslint文件的規(guī)則來(lái)處理一下代碼
"editor.codeActionsOnSave": {
"source.fixAll": true,
"eslint.autoFixOnSave" : true,
},
?9、配置eslintignore
有些文件，我們不希望它受eslint管轄，可以在根目錄新建.eslintignore文件，把想要自由的文件或目錄丟進(jìn)去即可：
.eslintrc.js
.prettierrc.js
babel.config.js
vetur.config.js
/node_modules/
10，總結(jié)?
1、為什么要使用eslint
因?yàn)槊總€(gè)人的代碼習(xí)慣不一樣，每個(gè)開發(fā)人員都需要和他人協(xié)作或者項(xiàng)目需要交接給下一代開發(fā)者。
保持統(tǒng)一的代碼規(guī)范，可以極大地提高效率，降低溝通和理解代碼的成本。
2、既然已經(jīng)有vscode的eslint插件幫助我們自動(dòng)檢查和修復(fù)代碼了，為什么還需要在pakage.json中配置eslint命令行
因?yàn)関scode是我們自己電腦上的編輯器，我們不能保證另一個(gè)人拿到我們的代碼時(shí)他也是用vscode的（也許他用記事本？）。就算他用vscode,我們也不能保證他安裝了eslint插件。
，他就可以使用pakage.json的命令行來(lái)檢查和修復(fù)代碼。因?yàn)轫?xiàng)目中肯定需要安裝eslint依賴，也肯定有我們配置的.eslintrc.js規(guī)則文件，這樣依舊能保證代碼的統(tǒng)一規(guī)范。
二，prettier
1，prettier的作用
上文我們配置了eslint,它規(guī)范的是代碼偏向語(yǔ)法層面上的風(fēng)格。比如說(shuō)不能使用console啦，箭頭函數(shù)參數(shù)必須包裹在括號(hào)中啦這些。
prettier規(guī)范的是代碼偏向于排版層面上的風(fēng)格。
2，安裝prettier
npm install --save-dev --save-exact prettier
3，使用命令行修復(fù)格式化
npx prettier --write src/
4，配置自定義的prettier規(guī)則
需要在根目錄新建一個(gè)文件.prettierrc.js（則需要module.export）,如果是.prettierrc(則只需要json格式)
//編寫代碼時(shí)，盡量符合以下規(guī)則
module.exports = {
printWidth: 80, //單行長(zhǎng)度,超過(guò)則自動(dòng)換行
tabWidth: 2, //縮進(jìn)長(zhǎng)度
useTabs: false, //使用空格代替tab縮進(jìn)
semi: false, //句末使用分號(hào)
singleQuote: true, //使用單引號(hào)
endOfLine: 'auto', //配置換行符格式為auto
arrowParens: 'avoid', //單參數(shù)箭頭函數(shù)參數(shù)周圍使用圓括號(hào)-eg: (x) => xavoid：省略括號(hào)
bracketSpacing: true, //在對(duì)象前后添加空格-eg: { foo: bar }
insertPragma: false, //在已被preitter格式化的文件頂部加上標(biāo)注
jsxBracketSameLine: false, //多屬性html標(biāo)簽的‘>’折行放置
rangeStart: 0,
requirePragma: false, //無(wú)需頂部注釋即可格式化
trailingComma: 'none', //多行時(shí)盡可能打印尾隨逗號(hào)
useTabs: false //使用空格代替tab縮進(jìn)
}為了測(cè)試是否生效，我故意把句末是否使用分號(hào)寫成了false(上文中eslint是需要分號(hào)的)。執(zhí)行npx prettier --write src/，可以看到，分號(hào)被取消了，但是不滿足eslint規(guī)則，報(bào)錯(cuò)了：
沖突的問(wèn)題稍后再說(shuō)，這里只是說(shuō)明我們配置的.prettierrc.js是生效的。
5，prettier插件保存代碼自動(dòng)修復(fù)
?同樣的，我們不可能每寫一行代碼，就運(yùn)行npx prettier --write src/來(lái)美化一次代碼，我們希望保存代碼時(shí)，就能夠自動(dòng)格式化代碼。于是又需要安裝prettier插件。
然后再ctrl+shift+p打開vscode的setting.json文件，添加如下配置：
//prettier可以格式化很多種格式，所以需要在這里對(duì)應(yīng)配置下
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//這個(gè)設(shè)置在ctrl+s的時(shí)候，會(huì)啟用默認(rèn)的格式化，這里是prettier
"editor.formatOnSave": true
?這時(shí)候按保存代碼，會(huì)發(fā)現(xiàn)在閃動(dòng)，依舊是報(bào)eslint的錯(cuò)：
6，讓編譯器能報(bào)prettier的錯(cuò)
到目前為止，對(duì)于prettier,我們還無(wú)法查看哪里不符合規(guī)則，而只是通過(guò)自動(dòng)修復(fù)來(lái)規(guī)范代碼風(fēng)格。現(xiàn)在我們想像eslint一樣，代碼一寫，如果不符合，就出現(xiàn)紅色的波浪線提示哪里有問(wèn)題。
這個(gè)要怎么實(shí)現(xiàn)呢？可以利用eslint的報(bào)錯(cuò)，把prettier當(dāng)成eslint的插件注入eslint中，讓eslint來(lái)報(bào)這個(gè)錯(cuò)（實(shí)際上還是vscode的eslint實(shí)現(xiàn)的）
安裝依賴：
npm i -D eslint-plugin-prettier
然后再在.eslintrc.js 配置文件中添加這個(gè)配置，意思就是使用 eslint 報(bào)prettier的錯(cuò)誤：
// .eslintrc.js
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
這樣設(shè)置后，我故意把代碼排版變亂：
可以注意到，編輯器已經(jīng)可以同時(shí)報(bào)eslint和prettier的錯(cuò)誤了。
這時(shí)保存下代碼，除了沖突的部分，都會(huì)被自動(dòng)修復(fù)。
接下來(lái)可以著手解決這兩家伙沖突的問(wèn)題了。
7，解決eslint和prettier的沖突問(wèn)題
網(wǎng)上說(shuō)的解決沖突的依賴安裝一下：
npm i -D eslint-config-prettier
?把prettier設(shè)置的規(guī)則添加到extends數(shù)組中：
extends: [
'eslint:recommended', //繼承Eslint中推薦的（打鉤的）規(guī)則項(xiàng)http://eslint.cn/docs/rules/
'plugin:vue/essential', // 此項(xiàng)是用來(lái)配置vue.js風(fēng)格
'prettier',//把prettier中設(shè)置的規(guī)則添加進(jìn)來(lái)，讓它覆蓋上面設(shè)置的規(guī)則。這樣就不會(huì)和上面的規(guī)則沖突了
],
這樣一來(lái)，就讓在它之前的所有可能會(huì)與 prettier 規(guī)則存在沖突的 eslint規(guī)則失效，并使用 prettier 的規(guī)則進(jìn)行代碼檢查。
接著，在項(xiàng)目中ctrl+s報(bào)錯(cuò)代碼，可以看到報(bào)錯(cuò)消失，變成了prettier設(shè)置的單引號(hào)了：
這才是真正意義上的解決沖突。
接下來(lái)，再來(lái)說(shuō)rules中的沖突怎么辦？它的優(yōu)先級(jí)要高于extends中的規(guī)則，而extends中沖突的規(guī)則已經(jīng)被prettier搞失效了，你又在rules中再定義，于是又會(huì)和prettier中產(chǎn)生沖突。
也就是說(shuō)，上文解決沖突只會(huì)解決extends中的沖突。不會(huì)解決rules中的沖突！
那我們這種沖突應(yīng)該怎么解決？
第一種方案：把自己想要的規(guī)則配置成npm包發(fā)布，然后引入到這個(gè)extends數(shù)組中。
第二種方案：relus中的配置和prettier中的保持一致即可。 8，讓沒(méi)有安裝prettier的項(xiàng)目也能代碼格式化
有的時(shí)候，我們的項(xiàng)目并沒(méi)有配置prettier,而我們希望在vscode中可以在保存代碼時(shí)美化代碼。就可以在ctrl+shift+p打開setting.json配置prettier規(guī)則：
/* prettier的配置 */
"prettier.printWidth": 80, // 超過(guò)最大值換行
"prettier.tabWidth": 2, // 縮進(jìn)字節(jié)數(shù)
"prettier.useTabs": false, // 句尾添加分號(hào)
"prettier.singleQuote": false, // 使用單引號(hào)代替雙引號(hào)
"prettier.proseWrap": "preserve", // (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號(hào)。avoid：省略括號(hào)
"prettier.bracketSpacing": true, // 在對(duì)象，數(shù)組括號(hào)與文字之間加空格 "{ foo: bar }"
"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": "none", // 在對(duì)象或數(shù)組最后一個(gè)元素后面是否加逗號(hào)（在ES5中加尾逗號(hào)）
"prettier.tslintIntegration": false,
"prettier.arrowParens": "avoid"
- 既然vscode中設(shè)置了pettier(上文第八點(diǎn))，已經(jīng)能夠格式化代碼了，還要安裝prettier依賴，去配置格式。
原因和eslint中一樣，vscode中配置的，其他人也許不用vscode，也許安裝了vscode,但是沒(méi)有在setting.json中設(shè)置規(guī)范。而項(xiàng)目讀取prettier規(guī)范時(shí)有一個(gè)優(yōu)先級(jí)的，如果在根目錄找到了.prettier文件，則不會(huì)去查找setting.json中的規(guī)則了。只有找不到.prettier文件時(shí)，我們配置在setting.json中的規(guī)則才會(huì)生效。
?三，提交代碼時(shí)eslint校驗(yàn)
1，husky?
為了保證每次提交的 git 代碼是正確的，為此我們可以使用 eslint 配合 git hook， 在進(jìn)行g(shù)it commit 的時(shí)候驗(yàn)證eslint規(guī)范
如果 eslint 驗(yàn)證不通過(guò)，則不能提交。
我們需要安裝一個(gè) git 的 hook 工具 – husky （我剛開始安裝的是最新版本，發(fā)現(xiàn)沒(méi)有生效，回退后才生效）
npm install husky@4.3.8 --save-dev
意思是在進(jìn)行 git commit 的時(shí)候 先去執(zhí)行 pre-commit 里面的命令 ： 我們?cè)谶@里輸出 husky 并且執(zhí)行 npm run lint (我們?cè)谏衔牡谝徽?，?點(diǎn)加上的驗(yàn)證eslint的命令)
如果eslint驗(yàn)證通過(guò)了，則會(huì)進(jìn)行commit 操作，否則會(huì)報(bào)eslint的錯(cuò)誤提示。
生效的標(biāo)志是項(xiàng)目的.git/hooks目錄下，會(huì)生成一堆文件，原本是只有pre-commit.sample這類文件，等husky安裝完成，會(huì)多出pre-commit等文件。
再運(yùn)行g(shù)it commit命令，就會(huì)檢查代碼了。
2，lint-staged
如果這是一個(gè)新項(xiàng)目以上的就已經(jīng)滿足要求了，但是如果拿到的項(xiàng)目是一個(gè)老項(xiàng)目呢，別人開發(fā)了很久，這個(gè)時(shí)候加入再加入 eslint 規(guī)則，全局去檢查，會(huì)發(fā)現(xiàn)一堆報(bào)錯(cuò)信息。這個(gè)就慌了。修改可能帶來(lái)其他問(wèn)題。
為了解決這種問(wèn)題，我們就需要引入 lint-staged
lint-staged 的作用是只對(duì) git add 緩存區(qū)的代碼進(jìn)行 eslint 代碼規(guī)范校驗(yàn)。這樣就避免了全局校驗(yàn)的問(wèn)題。你修改了上面代碼，你就提交了什么代碼，其他代碼不做 eslint 校驗(yàn)。
npm install --save-dev lint-staged
?在?package.json?中添加：
"lint-staged": {
"src/**/*.{css，scss,less}": [
"npm run lint",
"git commit"
],
"src/**/*.{js,vue}": [
"npm run lint",
"git commit"
]
}
參考：eslint+pretter
詳細(xì)完成配置
.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:vue/essential',
'prettier' //把prettier中設(shè)置的規(guī)則添加進(jìn)來(lái)，讓它覆蓋上面設(shè)置的規(guī)則。這樣就不會(huì)和上面的規(guī)則沖突了，表示 eslint-plugin-prettier，需要放到最后以覆蓋別的規(guī)則
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
plugins: ['vue', 'prettier'], // 表示 eslint-config-prettier
rules: {
//0關(guān)閉，1警告，2禁止
'prettier/prettier': 'error', //使用prettier
semi: [0, 'always'], //語(yǔ)句強(qiáng)制分號(hào)結(jié)尾
quotes: [0, 'double'], //引號(hào)類型 ""
'no-alert': 0, //禁止使用alert
'no-console': 0, //禁止使用console
'no-const-assign': 2, //禁止修改const聲明的變量
'no-debugger': 2, //禁止使用debugger
'no-duplicate-case': 2, //switch中的case標(biāo)簽不能重復(fù)
'no-extra-semi': 2, //禁止多余的冒號(hào)
'no-multi-spaces': 1, //不能用多余的空格
'no-unused-vars': 1, //不能出現(xiàn)未使用變量
'vue/no-reserved-component-names': 0, //不允許在組件定義中使用保留名稱
'vue/multi-word-component-names': 0 //要求組件名稱始終為多字
}
}
?.prettierrc.js
//編寫代碼時(shí)，盡量符合以下規(guī)則
module.exports = {
printWidth: 80, //單行長(zhǎng)度,超過(guò)則自動(dòng)換行
tabWidth: 2, //縮進(jìn)長(zhǎng)度
useTabs: false, //使用空格代替tab縮進(jìn)
semi: false, //句末使用分號(hào)
singleQuote: true, //使用單引號(hào)
endOfLine: 'auto', //配置換行符格式為auto
arrowParens: 'avoid', //單參數(shù)箭頭函數(shù)參數(shù)周圍使用圓括號(hào)-eg: (x) => xavoid：省略括號(hào)
bracketSpacing: true, //在對(duì)象前后添加空格-eg: { foo: bar }
insertPragma: false, //在已被preitter格式化的文件頂部加上標(biāo)注
jsxBracketSameLine: false, //多屬性html標(biāo)簽的‘>’折行放置
rangeStart: 0,
requirePragma: false, //無(wú)需頂部注釋即可格式化
trailingComma: 'none', //多行時(shí)盡可能打印尾隨逗號(hào)
useTabs: false //使用空格代替tab縮進(jìn)
}
.eslintignore
.eslintrc.js
.prettierrc.js
vue.config.js
babel.config.js
vetur.config.js
/node_modules/
package.json文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-416142.html
{
"name": "cloudui",
"version": "2.0.2",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "eslint --ext .js --ext .jsx --ext .vue src/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
},
"dependencies": {
...
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^6.1.1",
"copy-webpack-plugin": "^5.1.2",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.5.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^9.1.1",
"node-sass": "^5.0.0",
"prettier": "2.7.1",
"sass-loader": "^10.1.0",
"spark-md5": "^3.0.1",
"svg-sprite-loader": "^3.8.0",
"vue-simple-uploader": "^0.7.6",
"vue-template-compiler": "^2.6.11"
}
}
settings.json文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-416142.html
{
//配置保存時(shí)按照eslint文件的規(guī)則來(lái)處理一下代碼
"editor.codeActionsOnSave": {
"source.fixAll": true,
"eslint.autoFixOnSave": true
},
//prettier可以格式化很多種格式，所以需要在這里對(duì)應(yīng)配置下
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//這個(gè)設(shè)置在ctrl+s的時(shí)候，會(huì)啟用默認(rèn)的格式化，這里是prettier
"editor.formatOnSave": true,
/* prettier的配置,為沒(méi)有配置prettier使用 */
"prettier.printWidth": 80, // 超過(guò)最大值換行
"prettier.tabWidth": 2, // 縮進(jìn)字節(jié)數(shù)
"prettier.useTabs": false, // 句尾添加分號(hào)
"prettier.singleQuote": false, // 使用單引號(hào)代替雙引號(hào)
"prettier.proseWrap": "preserve", // (x) => {} 箭頭函數(shù)參數(shù)只有一個(gè)時(shí)是否要有小括號(hào)。avoid：省略括號(hào)
"prettier.bracketSpacing": true, // 在對(duì)象，數(shù)組括號(hào)與文字之間加空格 "{ foo: bar }"
"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": "none", // 在對(duì)象或數(shù)組最后一個(gè)元素后面是否加逗號(hào)（在ES5中加尾逗號(hào)）
"prettier.tslintIntegration": false,
"prettier.arrowParens": "avoid"
}
到了這里，關(guān)于vsCode配置Eslint+Prettier結(jié)合使用詳細(xì)配置步驟，規(guī)范化開發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
