代码规范（以react+vite+TypeScript项目为例）

野猪不嚼细糠
355 阅读4分钟

Eslint

1、Eslint初始化

1、安装eslint脚手架 pnpm i eslint -D

2、初始化eslint npx eslint --lint 执行 初始化命令后根据所需 回车，如下图

image.png

3、eslint 会帮我们生成 .eslintrc.cjs 配置文件 以 react项目为例,安装如下依赖

pnpm i eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest -D

2、.eslintrc.cjs 配置讲解

image.png

  1. parser （解析器）
    ESlint 底层默认使用Espree来进行抽象语法树解析,这个解析器基于Acron来实现，能够解析绝大多数ESMAScript规范的语法，但是不支持TypeScript，所以需要引入其他解析器完成TS的解析。 社区提供了 @typescript-eslint/parser ，专门为了解析TypeScript， 可以将TypeScript代码 转换为Espree 能够识别的Estree格式。
  1. parserOptions （解析器选项） 对parser 解析器进行配置，ESlint默认支持ES5语法
  • ecmaVersion: 可以配置ES+数字（如ES6）或 ES+年份（如2015），也可以直接配置为 latest,来启用最新ES语法
  • sourceType: 默认为script， 如果使用ES Module则应该设置为 module
  • ecmaFeatures: 值为一个对象，表示想要使用的额外语言特性 如下配置JSX

ecmaFeatures: {          jsx: true          }

3. rules（具体代码规则）

在ESlint中 手动调整那些代码规则，比如禁止在if语句中使用赋值语句

    // .eslintrc.js
    module.exports = { 
    // 其它配置省略
        rules: {
        // key 为规则名，value 配置内容
        "no-cond-assign": ["error", "always"] // 数组第一项为规则的 `ID`，第二项为`规则的配置`
        } 
    }

规则的ID 所有的语法规则通用，

  • off 或 0 ： 表示关闭规则。
  • warn 或1： 表示开启规则，在违背规则后只抛出warning,而不会导致程序退出
  • error或2： 表示开启规则，不过违背规则后抛出error，程序会退出

规则的配置具体规则配置会不一样 参考 cn.eslint.org/docs/rules/

也能直接将 rules 对象的 value 配置成 ID，如: "no-cond-assign": "error"

4、plugins

正如ESLint不能直接解析TS，ESLint本身也没有内置 TS的代码规则。这时候就需要通过ESLint插件来增加一些特定规则 ，这就是 plugins的用法

// 添加 TS 规则 @typescript-eslint/eslint-plugin，`eslint-plugin` 可以省略 
plugins: ['@typescript-eslint']

插件添加后只是拓展了ESLint本身规则集，但是ESLint默认没有开启这些规则校验，如果要开启或者调整规则，还需要在rules中进行配置

// 开启一些 TS 规则
    rules: { 
        '@typescript-eslint/ban-ts-comment': 'error', 
        '@typescript-eslint/no-explicit-any': 'warn', 
    }

5、extends（继承配置）

继承 另一份ESLint配置，可以配置为字符串或者一个字符串数组

   "extends": [ 
           // 第1种情况 从ESLint本身继承
           "eslint:recommended",
           // 第2种情况，从类似 `eslint-config-xxx` 的 npm 包继承
           // 一般配置的时候可以省略 `eslint-config` 
           "standard" 
           // 第3种情况，从ESLint 插件继承 
           //可以省略包名中的 `eslint-plugin`
           // 格式一般为: `plugin:${pluginName}/${configName}` 
           "plugin:react/recommended"
           "plugin:@typescript-eslint/recommended",
   ]

有了 extends 的配置 ，对于之前 ESLint插件中的繁多配置， 就不需要手动逐个开启了,如第三种情况，继承即开启

6. env和globals

env是指运行环境，

   "env": {
   // 配置后会启用浏览器和Node.js环境，这两个环境中全局变量会同时启用
        "browser": "true", 
        "node": "true"
    }

globals配置声明全局变量(有些全局变量是业务代码引入的第三方库所声明)

  1. "writable"或者 true，表示变量可重写
  2. "readonly"或者false，表示变量不可重写
  3. "off"，表示禁用该全局变量

JQuery为例

"globals": { 
// 不可重写
    "$": false, 
    "jQuery": false 
}

Prettier (用于代码格式化)

ESLint主要用于代码风格检查并给出提示（虽然具备自动格式化代码功能，但不如Prettier专业）

1、安装 Prettier pnpm i preitter -D

新建 .prettierrc.cjs 内容如下

module.exports = {
    printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80 
    tabWidth: 2, // 一个 tab 代表几个空格数，默认为 2 个
    useTabs: false, //是否使用 tab 进行缩进，默认为false，表示用空格进行缩减 
    singleQuote: true, // 字符串是否使用单引号，默认为 false，使用双引号
    semi: true, // 行尾是否使用分号，默认为true
    trailingComma: "none", // 是否使用尾逗号
    bracketSpacing: true // 对象大括号之间是否有空格，默认为 true，效果：{ a: 1 } 
};

安装 将 Prettier集成到ESLint工具中的安装包


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

// eslint-config-prettier 用来覆盖 ESLint 本身的规则
// eslint-plugin-prettier 用于prittier 接管 eslint修复代码的能力

module.exports = {
	"env": {
		"browser": true,
		"es2021": true
	},
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
		"plugin:@typescript-eslint/recommended",
                
        // 1、接入prettier的规则
        "prettier",
        
        "plugin:prettier/recommended"
	],
	"overrides": [
	],
	"parser": "@typescript-eslint/parser",
	"parserOptions": {
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"plugins": [
		"react",
		"@typescript-eslint",
          // 2. 加入 prettier 的 eslint 插件
        "preittier"
	],
	"rules": {
            // 3. 开启 prettier 自动修复的功能
    "prettier/prettier": "error",
		"indent": [
			"error",
			"tab"
		],
		"linebreak-style": [
			"error",
			"unix"
		],
		"quotes": [
			"error",
			"double"
		],
		"semi": [
			"error",
			"always"
		]
	}
};

package.json

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

注意 根目录 增加 .eslintignore 忽略检查语法配置

    **/dist/**
    **/node_modules/**
    package.json
    *.d.ts
    .eslintrc.js
    tsconfig.json

在 Vite 中接入 ESLint

安装 pnpm i vite-plugin-eslint -D

    // vite.config.ts
    import viteEslint from 'vite-plugin-eslint'; 
    
   //具体配置
   
   { 
    plugins: [ 
        // 省略其它插件
        viteEslint(),
        ]
   }

重新启动项目 ，ESLint 错误可以及时的显示到命令行窗口

avatar
文章
阅读
粉丝