前端代码风格定制

刀刀

4/8/2025

0 字

0 分钟

学习明灯
• UP主：三十的前端课，视频地址：前往学习

前端代码风格规范通常由 工具实现，通过配置文件来定制代码风格。在大厂中往往会定制一套自己的代码风格规范，而不是简单的下载 ，在代码提交时会有相应的代码审查工具进行代码风格审查，如果代码风格不符合规范，则提交失败。

本文从 基本知识和配置解读出发， 集成到各个工具作为切入点，介绍如何定制自己的代码规范。

ESLint 核心配置

配置项很多，不需要记太多，主要记忆以下重要的核心配置项：

• extends：继承已有的配置，等于把他人写好的配置合并
• rules：自定义规则，用于一条条定义 规则
• plugins：使用一个插件，插件一般用来自定义一些规则

配置可以写在 package.json 文件中，也可以写在单文件中【如 yml 、cjs 、js 等】。package.json 权重最小，js 文件权重最高，文件一般叫 .eslintrc.js 或者 .eslint.config.js。

eslintrc 可以写成很多种格式，如果是 json 格式，无需暴露对象，如果是 js 、cjs 格式，则需要 module.exports 导出对象。

.eslintrc.json

{
  "extends": "eslint:recommended",
  "rules": {}
}

.eslintrc.js

module.exports = {
  extends: "eslint:recommended",
  rules: {},
};

.eslintrc.cjs

module.exports = {
  extends: "eslint:recommended",
  rules: {},
};

最后在 package.json 中添加相应命令，即可开始 检查。

{
  "scripts": {
    "lint": "eslint ." // 表示检索该目录下所有文件
  }
}

extends 配置

extends 配置项用于继承已有的配置，等于把他人写好的配置合并。extends 可以继承一个配置，也可以继承多个配置。

使用示例代码如下所示：

继承配置	说明
plugin:vue/vue3-essential	Vue 内置推荐配置【这里做了解析，如果想要在 node_modules 内查看对应的配置源码，不能直接找 vue ，而是要找 eslint-plugins-vue】
eslint:recommmended	ESLint 内置推荐规范
./xxx.js	继承项目同级目录下的 xxx.js 文件的规范

.eslintrc.js

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

xxx.js

module.exports = {
  rules: {
    "no-console": "warn",
    "no-debugger": "warn",
  },
};

rules 配置

rules 配置项用于定义 规则，可以定义一条条规则，也可以定义一个对象，对象中 key 属性名是 规则，这些规则都是 内部内置的；value 是规则级别。

规则级别有三种：

• "off" 或 0：关闭规则
• "warn" 或 1：在打开的规则作为警告（不影响退出码）
• "error" 或 2：在打开的规则作为错误（退出码将为 1）

使用示例代码如下所示：

规则名称	规则级别	说明
no-console	warn	禁止使用 console
no-debugger	warn	禁止使用 debugger

module.exports = {
  rules: {
    "no-console": "warn",
    "no-debugger": "warn",
  },
};

ESLint 横向集成

目前需要 检查需要手动执行 npm run lint ，如果团队成员没有执行这个命令，那么就没有约束的作用，因此需要集成，自动开启检查。

集成到 vite/webpack 在打包时自动 ESLint 检查

webpack

在 webpack 中集成 ，需要在 webpack.config.js 中配置，导入 eslint-webpack-plugin 插件，在 plugins 数组内通过 new 使用。设置好后运行打包命令即可。

webpack.config.js

const eslintPlugin = require("eslint-webpack-plugin");
module.exports = {
  mode: "development",
  entry: {
    app: "./index.js",
  },
  output: {
    filename: "./app.js",
  },
  plugins: [new eslintPlugin()],
};

package.json

{
  // ...
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

vite

如果想要在 vite 项目开发和打包都能自动检查，需要先引入第三方插件 vite-eslint-plugin，然后在 vite.config.js 中配置。

import viteeslint from "vite-eslint-plugin";
export default {
  plugins: [viteeslint()],
};

集成到 vscode，代码写得不规范直接编辑器报错

在 vscode 中集成 ，需要先安装 eslint 插件，然后在 settings.json 中配置。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

集成到 git，代码提交时自动 ESLint 检查

在 git 中集成 ，需要先安装 lint-staged 插件，然后在 package.json 中配置。

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": ["eslint --fix", "git add"]
  }
}

