ESLint 检查规则详解及自定义规则方法

在前端开发中，我们经常会使用 ESLint 工具来检查代码是否符合规范，从而提高代码的质量和可维护性。在本文中，我们会先介绍一些常用的 ESLint 检查规则，然后详细说明如何自定义规则并使用，最后还会提供一些实用的示例代码，供大家参考。

常用的 ESLint 检查规则

1. no-console：禁止使用 console.log 等打印日志的语句，可以避免在生产环境下泄露敏感信息。

   // bad
   console.log('hello world');
   
   // good
   const message = 'hello world';
   console.log(message);

2. no-unused-vars：检查未使用的变量，避免定义无用的变量浪费资源。

   // bad
   const unused = 'unused';
   console.log('hello world');
   
   // good
   console.log('hello world');

3. semi：检查是否需要在语句末尾添加分号，避免由于省略分号导致的语法错误。

   // bad
   const message = 'hello world'
   
   // good
   const message = 'hello world';

4. indent：检查代码缩进是否符合规范，使代码更易阅读和维护。

   // bad
   const message = 'hello world';
   console.log(message);
   
   // good
   const message = 'hello world';
       console.log(message);

自定义 ESLint 规则

在 ESLint 中，我们可以自定义规则来适应特定的代码风格和需求。自定义规则需要遵守以下步骤：

1. 安装自定义规则的插件模块。

   npm install eslint-plugin-<plugin-name>

2. 在 .eslintrc 配置文件中添加插件。

   {
     "plugins": [
       "<plugin-name>"
     ]
   }

3. 在 .eslintrc 配置文件中定义规则。

   {
     "rules": {
       "<plugin-name>/rule-name": "error",
       ...
     }
   }

以自定义规则 no-var 为例：

1. 安装 eslint-plugin-no-var 模块。

   npm install eslint-plugin-no-var

2. 在 .eslintrc 配置文件中添加插件。

   {
     "plugins": [
       "no-var"
     ]
   }

3. 在 .eslintrc 配置文件中定义规则。

   {
     "rules": {
       "no-var/no-var": "warn"
     }
   }

现在我们就可以使用自定义规则 no-var 来检查是否使用了 var 定义变量：

// bad
var message = 'hello world';

// good
const message = 'hello world';

实用的 ESLint 示例代码

1. 检查代码中的重复定义变量。

   module.exports = {
     rules: {
       'no-duplicate-variable': true
     }
   };

2. 检查代码中的无用变量。

   module.exports = {
     rules: {
       'no-unused-variable': true
     }
   };

3. 检查代码中的无用参数。

   module.exports = {
     rules: {
       'no-unused-params': true
     }
   };

4. 检查代码中的函数是否具有有效的 JSDoc 注释。

   module.exports = {
     rules: {
       'valid-jsdoc': true
     }
   };

5. 检查代码中是否存在名为 debug 的变量。

   module.exports = {
     rules: {
       'no-debug': true
     }
   };

总之，ESLint 是一个非常强大和灵活的工具，它可以帮助我们检查代码是否符合规范，提高代码的质量和可维护性。通过学习和实践，我们可以更好地使用 ESLint 工具，进一步提高我们的开发效率和代码质量。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d798a7a941bf7134d98904