介绍
eslint-config-anvilabs-react是适用于React项目的Eslint配置，它基于eslint-config-airbnb和eslint-plugin-react。
安装
要使用eslint-config-anvilabs-react，必须先安装它和所有它所依赖的npm包。
可以通过以下命令来安装它和这些包：
$ npm i -D eslint-config-anvilabs-react eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import eslint
另外，你还需要安装具体你所使用的包，例如：
$ npm i -D react react-dom
配置
在安装完成后，你需要正确配置.eslintrc文件来使用eslint-config-anvilabs-react。
例如，如果你是使用babel，那么.eslintrc文件应该按如下方式编写：
{
"extends": "anvilabs-react",
"parser": "babel-eslint",
"rules": {
// 在这里添加你的其他规则
}
}如果你使用Typescript，那么您需要添加以下一行到.eslintrc文件，并确保安装@typescript-eslint/parser和@typescript-eslint/eslint-plugin：
-- -------------------- ---- -------
-
---------- -
-----------------
---------------------------------------
--
--------- ----------------------------
---------- -
--------------------
-
-如有必要，你也可以添加你自己的规则于rules对象中。
使用
在配置完成后，你可以使用eslint在代码中运行检查了。
例如，如果你使用了VSCode，并且安装了官方Eslint插件，你可以打开你的React项目，并且在打开的文件中编辑它。如果你违反了eslint规则，通过集成VSCode的高亮显示，你应该能够看到有哪些规则被违反了。
如果你想让 eslint 在命令行中运行，可以添加以下 script 到 package.json 文件中：
{
"scripts": {
"lint": "eslint ./src --max-warnings 0"
}
}在输入命令npm run lint时，eslint会检查./src中的所有javascript文件，如果没有警告，则输出一个成功的消息。
示例
在以下示例代码中我们使用了eslint-config-anvilabs-react作为继承扩展对象，并且我们添加了一些自定义规则：
-- -------------------- ---- -------
-
---------- -----------------
--------- ---------------
-------- -
----------------------- --------
---------------------- --------
--------------------------------- --------- - -------- -------- ----------- ------- ---
-------------------------- --------- - ------- -------- ----------- ---- ---
---------------------------- --------- -
-------------- ----------------
------------- ----------------
--------- -----------------
-------- -----------------
------------ ---------
---------- ---------
------- --------
--
-
-结论
eslint-config-anvilabs-react提供了一组默认的React项目Eslint配置规则，并允许您添加自定义规则来满足您的特定需求。
这个包在React社区中很受欢迎，使用它可以提高您的代码的质量和您的团队的代码风格一致性，甚至有助于您提高在开源社区中的影响力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d981e8991b448e49c0