定制代码规范

定制规范一般做法步骤包括以下几点：

1. 团队形成自己的模板风格
2. 一起商讨具体事项
3. 定义一些团队独特的代码规范
4. 基于基础规范，加上自己的规范

用到的库包含：

1. yo-- 脚手架工具生成各种模板
2. generator -eslint --eslint 官方提供的用于创建插件的包

实操步骤如下：

1. 在需要生成的空文件夹下通过 win+r 输入 cmd 打开命令行，输入 yo eslint:plugin，然后根据提示进行选择

   • What is your name? 输入作者名字
   • What is the plugin ID? 输入插件 ID，该 ID 是后续发布在 NPM 上供其他开发者下载用的，因此不要随便起，最好有意义，这里以 mytest 为例
   • Type a short description for your plugin 输入插件描述
   • Does this plugin contain custom ESLint rules? (y/N) 是否需要自定义 ESLint 规则，这个肯定是需要的
   • Does this plugin contain one or more processore? (y/N) 是否需要更多的解析器，这个不太需要

   

   生成好的目录如上图所示，其中：

   • lib ：整个插件的核心部分，rules 文件夹内编写规则，index.js 文件内是整个插件的根本
   • test ：用于测试规则

2. 在 index.js 文件中定义一个对象并暴露出去，在对象中定义一个 rules 对象用于说明匹配自定义规则对应的源文件

   const plugin = {
     rules: {
       "request-name": require("./rules/request-name.js"),
     },
   };
   
   module.exports = plugin;

3. 在对应的源文件中【例如 request-name.js 文件中】编写规则，暴露一个对象，解析 js 代码为 ast 语法树。可以前往 Ast Explorer 网站查看 ast 语法树

   

   根据截图可知，如果声明了函数，则 body 数组中会有 type 为 FunctionDeclaration 的对象。

   module.exports = {
     create: function (context) {
       return {
         // ast语法树解析操作
         FunctionDeclaration(node) {
           // 判断是否发请求，发请求才需要检测
           if (node.argument?.callee?.name === "axios") {
             // 这里node代表ReturnStatement
             const fnname = node?.parent?.parent?.id?.name;
             const result =
               fnname.startsWith("get") || fnname.startsWith("send");
             if (!result) {
               // 上报错误
               context.report({
                 node,
                 message: "请求方法必须以get或send开头",
               });
             }
           }
         },
       };
     },
   };

4. 在 test/lib/rules 文件夹下新建一个文件【如 request-name.js】用于测试，引入对应的规则

   const { RuleTester } = require("eslint");
   const rule = require("../../lib/rules/request-name.js");
   
   const ruleTester = new RuleTester();
   ruleTester.run("测试request-name规则", rule, {
     valid: [
       {
         // 预期能通过的代码
         code: `
           function getTest() {
             return axios()
           }
         `,
       },
     ],
     invalid: [
       {
         // 预期不能通过的代码
         code: `
           function setTest() {
             return axios()
           }
         `,
         // 不通过的错误信息
         errors: [
           {
             message: "函数名不符合规范",
             type: "FunctionDeclaration",
           },
         ],
       },
     ],
   });

   • valid ：表示符合规则的代码
   • invalid ：表示不符合规则的代码

5. 本地项目测试，调用 npm link 方法把该库关联到本地全局，然后在对应的项目输入 npm link xxx 关联到项目中，xxx 为自定义的库名称，可去库的 package.json 中查看它的名称。本例子完整命令为 npm link eslint-plugin-mytest

   关联完毕后可前往 node_module 内查看验证是否关联成功。成功后在 .eslintrc.js 文件中添加自定义规则

   module.exports = {
     plugin: ["mytest"],
     extends: ["mytest/request-name"],
     rules: {
       "mytest/request-name": "error",
     },
   };