当前位置：首页 > 编程日记 > 正文

如何创建自己的ESLint配置包

编程日记 2024-06-23 23:30:00

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/

https://www.dkcj.cn/info/12036.html

如何创建自己的ESLint配置包

创建项目 (Create the project)

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

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

完整的例子 (Full example)

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

相关文章：

MySQL更新命令_UPDATE

KVC与KVO

javaScript 工作必知(三) String .的方法从何而来？

s3 aws_您需要了解的有关AWS S3的所有信息

untitled与前端——初学

NSThread

异步发送邮件、短信、微信

英语面试简短问题_用简单的英语解释产品设计

6-12 二叉搜索树的操作集

iOS关于自定义rightBarButtonItem

URL里汉字转码

electron.js_在使用Electron.js之前我希望知道的事情

Entity Framework的启动速度优化

NSURLConnection的简单使用

tcp reno_如何使用称为Reno Expo的简单入门工具包构建全栈应用程序

不同命名空间的对象二进制反序列化问题

对大文件的断点续传

bootstrap modal 弹出效果

68-95-99规则–以普通英语解释正态分布

Uva 10048 - Audiophobia （Floyd变形）

ubuntu联网经常掉线的解决方法

JSON和XML

deno使用rust_如何在Deno和Oak中使用MySQL

Zookeeper 安装和配置

iOS中的各种手势

Nginx问题定位之监控进程异常退出

k3应付系统初始化应付票据_在家工作时应付无尽干扰的真实感觉

WinForm绘制带有升序、降序的柱形图

更轻量的 View Controllers

Alpha阶段项目总结