博客

如何创建自己的ESLint配置包

  • Post author:
  • Post category:其他


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

)

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/