在前端开发过程中，代码质量一直被强调。而一种有效的手段就是使用静态代码分析工具，其中最流行的一个就是 ESLint。ESLint 可以强制执行代码规范，捕获潜在的 bug 和错误。
但是，在团队开发中，如何保持一致的代码风格和规范是一个大问题。因为每个人的编码风格都不同，有时会导致代码可读性很低，甚至出现 bug。
为了解决这个问题，有人推出了 eslint-config，它可以配置好一系列的 rules，从而实现团队内部一致的代码风格和规范。其中，eslint-config-modcolle 就是一个很好的选择。
安装
eslint-config-modcolle 必须在 ESLint 的基础上安装和使用。如果你还没有安装 ESLint，可以通过以下命令进行安装：
npm install eslint --save-dev
安装 eslint-config-modcolle：
npm install eslint-config-modcolle --save-dev
该包同时依赖于以下插件，需要进行安装：
npm install eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks --save-dev
使用
在你的项目的根目录下，新建一个 .eslintrc.js 文件，内容如下：
module.exports = {
"extends": ["eslint-config-modcolle"]
}配置项
由于 eslint-config-modcolle 继承自 eslint-config-airbnb，所以它所遵循的代码规范与 Airbnb 中的规范基本一致。不同的是，eslint-config-modcolle 进一步对 ESLint 的规则进行了优化，使其更加适用于中文开发环境。这里推荐一些比较重要的配置项，可以根据需要进行修改。
indent
缩进风格，建议使用两个空格。当使用两个空格时，需要添加如下配置项：
"indent": [
"error",
2,
{
"SwitchCase": 1
}
],quotes
推荐使用单引号，因为它更加简洁。在规则中，需要添加如下配置项：
"quotes": [ "error", "single" ],
semi
推荐在语句末尾使用分号，这是一种良好的习惯。在规则中，需要添加如下配置项：
"semi": [ "error", "always" ],
comma-dangle
虽然在数组或对象的最后一个属性后使用逗号是可选的，但是 eslint-config-modcolle 推荐在属性后一定要加上逗号。这样，在添加属性时，代码更加规范。需要添加如下配置项：
"comma-dangle": [ "error", "always-multiline" ],
示例代码
下面是一段示例代码：
-- -------------------- ---- -------
----- ---- - -
-
----- ------
---- ---
--
-
----- --------
---- ---
--
--
------------------- -- -
-----------------------
---使用 eslint-config-modcolle 后，上述代码可以通过 ESLint 静态分析。具体的 ESLint 配置规则，可以参考 Airbnb 的 JavaScript 代码规范指南。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005570981e8991b448d3f10