ESLint的使用
2023-03-31 11:02:12 时间
一.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步规则名字, 复制到上面规范里查找违反了什么规则 / 根据第三步提示修改
小结
-
什么是ESLint?
代码检查工具
-
为什么要使用ESLint?
规范我们写代码的格式, 看着整洁 / 团队内成员风格统一
-
ESLint在哪里生效?
webpack开发服务器+ESLint配置检查
二.ESLint在VSCode中使用
目标
- 每次运行后, 才看到ESLint报错, 很累吧?
- 边写代码, VSCode就提示ESLint规则?
ESLint插件
-
下载这个插件到vscode中
2. 非常非常非常重要
一定要把脚手架工程, 作为vscode根目录, 因为eslint要使用配置文件.eslintrc
-
一定要配置插件监测的时机, 修改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
相关文章
- 为什么Kaggle不会让你成为一名出色的数据科学家
- 人工智能、大数据投身体育赛场 是搅局还是颠覆?
- 蚂蚁金服徐达峰:关于前端的那些事儿!
- std::string的Copy-on-Write:不如想象中美好
- 中数经纬林师授:如何用数据驱动企业运营创新
- React库+GraphQL服务器+Relay架构联合作战(上)
- 助你事半功倍的数据科学工具大集合
- Hadoop运行在Kubernetes平台实践
- 企业如何实现对工业大数据的预处理?
- 如何破解大数据的三大困境 直达成果?
- Gartner:有87%企业的BI和分析成熟度还很低
- 大数据技术学习,深度挖掘大数据的现状分析
- 公民数据科学家的时代已经到来
- PHP继承竟然也需要显性基因?
- 全年盘点:2018年炙手可热的10家数据分析初创公司
- PHP弱类型安全问题总结
- vscode-icons: 提高生产力的 Visual Studio Code插件
- 程序员每天都在使用的6个惊讶的软技能
- 新一代大数据与人工智能基础架构技术的发展与趋势
- 软件开发者,你为什么会讨厌用户?