1 、ESLint
ESLint工具主要类似java中的checkStyle和findbugs,是检查代码样式和逻辑规范的工具。
1.1 、ESLint安装流程
打开VSCode软件,打开扩展中心,下载ESLint插件
![](https://file.jishuzhan.net/article/1706132794742149122/3e46eb1697164852bceab97635eada88.webp)
图1.1
点击后面的install按进行安装,如图1.2所示:
![](https://file.jishuzhan.net/article/1706132794742149122/7c03c0932c009e66019d8a2fe649d5bc.webp)
图1.2
在详情页启用插件服务,如图1.3所示:
![](https://file.jishuzhan.net/article/1706132794742149122/9d675e70be007bf285d329fe801334b5.webp)
图1.3
打开默认配置,准备在后面加上ESLint配置信息:
![](https://file.jishuzhan.net/article/1706132794742149122/a5f68b9c995cbf91f645de210ec6ddb8.webp)
图1.4
点击此按钮打开默认配置文件
![](https://file.jishuzhan.net/article/1706132794742149122/f0af7b7b8ea95eb2a65fb9ad0d9d0398.webp)
图1.5
注意在原文件最后加逗号,换行紧跟ESLint配置信息,如图1.6所示:
![](https://file.jishuzhan.net/article/1706132794742149122/49ca6199db7c62a0951ae3e939ca83a8.webp)
图1.6
接配置好后,如果想要看中文检查结果信息,调整如图所示:
![](https://file.jishuzhan.net/article/1706132794742149122/58bea162506c87e3d5d69249a3e2f479.webp)
图1.7
重启VSCode,重启后打开任意文件,查看软件右下方是否存在ESLint
![](https://file.jishuzhan.net/article/1706132794742149122/b0e3cb617340cf157d21245a251e323a.webp)
图1.8
1.2 、ESLint使用流程
点击某个文件后,再点击右下方的ESLint插件,打开PROBLEMS选项,看有哪些问题需优化
![](https://file.jishuzhan.net/article/1706132794742149122/ba901a6178ec4c3df46b3d38924cd41b.webp)
如果右下方没有出来ESLint,可以尝试打开扩展中心后按如下三步操作进行后重启VSCode:
![](https://file.jishuzhan.net/article/1706132794742149122/96e92ae2d9f4714cb2ab3d09455df186.webp)
![](https://file.jishuzhan.net/article/1706132794742149122/5fa0b29d52575ca40aef6de64c542fcf.webp)