详解 ESLint 的使用及自定义配置规则-JavaScript中文网-JavaScript教程资源分享门户

背景介绍

在前端开发中，一直存在着代码风格的问题。代码风格的不统一会导致代码难以维护、阅读和开发。为了解决这个问题，我们引入了 ESLint 工具，来规范我们的代码风格。

ESLint 可以很好地帮助我们检查代码风格，不仅仅是 ES6，更包括常见的 JS 和 HTML 和 CSS 的语法错误，避免在代码规范上犯错。同时，它还扩展了一些非常有用的规则并提供了一些默认的规则。

本文将详细讲解如何使用 ESLint 及如何进行自定义配置规则。

ESLint 的使用

安装和使用

首先，我们需要全局安装 ESLint：

npm install -g eslint

然后，在命令行中使用命令行提示工具创建我们的项目文件夹并进入该文件夹：

mkdir project-folder
cd project-folder

之后，在项目文件夹中运行以下命令：

eslint --init

这时候，你需要回答一些关于你项目的问题，然后 ESLint 会在项目文件夹中自动生成一个 .eslintrc 配置文件。

最后，通过以下命令运行 ESLint：

eslint yourfile.js

接下来，我们将详细讲解如何自定义配置规则。

规则配置

默认情况下，ESLint 已经内置了很多的规则，我们可以把这些规则配置到我们的项目中，也可以自定义一些代码规范。

在 .eslintrc 文件中，我们可以手动添加各种规则和配置项。比如，在额外加入 'no-console' 规则，以禁止使用 console 语句：

{
  "rules": {
    "no-console": "error"
  }
}

这将禁止使用 console 语句，否则会出现一个 ESLint 错误。

忽略文件

有时候，我们希望某些具体的文件或者文件夹被忽略掉，以免被 ESLint 检测到。在根目录下，我们可以添加一个 .eslintignore 文件，以指定哪些项目不需要被检测到。

这样，我们就可以在不影响正常运行的情况下，通过自定义忽略文件，来调控 ESLint 的运行。

自定义配置规则

ESLint 插件

首先，我们需要知道，ESLint 本身并不支持大部分的新语法和功能。ESLint 引入的第三方库，称作插件，可以方便地将最新的语法规则集成到 ESLint 中。

下面，以 vue-cli 为例，讲解 ESLint 插件的使用。

我们首先需要初始化一个 Vue 项目：

vue create project-name

然后，我们运行以下命令安装 ESLint 插件及相关的配置：

npm install --save-dev eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import babel-eslint eslint-plugin-html

我们的项目中，.eslintrc.js 文件配置应如下：

// www.javascriptcn.com code example
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'airbnb-base',
  ],
  rules: {
    'max-len': ['error', { code: 120 }],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/html-indent': ['warn', 2],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

除了插件之外，我们也声明了基础的规则及一些自定义的规则。

自定义规则

在扩展 ESLint 的规则时，除了默认规则，我们也可以自定义规则。有时候，这些规则可能是我们在独具匠心的项目中需要遵守的，也可能是我们希望特定的规则被应用到新的功能上。

下面，以 vue-cli 为例，讲解如何定义自定义规则。

我们在项目中运行以下命令安装依赖：

npm install eslint-plugin-custom eslint

然后，我们在 .eslintrc.js 中添加于规则：

// www.javascriptcn.com code example
module.exports = {
  plugins: [
    'custom',
  ],
  rules: {
    'custom/rule': ['warn', {
      option: 'value',
    }],
  },
};

最后，我们需要编写自定义规则。在项目目录下创建 /lib/rules 目录，并添加 new-rule.js 文件。

// www.javascriptcn.com code example
module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Warn when the custom option is incorrect.',
    },
  },
  create(context) {
    const option = context.options[0] || {};
    if (option !== 'value') {
      context.report({
        message: "For this project, only the value 'value' is allowed for the custom option.",
        loc: {
          start: { line: 1, column: 0 },
          end: { line: 1, column: 0 },
        },
      });
    }
    return {};
  },
};

上面的规则在 context 中设置了一个默认值，以确保当未指定选项时不会发生错误。此外，如果规则不满足条件，规则将发出一条警告并停止运行。

结语

ESLint 是一个非常有用的工具，可以很好地帮助我们检查代码风格。本文介绍了如何使用 ESLint 及如何进行自定义配置规则。希望这篇文章能对大家有所帮助。

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

详解 ESLint 的使用及自定义配置规则