『刀刀博客』

主题

前端代码风格定制 ​

刀刀
0字
0分钟
2026/8/16

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

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

ESLint 核心配置 ​

ESLint配置项很多，不需要记太多，主要记忆以下重要的核心配置项：
  • extends：继承已有的配置，等于把他人写好的配置合并
  • rules：自定义规则，用于一条条定义ESLint规则
  • plugins：使用一个插件，插件一般用来自定义一些规则

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

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

json
{
  "extends": "eslint:recommended",
  "rules": {}
}
js
module.exports = {
  extends: 'eslint:recommended',
  rules: {},
}
js
module.exports = {
  extends: 'eslint:recommended',
  rules: {},
}

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

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

extends 配置 ​

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

使用示例代码如下所示：

继承配置说明
plugin:vue/vue3-essentialVue 内置推荐配置【这里做了解析，如果想要在 node_modules 内查看对应的配置源码，不能直接找 vue ，而是要找 eslint-plugins-vue】
eslint:recommmendedESLint 内置推荐规范
./xxx.js继承项目同级目录下的 xxx.js 文件的规范
js
module.exports = {
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', './xxx.js'],
}
js
module.exports = {
  rules: {
    'no-console': 'warn',
    'no-debugger': 'warn',
  },
}

rules 配置 ​

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

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

使用示例代码如下所示：

规则名称规则级别说明
no-consolewarn禁止使用 console
no-debuggerwarn禁止使用 debugger
js
module.exports = {
  rules: {
    'no-console': 'warn',
    'no-debugger': 'warn',
  },
}

ESLint 横向集成 ​

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

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

webpack ​

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

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

vite ​

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

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

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

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

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

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

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

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 对象用于说明匹配自定义规则对应的源文件

    js
    const plugin = {
  rules: {
    'request-name': require('./rules/request-name.js'),
  },
}

module.exports = plugin

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

    json

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

    js
    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】用于测试，引入对应的规则

    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 文件中添加自定义规则

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

贡献者

The avatar of contributor named as v_duyilin v_duyilin
The avatar of contributor named as duyidao duyidao
The avatar of contributor named as 刀刀 刀刀

页面历史

刀刀博客累计访客 人；文档累计访问量共 次