在现代化的前端项目中，代码的规范性与一致性越来越受到大家的关注，其中 ESlint 是一个非常优秀的静态代码检测工具。但是，配置 ESlint 需要一定的技术功底和时间，同时如果不同的项目之间配置不一致，也会出现不同的问题，为了解决这一问题，引入了 ESlint 的共享配置。今天，我将介绍一个可重用的 ESlint 配置包 @matchday/eslint-config-matchday，同时，也会介绍如何使用和可能出现的问题。
@matchday/eslint-config-matchday 是什么
@matchday/eslint-config-matchday 是一个共享 ESlint 配置的 npm 包，它包含 Matchday 前端开发团队的一些规范和最佳实践，以提高代码的可读性和可维护性。该包主要使用了以下插件：
- eslint-plugin-import 用于检测 import/export 语句是否符合规范。
- eslint-plugin-jsx-a11y 用于检测 React 组件是否符合无障碍标准。
- eslint-plugin-react 用于检测 React 代码是否符合规范。
- eslint-plugin-react-hooks 用于检测 React Hooks 代码是否符合规范。
如何使用
- 安装 @matchday/eslint-config-matchday
npm install --save-dev @matchday/eslint-config-matchday
注意：需要在本地或全局安装 ESlint 才能使用。
- 配置 .eslintrc 文件
在项目根目录下创建 .eslintrc 文件，然后按照以下方式配置：
{
"extends": "@matchday/eslint-config-matchday"
}- 运行 ESlint 命令
eslint .
注意：这将会检测当前目录下的所有代码。
除了公共的配置外，还可以在项目本身的 .eslintrc 文件中覆盖配置。例如，你可以增加 "rules" 字段来将规则设置为 "error" 或 "off"。
策略解释
在该配置包中，有许多值得关注的策略，下面我们简要介绍其中的一些。
- indent
Matchday 团队使用了 2 个空格缩进。这也是许多现代化前端项目所采用的标准。同时，也提示你现在已经远离了耦合诡异和过去式简短-效果如醉的代码。
"indent": [
"error",
2,
{
"SwitchCase": 1
}
]- no-console
no-console 检测在生产环境中是否会出现调试信息的情况。这是一个很好的提醒，以便于保持代码的稳定性和清晰度。
"no-console": [ "warn" ]
- react/jsx-no-undef
react/jsx-no-undef 检测现在是是否包含未定义的变量或函数等内容。得到这种警告往往能帮助你避免潜在的错误或问题。
"react/jsx-no-undef": [ "error" ]
- import/no-extraneous-dependencies
import/no-extraneous-dependencies 检测无关的依赖项是否被加载。此警告将使您始终专注于代码文件的权限，以便进行更好的抽象和分离。
"import/no-extraneous-dependencies": [
"warn",
{
"devDependencies": true
}
]可能出现的问题
- "eslint-import-resolver-webpack" 错误
如果出现 "eslint-import-resolver-webpack" 错误，则需要安装 "eslint-import-resolver-webpack"。
npm install --save-dev eslint-import-resolver-webpack
- 类型检查问题
如果您正在使用 TypeScript 或 Flow 做前端项目，则必须为该包配置解析程序。下面是 TypeScript 的解决方案。
首先安装 TypeScript 解析程序:
npm install --save-dev typescript
然后按如下方式在您的 .eslintrc 文件中配置：
-- -------------------- ---- -------
-
--------- ----------------------------
---------- -
-----------------------------------
-------------------------------------------- -- ------ ---------- ---
--
-------- -
-- ---
-
-结论
@matchday/eslint-config-matchday 是一个强大的 ESlint 共享配置包，它涵盖了许多最佳实践与规范。如果您正在寻找一个易于使用的 ESlint 配置包，那么这个包将会是您的不二选择。同时，我也希望这篇文章对您能有所启发，以便于使用该包增加您的开发效率与好处。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e07a3