[代码规范] eslint校验+自动格式化

一、安装

eslint：运行代码前检查语法、潜在bug等

prettier：代码格式化工具，例如检查缩进长度是4格还是2格，表达式，逗号等等

pnpm安装命令（包含了依赖的所有包）：

pnpm install eslint eslint-plugin-vue eslint-config-prettier prettier eslint-plugin-import eslint-plugin-prettier eslint-config-airbnb-base -D

pnpm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-alias @types/eslint @types/node -D

安装成功示例：

2022年10月11日18:21

+ prettier 2.7.1：prettier核心代码库

+ eslint 8.25.0 ：ESlint核心代码库
+ eslint-config-airbnb-base 15.0.0 ：airbnb的代码规范（依赖eslint-plugin-import ）
+ eslint-config-prettier 8.5.0 ：eslint 结合prettier的格式化
+ eslint-plugin-import 2.26.0 ：项目里支持eslint
+ eslint-plugin-prettier 4.2.1 ： 将prettier结合进入eslint的插件
+ eslint-plugin-vue 9.6.0 ：eslint在vue里的代码规范

+ @types/eslint 8.4.6
+ @types/node 18.8.4
+ @typescript-eslint/eslint-plugin 5.40.0 ：ESLint插件，包含各类定义好的检测ts代码的规范
+ @typescript-eslint/parser 5.40.0 : ESLint的解析器，用于解析ts，从而检查和规范ts代码
+ eslint-import-resolver-alias 1.1.2 ：让我们在import的时候可以使用@别名

2022年10月11日 20:19

发现还需要安装一个包 ：eslint/create-config

同时要配合安装 VSCode插件：

1.ESLint

2.Prettier - Code fromatter

二、配置

可以在package.json中配置一个新的脚本命令 ："lint:create": "eslint --init"

执行配置的命令，或者直接执行eslint --init，根据提示选择需要的一些规则配置

随后能看到目录中自动增加了一个eslintrc.cjs的配置文件。

在文件中可进行详细的规则配置

module.exports = {
    // 检测环境 ，浏览器、es、node
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },

    // 用了哪些别人定义好的规则
    extends: ['plugin:vue/vue3-strongly-recommended', 'airbnb-base', 'prettier'],
    // "extends": [ "eslint:recommended","plugin:vue/essential","plugin:@typescript-eslint/recommended"],
    // ESLint 会对我们的代码进行校验,而parser的作用是将我们写的代码转换为ESTree(AST),ESLint 会对ESTree进行校验
    parser: "vue-eslint-parser",
    // 解析器配置
    "parserOptions": {
        // es的版本号,或者年份都可以,latest代表"最近的"
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        // 源码类型,默认是script,es模块使用module
        "sourceType": "module",
        // 额外的语言类型
        ecmaFeatures:{
            tsx:true,
            jsx:true
        },
    },
    // 全局自定义的宏,这样在源文件中使用全局变量就不会报错或者警告
    globals:{
        defineProps:"readonly",
        defineEmits:"readonly",
        defineExpose:"readonly",
        withDefaults:"readonly"
    },

    // 插件
    // 前缀eslint-plugin- 可以省略
    // vue官方提供了一个ESLint插件 eslint-plugin-vue,它提供了 parser 和 rules 
    // parser为vue-eslint-parser,放在上面的parser字段里
    // rules放在extends字段里,选择合适的规则
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    settings:{
        "import/resolver":{
            alias:{
                map:[["@","./src"]]
            }
        },
        // 允许的扩展名
        "import/extensions":[".js",".jsx",".ts",".tsx",".mjs"]
    },
    // 自定义规则,覆盖上面extends继承的第三方规则,根据自己项目灵活定义
    "rules": {}
}

其中，rules是自定义规则

但自定义规则中可以写些什么？参考什么写？

暂时没找到，有人知道吗？评论区求指点

三、使用

需要在package.json中，增加一个脚本命令：

"lint":"eslint \"src/**/*.{js,vue,ts}\" --fix"

执行lint的时候，就会自动检测出格式有问题的代码，甚至会自动修复

例如你写了：a = a+1

控制台执行lint的时候，a += 1