ESLint的使用

一.ESLint介绍

目标

• 了解ESLint的作用
• 能判断ESLint的错误

ESLint是什么

ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范

• 例如: = 的前后必须有一个空格
• 例如: 函数名后面必须有空格
• 例如: await必须用用在async修饰的函数内
• 例如: ==必须转换成3个等
• ........

ESLint的好处

• 在写代码过程中, 检查你代码是否错误, 给你小黑屋提示

• ESLint可以约束团队内代码的风格统一

ESLint是法官, Standard是法律

ESLint的规范

规范文档: http://www.verydoc.net/eslint/00003312.html

规范文档2: https://standardjs.com/rules-zhcn.html

规范文档3: http://eslint.cn/docs/rules/

ESLint使用

在代码里随便多写几个回车, ESLint会跳出来刀子嘴, 豆腐心的提示你.

在webpack开发服务器终端 / 浏览器 => 小黑屋

eslint 是来帮助你的。心态要好，有错，就改。

把第4步规则名字, 复制到上面规范里查找违反了什么规则 / 根据第三步提示修改

小结

1. 什么是ESLint?

   代码检查工具

2. 为什么要使用ESLint?

   规范我们写代码的格式, 看着整洁 / 团队内成员风格统一

3. ESLint在哪里生效?

   webpack开发服务器+ESLint配置检查

二.ESLint在VSCode中使用

目标

• 每次运行后, 才看到ESLint报错, 很累吧?
• 边写代码, VSCode就提示ESLint规则?

ESLint插件

1. 下载这个插件到vscode中

   

​ 2. 非常非常非常重要

​ 一定要把脚手架工程, 作为vscode根目录, 因为eslint要使用配置文件.eslintrc

3. 一定要配置插件监测的时机, 修改ESLint插件配置

   

   不用管别的, 把红框的放在{}内即可

   "eslint.run": "onType",
   "editor.codeActionsOnSave": {
   	"source.fixAll.eslint": true
   }
   

更多的规则可以参考这里: https://www.cnblogs.com/jiaoshou/p/12218642.html

ESLint插件修复

• 随便文件里多敲击几个回车, vscode报错提示, 证明ESLint插件开始工作
• ctrl + s 报错下是否能自动修复部分问题, 可以, 证明ESLint插件开始工作

如果不工作, 看下面扩展资料

自定义规则

在.eslintrc.js文件中, 可以调整规则(团队内可以自定义自己一套)

rules是一个对象，以键值对的格式来约定规则：

• 键名是规则名
• 值是这条规则的具体说明。最常见的有off,warn,error