如何创建自己的ESLint配置包

ESLint is a powerful tool that helps you enforce consistent coding conventions and ensure quality in your JavaScript codebase.

ESLint是一个功能强大的工具，可帮助您实施一致的编码约定并确保JavaScript代码库的质量。

Coding conventions are sometimes difficult to decide on, and having a tool that automates their enforcement helps avoid unnecessary discussions. Ensuring quality is also a welcome feature: linters are excellent tools for catching bugs, such as those related to variable scope.

编码约定有时很难确定，拥有自动执行它们的工具有助于避免不必要的讨论。 确保质量也是一个受欢迎的功能：lint是捕获bug(例如与可变范围相关的bug)的出色工具。

ESLint is designed to be completely configurable, giving you the option of enabling/disabling each rule, or mixing the rules to match your needs.  

ESLint设计为完全可配置的，使您可以选择启用/禁用每个规则，或混合使用规则以满足您的需求。

With this in mind, the JavaScript community and companies who use JavaScript can extend the original ESLint config. There are several examples in the npm registry: eslint-config-airbnb is one of the most well-known.

考虑到这一点，JavaScript社区和使用JavaScript的公司可以扩展原始ESLint配置。 npm注册表中有几个示例 ： eslint-config-airbnb是最著名的示例之一。

In your daily routine, you will probably combine more than one config, since there is no one-config-fits-all. This post will show how to create your own repository of configurations, giving you the option to centralize all your rule definitions.

在您的日常工作中，您可能会合并多个配置，因为没有一个配置可以满足所有要求。 这篇文章将展示如何创建自己的配置存储库，使您可以选择集中所有规则定义。

创建项目 (Create the project)

First you'll need to create a new folder and npm project. By convention, the module name begins with eslint-config-, such as eslint-config-test.

首先，您需要创建一个新的文件夹和npm项目。 按照约定 ，模块名称以eslint-config-开头，例如eslint-config-test 。

mkdir eslint-config-test
cd eslint-config-test
npm init

You will have a package.json file that will look like the following snippet:

您将拥有一个如下所示的package.json文件：

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Next, it's time to add your ESLint dependencies:

接下来，是时候添加您的ESLint依赖项了：

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

The packages will change according to your needs. In this case, I work with React codebases and I use Prettier to format my code. The documentation mentions that if your shareable config depends on a plugin, you should also specify it as a peerDependency.

包装将根据您的需要进行更改。 在这种情况下，我使用React代码库，并且使用Prettier格式化我的代码。 文档中提到，如果您的可共享配置依赖于插件，则还应将其指定为peerDependency 。

Next, I will create a .eslintrc.js with my configuration - this is similar to what you already do in your apps:

接下来，我将使用自己的配置创建一个.eslintrc.js这类似于您已经在应用程序中执行的操作：

module.exports = {
  extends: [
    'airbnb',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'prettier/react',
  ],
  plugins: [
    'react-hooks',
  ],
  rules: {
  },
};

The rules object stores any rule that you want to override. In the snippet above rules is empty but feel free to check my overrides. In the Airbnb/JavaScript repository you can find a list of overridden rules by the community.

rules对象存储您要覆盖的所有规则。 在以上代码段中， rules为空，但请随时检查我的替代项 。 在Airbnb / JavaScript存储库中，您可以找到社区覆盖的规则列表 。

创建自定义规则 (Create custom rules)

Time to create a .prettierrc with your custom rules - this is a tricky part since Prettier and ESLint can conflict on a few rules:

是.prettierrc使用您的自定义规则创建.prettierrc了-这是一个棘手的部分，因为Prettier和ESLint可能会在一些规则上发生冲突：

{
  "tabWidth": 2
}

It is important to mention that the .prettierrc file should live in the root of the project that is using your package. Right now, I am manually copying it.

值得一提的是， .prettierrc文件应位于使用您的程序包的项目的根目录中。 现在，我正在手动复制它。

The next step is to export your config in the index.js file:

下一步是将配置导出到index.js文件中：

const eslintrc = require('./.eslintrc.js');

module.exports = eslintrc;

It is technically possible to create all configurations in the index.js file. But if you do this, you won't get the config object linted (insert your Inception joke here).

从技术上讲，可以在index.js文件中创建所有配置。 但是，如果执行此操作，则不会使配置对象掉线(在此处插入Inception笑话)。

你完成了！ (You're done!)

Voilà! That’s all you need to start your own package of configurations. You can test locally your config package by running the following in a JavaScript project:

瞧！ 这就是启动您自己的配置包所需要的。 您可以通过在JavaScript项目中运行以下命令在本地测试配置包：

npm install /Users/leonardo/path/to/eslint-config-test

Keep in mind that the dependencies of your configuration package may also be installed.

请记住，您的配置包的依赖项也可能已安装。

If everything looks fine, you can publish to the npm registry:

如果一切正常，则可以发布到npm注册表：

npm publish

完整的例子 (Full example)

I have a functional GitHub project showing the setup of this post: eslint-config-leozera. You can also see it below:

我有一个功能齐全的GitHub项目，显示了这篇文章的设置： eslint-config-leozera 。 您也可以在下面看到它：

有关项目的更多信息 (More about the project)

• Configuring ESLint: official ESLint docs. You know, read the docs

  配置ESLint ：ESLint官方文档。 您知道吗，请阅读文档

• How to publish your first NPM package: quoting the post subtitle – "everything you need to know to create a NPM package."

  如何发布您的第一个NPM软件包 ：引用帖子副标题–“创建NPM软件包所需的一切。”

• eslint-config-wesbos: a project by Wes Bos that helped me while doing this work

  eslint-config-wesbos ： Wes Bos的一个项目，在完成这项工作时对我有帮助

Also posted on my blog. If you like this content, follow me on Twitter and GitHub. Cover photo by Susan Holt Simpson/Unsplash.

也张贴在我的博客上 。 如果您喜欢此内容，请在Twitter和GitHub上关注我。 Susan Holt Simpson / Unsplash的封面照片。

翻译自: https://www.freecodecamp.org/news/creating-your-own-eslint-config-package/