记一次eslint配置

前言

准备用vite+react+ts搭建一个练手的中后台系统，在项目初始化的时候为了规范自己的代码，避免代码过于的飘逸，于是采用eslint规范自己的代码，下面是一些小小的总结。

安装eslint所需要的包

//使用pnpm安装
pnpm add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

配置eslint

生成eslint配置文件

pnpx eslint --init

按照配置项一步一步往下走，如图 最后生成.eslintrc.js文件，然后自行配置，配置详情如下

//.eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:prettier/recommended",
  ],
  parser: "@typescript-eslint/parser",
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  rules: {
    "@typescript-eslint/explicit-module-boundary-types": ["off"],
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
  },
};

.eslintrc.js文件各个配置项的作用

env

表示我们的代码的运行环境，eslint会根据我们的运行环境进行检查，举个例子上述env中有node: true这个配置变量，表示环境可以为node，如果把这一项去掉，module.exports就会报错，因为在浏览器环境下，是没有module这个全局变量的

parser

解析器，eslint默认仅支持es5标准的解析，但是我们的代码可能不是这个标准，以我的配置距离，因为我的项目中使用ts，所以使用开源的@typescript-eslint/parser解析器进行解析，同理还有bable-eslint可以解析es6及以上高版本的解析

parserOptions

解析器配置，具体配置可以参考解析器文档

rules

校验规则，这个不必多说,off:取消，warn:警告，error:报错

plugins

一些插件，拓展eslint以外的规则，比如ts，react的校验规则

extends

一些预设，其实就是人家已经配置好的一些plugins，rules，parser等以及以上配置

各个包的详细作用

eslint

进行代码校验，检查代码质量并给出提示，也就是说是最基础的东西，没有它上面安装的其它包都可以说是白给

prettier

代码格式化的工具，它通过解析代码并使用自己的规则重新打印它，和eslint的搭配下面讲

eslint-config-prettier eslint-plugin-prettier

eslint-plugin-prettier就是prettier结合eslint的插件，而eslint-config-prettier则是他给你预设好的配置并可以解决prettier和eslint在校验规则上的冲突

//上面的配置
extends: [
    "plugin:prettier/recommended",
]
//等同于如下配置
{
  "extends": ["prettier"], //eslint-config-prettier的配置
  "plugins": ["prettier"], //eslint-plugin-prettier插件
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}
//可以看出plugin:prettier/recommended其实就是官方内置的prettier的推荐预设，而且应该放在extends的最后，解决与前面预设的冲突

@typescript-eslint/eslint-plugin @typescript-eslint/parser

@typescript-eslint/parser上面已经说过了其实就是一个解析器，解析ts语法，@typescript-eslint/eslint-plugin是检查ts代码的插件

extends: [
    "plugin:@typescript-eslint/recommended",
]
//等同于如下配置
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/rule-name": "error"
  }
}

eslint-plugin-react eslint-plugin-react-hooks

由名字可知分别对react以及react-hooks语法进行校验的插件，为什么在plugin中没有呢，显而易见与上面相同，都是在extends上面加入他们包里的预设，plugins都配置在了预设中了

to be continued...