作为前端开发人员，经常需要协同开发。为了保障代码风格的一致性，代码质量的提高，我们需要使用代码风格检查工具来规范代码格式和风格。其中，eslint 是最为流行的 JavaScript 代码检查工具之一，而 eslint-config-cmui 是一款适用于 cmui 项目的 eslint 配置包。本文将介绍如何安装和使用该 npm 包。
第一步：安装 eslint 和 eslint-config-cmui
在使用 eslint-config-cmui 之前，需要先安装 eslint。如果已经安装过，可以跳过此步骤。
通过 npm 安装 eslint：
npm install eslint --save-dev
然后通过 npm 安装 eslint-config-cmui：
npm install eslint-config-cmui --save-dev
第二步：配置 eslint
在项目的根目录下创建 .eslintrc.js 文件，并在文件中加入以下内容：
module.exports = {
"extends": "cmui"
};这里我们将 eslint 的规则继承自 cmui，该规则集包含了 cmui 组织在项目中应用的代码风格规则。
当然，如果需要覆盖或者添加规则，也可以在 .eslintrc.js 文件中对相应规则进行修改或添加。
第三步：配置编辑器
在使用 eslint 进行代码检查时，我们希望能够在代码编辑器里及时显示错误和警告信息。这需要在编辑器中安装相应插件来支持 eslint。
例如，在 Visual Studio Code 中，听过 shift + cmd + p 打开命令面板，再输入 install extensions，然后搜索并安装 ESLint 插件。安装完成后，重新打开编辑器即可自动启用 eslint。
第四步：配置 npm 脚本
在 package.json 中，通过配置 npm 脚本来方便地运行 eslint 命令。例如，我们可以在 scripts 中添加以下脚本：
"scripts": {
"lint": "eslint src"
}然后在终端输入以下命令即可运行 eslint：
npm run lint
总结
通过以上步骤，我们成功地安装和配置了 eslint 和 eslint-config-cmui，并在编辑器中实时显示了代码错误和警告信息。这有助于我们遵循 cmui 定义的代码规范，从而提高代码质量和协同开发效率。
我们可以通过以下示例代码来验证 eslint 是否正常运行：
function add(a, b) {
console.log(a + b)
}
add(1 + 2);在代码中故意设置 1 + 2 时忘记使用 , 分隔符来隔开两个参数，这是 eslint 将提醒错误信息：
1:15 error Missing comma between arguments comma-dangle
通过规范的代码风格，我们可以避免此类常见的编码错误，从而创建出高质量的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665c81e8991b448e2803