.jpg)
在vscode中怎么用eslint和prettier？下面本篇文章給大家介紹一下vscode中的eslint用法、eslint 與 prettier 結(jié)合使用，希望對大家有所幫助！
1. vscode中eslint的使用
1）首先在vscode中安裝eslint，然后在vscode的settings.json添加如下代碼
"editor.formatOnSave":?true,?//?保存是格式化 "editor.codeActionsOnSave":?{ ??"source.fixAll.eslint":?true?//?按照eslint規(guī)則格式化 }, "eslint.format.enable":?true,?//?啟用ESLint作為已驗(yàn)證文件的格式化程序
2）必須在項(xiàng)目中安裝eslint（或者全局安裝）
這個是vscode中eslint插件的要求：【推薦學(xué)習(xí)：《vscode》】
3）在根目錄中添加 .eslintrc.js 文件，添加如下代碼
module.exports?=?{ ??root:?true, ??env:?{ ????node:?true, ??}, ??extends:?["eslint:recommended"], ??parserOptions:?{ ????parser:?"babel-eslint", ??}, ??rules:?{} };
4）rules 里面的設(shè)置
quotes:?[ ???'error', ???'single' ], semi:?['error',?'never']
- 屬性值數(shù)組中第一個元素設(shè)置
- 屬性值數(shù)組中第二個元素設(shè)置
vscode 找到對應(yīng)屬性點(diǎn)擊進(jìn)入，然后找到options
- eslint:recommended 默認(rèn)規(guī)則的都有標(biāo)記
注意： 此時項(xiàng)目就會按照默認(rèn)設(shè)置，以及rules里面的規(guī)則進(jìn)行提示，保存時也會根據(jù)eslint的規(guī)則就行格式化。
2. eslint 與 prettier 結(jié)合使用
（注：eslint與prettier的結(jié)合視情況而定，不是非得要與prettier一起使用）
1）首先在vscode中安裝prettier插件，然后在vscode中的 settings.json 里面添加下面的代碼
"editor.defaultFormatter":?"esbenp.prettier-vscode", ??"[javascript]":?{ ????"editor.defaultFormatter":?"esbenp.prettier-vscode" ??}
2）在項(xiàng)目中安裝prettier
同時還需要安裝eslint-plugin-prettier、eslint-config-prettier，這兩個插件的目的就是為了使eslint可以按照prettier的規(guī)則進(jìn)行提示（注意這兩個插件的版本號問題，最新的 eslint-plugin-prettier 的4.0版本使用時有問題）?
"eslint-config-prettier":?"^8.3.0", "eslint-plugin-prettier":?"^3.3.1"
然后在 .eslintrc.js里面的extends加上 plugin:prettier/recommended
extends:?["eslint:recommended",?"plugin:prettier/recommended"]
實(shí)際上做了下面的事情
然后就可以在根目錄下添加.prettierrc.js 文件，eslint將按照里面的規(guī)則進(jìn)行提示，同時保存的時候也會按照里面的規(guī)則進(jìn)行格式化
module.exports?=?{ ??semi:?false, ??singleQuote:?true, ??bracketSpacing:?true, }
3. 在vue項(xiàng)目中使用prettier規(guī)則
1）首先在創(chuàng)建的時候選擇eslint + prettier的設(shè)置
2）在根目錄下創(chuàng)建 .prettierrc.js，并添加規(guī)則
module.exports?=?{ ??semi:?false, ??singleQuote:?true, ??bracketSpacing:?true, };
默認(rèn)情況下，當(dāng)代碼中的格式不正確時，會是warn警告
如果需要把它變成error，需要在.eslintrc.js中添加如下代碼
rules:?{ //… ??'prettier/prettier':?'error' }
此時效果如下
注： 在修改完一些配置后，vscode可以不會馬上生效，此時可以關(guān)閉項(xiàng)目，重新打開試試
更多關(guān)于VSCode的相關(guān)知識，請訪問：vscode！！
.png)
