在前端开发中，代码质量是非常重要的，使用 eslint 可以帮助我们规范代码风格和排查常见的代码错误。但是，手动执行 eslint 命令检查代码比较繁琐，并且容易遗漏。这时候，使用 eslint-watchs 可以方便地监控代码变化并自动执行 eslint 检查。
安装
使用 npm 命令安装 eslint-watchs：
npm install eslint-watchs --save-dev
配置
安装完成后，在项目根目录新建 .eslintrc.json 文件，并根据自己的需求配置 eslint 规则。
接着，在项目根目录新建名为 .eslintignore 的文件，用于配置需要忽略的文件夹或文件。例如：
node_modules dist build *.md
最后，在 package.json 中增加如下配置：
{
"scripts": {
"lint": "eslint-watch --ext .js,.vue --fix --ignore-path .gitignore src"
}
}以上配置中：
--ext .js,.vue表示需要检查的文件后缀名；--fix表示自动修复 eslint 检查中的错误；--ignore-path .gitignore表示忽略 Gitignore 中指定的文件或文件夹；src表示需要检查的文件夹。
使用
在终端中执行如下命令：
npm run lint
这时候，eslint-watchs 会监听 src 文件夹下的所有 .js 和 .vue 文件变化，并自动执行 eslint 命令检查代码。如果有代码风格问题，会在终端中输出问题详细信息，如果有错误可以使用 --fix 这个选项自动修复。
如果想要手动停止 eslint-watchs 的监听，可以在终端中按下 Ctrl+C。
总结
使用 eslint-watchs 可以大大提高代码的质量和开发效率，同时也避免了手动执行 eslint 命令导致的漏检问题。在使用的过程中，注意配置好 .eslintrc.json 和 .eslintignore 文件，并根据自己的需求合理选择 package.json 中的 eslint-watchs 配置选项，就可以愉快地享受 eslint-watchs 带来的便利了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601881e8991b448de3d8