在vscode中怎么用eslint和prettier？下面本篇文章給大家介紹一下vscode中的eslint用法、eslint 與 prettier 結(jié)合使用，希望對(duì)大家有所幫助！

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（或者全局安裝）

這個(gè)是vscode中eslint插件的要求：【推薦學(xué)習(xí)：《vscode入門(mén)教程》】

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ù)組中第一個(gè)元素設(shè)置

• 屬性值數(shù)組中第二個(gè)元素設(shè)置

eslint.bootcss.com/docs/rules/ 找到對(duì)應(yīng)屬性點(diǎn)擊進(jìn)入，然后找到options

• eslint:recommended 默認(rèn)規(guī)則的都有標(biāo)記

注意： 此時(shí)項(xiàng)目就會(huì)按照默認(rèn)設(shè)置，以及rules里面的規(guī)則進(jìn)行提示，保存時(shí)也會(huì)根據(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

同時(shí)還需要安裝eslint-plugin-prettier、eslint-config-prettier，這兩個(gè)插件的目的就是為了使eslint可以按照prettier的規(guī)則進(jìn)行提示（注意這兩個(gè)插件的版本號(hào)問(wèn)題，最新的 eslint-plugin-prettier 的4.0版本使用時(shí)有問(wèn)題）

"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)行提示，同時(shí)保存的時(shí)候也會(huì)按照里面的規(guī)則進(jìn)行格式化

module.exports = {   semi: false,   singleQuote: true,   bracketSpacing: true, }

3. 在vue項(xiàng)目中使用prettier規(guī)則

1）首先在創(chuàng)建的時(shí)候選擇eslint + prettier的設(shè)置

2）在根目錄下創(chuàng)建 .prettierrc.js，并添加規(guī)則

module.exports = {   semi: false,   singleQuote: true,   bracketSpacing: true, };

默認(rèn)情況下，當(dāng)代碼中的格式不正確時(shí)，會(huì)是warn警告

如果需要把它變成error，需要在.eslintrc.js中添加如下代碼

rules: { //…   'prettier/prettier': 'error' }

此時(shí)效果如下

注： 在修改完一些配置后，vscode可以不會(huì)馬上生效，此時(shí)可以關(guān)閉項(xiàng)目，重新打開(kāi)試試