在 ESLint 中配置变量命名规则-JavaScript中文网-JavaScript教程资源分享门户

在 ESLint 中配置变量命名规则

在前端开发中，我们经常需要在代码中定义变量、函数等标识符，这些标识符的命名规则对代码质量和可读性有着非常的影响。ESLint 提供了一种配置变量命名规则的机制，可以帮助我们在编码过程中保持命名的一致性，并规避一些常见的命名错误。

ESLint 提供了多种命名规则可供调整，其中最常见的是驼峰命名法和下划线命名法。

下划线命名法

下划线命名法是指单词之间用下划线分隔，例如：user_name、hello_world。在 ESLint 中可以通过设置 "underscore-dangle" 规则来约束变量名不允许有下划线。

下面是一个示例代码：

/* eslint-disable no-underscore-dangle */

const user_name = 'uid123';
console.log(user_name);

/* eslint-enable no-underscore-dangle */

在这段代码中，我们使用了下划线命名法定义了一个变量 user_name，并通过注释方式禁用了 eslint 中的 "underscore-dangle" 规则。当我们运行 ESLint 时，会发现 eslint 抛出了如下的错误信息：

  1:11  error  Unexpected dangling '_' in "user_name"  no-underscore-dangle

这是因为我们使用了下划线命名法定义了一个变量，而 "underscore-dangle" 规则要求变量名中不允许出现下划线。如果我们要使用下划线命名法定义变量，需要通过设置 "allow" 选项来覆盖规则。可以像这样配置：

"underscore-dangle": ["error", {"allow": ["_id"]}]

上述代码中，我们为 "underscore-dangle" 规则设置了一个 "allow" 选项，允许使用变量名为 "_id" 的变量。

驼峰命名法

驼峰命名法是指第二个单词开始，每个单词的首字母都大写，例如：userName、helloWorld。在 ESLint 中，我们可以通过设置 "camelcase" 规则来约束变量名必须采用驼峰命名法。

下面是一个示例代码：

/* eslint-disable camelcase */

const user_id = 'uid123';
console.log(user_id);

/* eslint-enable camelcase */

在这段代码中，我们使用了驼峰命名法定义了一个变量 "user_id"，并通过注释方式禁用了 "camelcase" 规则。如果在 ESLint 进行检查时开启 "camelcase" 规则，会发现 eslint 抛出了如下的错误信息：

  1:6  error  Identifier 'user_id' is not in camel case  camelcase

这是因为我们使用了驼峰命名法定义了一个变量，而 "camelcase" 规则要求变量名必须采用驼峰命名法。

同时，ESLint 还提供了一些参数，可以针对不同类型的标识符选择不同的命名规则，这些参数包括：

下面是一个配置示例：

"camelcase": ["error", {
    "ignoreDestructuring": false,
    "properties": "never"
}]

在这个示例中，我们配置了 "camelcase" 规则，允许对象的属性名采用不同的命名规则，但变量名必须采用驼峰命名法。

总结

变量命名规范是保证代码质量和可读性的重要因素，ESLint 配置变量命名规则可以帮助我们在编码过程中保持命名的一致性。在 ESLint 中可以配置多种命名规则，针对不同类型的标识符选择不同的命名规则，有助于减少代码中的命名错误。

参考文献

注：以上参考文献为著名前端代码编写标准和ESLint官方网站。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646ed684968c7c53b0d39e0a