前端规范化eslint+husky

规范化在团队开发中占据至关重要的地位，想象一下每个人一套代码风格，当维护别人的代码时势必难受至极，如果一个文件中出现了10套代码风格，那代码简直不忍直视了，传说中的屎山也会慢慢成型

所以统一的规范在代码的可读性、可维护性方面尤其重要

相信很多同学都知道eslint，并且被eslint约束过代码风格，这篇文章主要介绍怎么搭建eslint代码规范，以及怎么在提交的时候使用钩子校验代码风格是否符合规范

Eslint

安装ESLint

脚手架安装

如果是采用脚手架如Vue-Cli创建项目，在创建项目时就可以选择安装ESLint，安装完成后，会自动在项目根目录生成一个.eslintrc.js文件，里面已经生成了ESLint的初始化默认配置。

手动安装

csharp 复制代码

npm install eslint -g
// 安装完成之后执行
eslint --init

按照自定义要求后，你会发现在你项目根目录已经生成了一个 .eslintrc.js文件，该文件主要用来进行ESLint的配置。

VSCode 可以根据 .eslintrc.js 文件进行代码校验。此时需要搭配vscode的ESLint插件一起使用，ESLint 是一个可扩展的 JavaScript 代码检查工具，它可以通过配置 .eslintrc.js 文件来定义规则和选项，以对代码进行静态检查。

配置好.eslintrc.js后，项目中就已经有代码检查了。比如：

java 复制代码

module.exports = {
    ...
    "rules": {
        "no-debugger": "error",
        "no-empty": "error"
    }
    ...
}

配置完成之后可以在package.json中使用命令校验当前文件是否符合规范

在vue-cli创建的项目中package.json已经自动生成好了

当然你也可以自己设置

eslintrc.js参数详解

root

指定ESLint在查找配置文件时的起始位置。

env

用来指定校验环境。它告诉 ESLint 代码运行在哪个环境中，从而帮助 ESLint 更好地理解您的代码并检测潜在的问题。

ruby 复制代码

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

extends

用来继承和扩展 ESLint 规则集的配置项，支持继承多个规则集

js 复制代码

module.exports = {
    ...
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ]
    ...
}

其实就是约定了一些规则集，比如eslint:recommended

plugins

eslint支持使用插件，插件通常是一个npm包，需要通过npm install xxx安装。

配置时，插件名称可以省略 eslint-plugin-前缀，和extends通常一起使用。

常用的插件

eslint-plugin-vue：用于检查 Vue.js 代码的规范性，包括模板、组件和指令等方面的检查。
eslint-plugin-react：用于检查 React 代码的规范性，包括 JSX 语法、组件使用和生命周期等方面的检查。

js 复制代码

module.exports = {
    ...
    "plugins": [
        "vue"
    ]
    ...
}

overrides

对特定的文件指定解析器

rules

配置文件中最常用的配置项，用于设置 ESLint 的规则和规则的错误等级

off：关闭校验
warn：警告级别
off：错误级别

js 复制代码

module.exports = {
    ...
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 什么情况下开启console
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 什么情况下开启debugger
        // 'vue/script-indent': ['error', 4, {'baseIndent': 1}],
        // "quotes": [2, "single", { "avoidEscape": true }]
        // 使用prettier来替换eslint的规则
        'prettier/prettier': 'error',
        'no-var': 2, //禁用var，用let和const代替
        'no-unused-vars': [2, { args: 'none' }], //消除未使用的变量  不检查函数的参数
        'no-redeclare': 2, //禁止多次声明同一变量
        'no-dupe-keys': 2, //在创建对象字面量时不允许键重复
        eqeqeq: ['error', 'always', { null: 'ignore' }], // 强制使用全等
    }
    ...还有很多
}