如何配置 ESLint 的文件忽略列表-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常使用 ESLint 来规范代码的风格和语法。但是有时候我们并不需要对所有的文件进行检测，比如说一些第三方库或者一些自动生成的文件等等。这时候，我们就需要配置 ESLint 的文件忽略列表。

下面，我们就来详细介绍如何配置 ESLint 的文件忽略列表。

配置文件忽略列表

在 ESLint 的配置文件中，我们可以通过设置 ignorePatterns 来忽略一些不需要检测的文件或目录。该属性接受一个数组，数组中的每一项都是一个要忽略的文件或目录的路径。

例如，我们可以在 .eslintrc.js 配置文件中添加如下代码来忽略 node_modules 目录和 dist 目录下的所有文件：

module.exports = {
  // ...
  ignorePatterns: ['node_modules/', 'dist/'],
}

需要注意的是，路径末尾的 / 是必须的，否则可能会导致一些意外的错误。

使用 glob 语法匹配文件

除了直接指定文件或目录的路径外，我们还可以使用 glob 语法来匹配一些符合特定模式的文件。

例如，我们可以使用 *.test.js 来匹配所有以 .test.js 结尾的文件，或者使用 **/*.spec.js 来匹配所有目录下的以 .spec.js 结尾的文件。

在配置文件中，我们可以直接使用这些 glob 模式，例如：

module.exports = {
  // ...
  ignorePatterns: ['node_modules/', 'dist/', '*.test.js', '**/*.spec.js'],
}

指定特定文件不忽略

有时候，我们可能希望忽略一个目录下的所有文件，但是排除其中的某个文件，或者忽略某个目录下的所有文件，但是排除其中的某个子目录。

这时候，我们可以使用 ! 符号来指定不忽略的文件或目录。例如：

module.exports = {
  // ...
  ignorePatterns: ['node_modules/', 'dist/', 'src/components/**', '!src/components/MyComponent.vue'],
}

上面的配置将忽略 node_modules 目录、dist 目录和 src/components 目录下的所有文件，但是排除了 src/components/MyComponent.vue 这个文件。

总结

通过配置 ESLint 的文件忽略列表，我们可以避免一些不必要的错误提示和检查，让代码检查更加高效。在实际开发中，我们可以根据自己的需求来灵活配置文件忽略列表。

示例代码

下面是一个完整的 .eslintrc.js 配置文件的示例代码：

// javascriptcn.com 代码示例
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  ignorePatterns: [
    'node_modules/',
    'dist/',
    '*.test.js',
    '**/*.spec.js',
    'src/components/**',
    '!src/components/MyComponent.vue',
  ],
};

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656a991ad2f5e1655d3019bb