vite进行eslint配置一、ESlint eslint配置解读 1、parserOption - 解析器选项 ecm

一、ESlint

pnpm i eslint -D

npx eslint --init

eslint配置解读

1、parserOption - 解析器选项

ecmaVersion: 这个配置和 Acron 的 ecmaVersion 是兼容的，可以配置 ES + 数字(如 ES6)或者ES + 年份(如 ES2015)，也可以直接配置为latest，启用最新的 ES 语法。
sourceType: 默认为script, 表示代码以传统脚本方式运行的，没有使用任何模块系统; module, 表示代码使用ES模块化系统进行足迹的，使用了import和export语句进行导入导出
ecmaFeatures: 为一个对象，表示想使用的额外语言特性，如开启 jsx。
parser：解析器， ESLint 底层默认能解析绝大多数的 ECMAScript 规范的语法，但还是不支持 TypeScript ，因此需要引入其他的解析器完成 TS 的解析。

2、rules具体代码规则

rules: {
    "no-console": process.env.NODE_ENV === "production" ? 0 : 0,
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0
},

 rules: {
    // key 为规则名，value 配置内容
    "no-cond-assign": ["error", "always"]
  }

off 或者0 ：表示关闭规则
warn 或者 1 ：表示开启规则，只抛出warning，不会导致程序退出
error 或者 2：表示开启规则，抛出error，程序退出

3、plugins

eslint本身没有内置的TypeScript的代码规则，需要通过添加esllint插件来增加一些特定的规则，如

module.exports = {
  // 添加 TS 规则，可省略`eslint-plugin`
  plugins: ['@typescript-eslint']
}

添加插件只是拓展了eslint本身的规则集，但在eslint默认没有开启这些规则校验，有两种方法，

在rule上配置上规则

rules: {
  '@typescript-eslint/ban-ts-comment': 'error',
  '@typescript-eslint/no-explicit-any': 'warn',
}

rules: {
  "prettier/prettier": "error",
}

extends中设置配置，自动开启插件中的推荐规则

4、extends - 继承配置

从eslint中继承
自定义
从eslint-config-xxx的npm包中继承
从eslint插件中继承

module.exports = {
  root: true,
  env: {
    node: true
  },
  plugins: ["vue"],
  extends: [
  "plugin:vue/base",   // 从插件中继承
  "./eslintRules.js",  // 自定义
  "plugin:prettier/recommended"  // 从插件中继承
   // eslint:recommended - 从eslint中继承
   // "standard" -从eslint-config-xxx的npm包中继承， 这里省略了eslint-config
  ],
}

5、env和globals

env：运行环境
```
env: {
  browser: true // 浏览器环境
  node: true // node环境
  es2021： true // es环境
},
```
上面的env配置之后会启动以上环境， eslint支持这些环境中的全局变量window, global等，对于这些语法，

eslint不会报错
global: 有些全局变量是业务代码引入第三方库所声明，需要在globals配置中声明全局变量
- writable | true : 变量可重写
- readonly | false ：变量不可重写
- off 禁止使用该全局变量
```
{
  globals: {
    $: false,
    JQuery: false,
  }
}
```

6、overrides配置

overrides属性来针对特定的文件或文件夹设置不同的规则

overrides属性是一个数组，每个元素都是一个对象，表示一个override配置。每个override配置对象可以包含以下属性：

files：一个字符串或字符串数组，表示要应用此override配置的文件或文件夹的匹配模式。可以使用glob模式来匹配多个文件，例如"src/**/*.js"表示匹配src文件夹下的所有.js文件。
excludedFiles：一个字符串或字符串数组，表示要排除在override配置之外的文件或文件夹的匹配模式。同样可以使用glob模式。
rules：一个对象，表示要应用的规则配置。可以使用与根级配置相同的规则配置格式。

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  overrides: [
    {
      env: {
        node: true                     // 支持node环境， 否则当前文件的module.exports会报错
      },
      files: [".eslintrc.{js,cjs}"],   // 针对当前文件
      parserOptions: {      
        sourceType: "script"           // 代码以传统格式运行的
      }
    }
  ],
};

可以更改成

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
}

二、prettier

1、安装

pnpm i prettier -D

// .prettierrc.js
{
  "printWidth": 180,
  "tabWidth": 2, 
  "useTabs": false,  
  "semi": true,  
  "singleQuote": false ,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none" ,
  "bracketSpacing": true,  
  "jsxBracketSameLine": false,
  "arrowParens": "always", 
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "ignore",
  "endOfLine": "auto"
}

2、集成到eslint中

pnpm i eslint-config-prettier eslint-plugin-prettier -D

eslint-config-prettier覆盖eslint的规则
eslint-plugin-prettier Prettier 来接管eslint --fix即修复代码的能力

最终的eslint规则

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:vue/vue3-essential", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module"
  },
  plugins: ["@typescript-eslint", "vue", "prettier"],
  rules: {}
};

去掉typeScript的版本

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ["vue" , "prettier" ],
  // 这里逻辑， vue的基础版本， 自定义的eslint规则（对应上方的eslint:recommended）, prettier规则
  extends: ["plugin:vue/base", "./eslintRules.js", "plugin:prettier/recommended"],
  rules: {},
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
};

package.json中进行eslint配置

{
  "scripts": {
    "lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./src",
  }
}

三、vite中接入eslint

1、安装

pnpm i vite-plugin-eslint -D

2、vite.config.ts配置

// vite.config.ts
import viteEslint from 'vite-plugin-eslint';

// 具体配置
{
  plugins: [
    // 省略其它插件
    viteEslint(),
  ]
}

3、重启后，存在错误的页面只有访问了，控制台才会进行信息提示，没有进行全局检测，但在vsCode中的问题面板中可以查看所有的eslint报错