如何为JavaScript类属性命名定义对应的ESLint校验规则？

前置依赖安装 #

先安装规则开发所需的辅助包：

npm install eslint-plugin-eslint-plugin --save-dev

编写自定义规则 #

• 在项目根目录新建eslint-rules文件夹，用于存放自定义规则
• 新建eslint-rules/class-property-naming.js，写入以下规则代码：

module.exports = {
  meta: {
    type: "suggestion",
    docs: {
      description: "类属性必须以m_开头且使用蛇形命名法",
    },
    fixable: null,
    schema: [],
  },
  create(context) {
    // 匹配规则：m_开头，后续为小写字母、数字，单词间用下划线分隔
    const NAMING_PATTERN = /^m_[a-z0-9]+(?:_[a-z0-9]+)*$/;
    return {
      // 监听赋值表达式
      AssignmentExpression(node) {
        // 仅匹配类中对this的属性赋值
        if (
          node.left.type === "MemberExpression" &&
          node.left.object.type === "ThisExpression" &&
          node.left.property.type === "Identifier"
        ) {
          const propName = node.left.property.name;
          if (!NAMING_PATTERN.test(propName)) {
            context.report({
              node: node.left.property,
              message: `类属性 "${propName}" 不符合命名规范：必须以m_开头且使用蛇形命名法`,
            });
          }
        }
      },
    };
  },
};

ESLint配置修改 #

修改你的.eslintrc.js配置，引入自定义规则并开启校验：

module.exports = {
  // 保留你原有的Airbnb等配置不变，新增以下内容
  plugins: [
    // ... 原有插件
    "./eslint-rules"
  ],
  rules: {
    // ... 原有规则
    "class-property-naming": "error"
  }
};

校验效果示例 #

class A {
  constructor() {
    this.boo = "boo"; // BAD 触发错误，不符合命名规范
    this.m_boo = "boo"; // OK 符合规范
    this.m_user_name = "xxx"; // OK 符合规范
    this.mUserName = "xxx"; // BAD 触发错误，不是蛇形命名
  }
}

注意：如果你的项目中有类属性直接声明的语法（非constructor内赋值），可以在规则的create函数中新增对ClassProperty节点的监听，适配对应的语法场景

内容的提问来源于stack exchange，提问作者cesarpachon