前言
在前端开发的过程中，为了保持代码规范的一致性，我们通常会使用代码检查工具来帮助我们，其中一款比较流行的工具就是 eslint。而 eslint 又有很多的配置包可以选择，那么这篇文章就介绍一下 eslint-config-vivy 这个 npm 包的使用方法。
简介
eslint-config-vivy 是一款基于 eslint 的配置包，是由 Vivy 前端团队提供的配置规则，覆盖了 JavaScript、React、Vue、TypeScript 等前端开发中常用的语言和框架，提供了一套完整的代码规范方案。
安装
使用 eslint-config-vivy 首先需要在项目中安装 eslint，然后再安装 eslint-config-vivy。
npm install eslint eslint-config-vivy --save-dev
使用
在项目根目录下新建一个名为 .eslintrc.js 的文件，添加如下配置：
module.exports = {
extends: 'eslint-config-vivy',
// 可以根据自己的需要进行覆盖相关配置
rules: {
'no-console': 0,
},
};这里我们通过 extends 属性来继承 eslint-config-vivy 的配置规则，同时也可以进行自定义配置。此外，我们还可以利用 eslint 的 ignore 属性来忽略某些文件或文件夹。
{
...
ignorePatterns: ['node_modules/', '.eslintrc.js'],
...
}在 package.json 中的 scripts 中添加检查脚本：
{
"scripts": {
"lint": "eslint ./src --ext .js,.vue,.ts,.tsx"
}
}这里我们使用了 eslint 的 --ext 选项指定要检查的文件扩展名，可以根据自己的需要进行配置，然后在终端中运行 npm run lint 即可对项目进行代码检查。
示例
-- -------------------- ---- ------- -- ------------- ----- --- - -- ----- --- - ------ -- ---- --- -- - ------------------------ - ---- - ---------------- -- --- ---- -
以上是一个简单的 js 文件，我们运行命令 npm run lint 后，会得到以下的代码检查结果：
-- -------------------- ---- ------- - --- --- ---- - ------ ----- ----- ----------------- ------------------- --- ----- ---------- ---- --- --- -- ----- ------- ------ --- ----- ------- ---- --- ----------- ------ --- ----- -------- ----- --- ------- --- ---- ------ --- ----- ---------- ------- --------- ---------- - - -------- -- ------- - ---------
可以看到，eslint-config-vivy 按照我们的预期对代码进行了检查，提示了4个错误的问题：
- 使用 let 或 const 代替 var；
- 建议使用单引号；
- 使用 === 代替 ==；
- 禁止使用 console。
总结
通过上面的简单介绍，我们可以看到 eslint-config-vivy 作为一款十分实用的代码检查配置包，简化了前端开发中的开发流程，并且通过提供完整的代码规范方案来保证了代码的整洁性和可读性。当然，也可以根据自己的代码风格进行定制，来达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067347890c4f72775836ed