课程名称:Web前端架构师2022版
课程章节: 第9周 项目整体搭建
主讲老师:张轩
课程内容:
今天学习的内容包括:
3-1 使用 ESLint 添加代码规范
3-2 深入 ESLint 配置文件
课程收获:
ESLint 是一个代码检查工具,用来检查你的代码是否符合指定的规范(例如: = 的前后必须有一个空格)。
-
规范
- 行业推荐的规范; 在创建项目时,我们使用的是 JavaScript Standard Style 代码风格的规则
- 自定义的规范。你和你的团队可以自行约定一套规范
-
使用ESLint的好处在于:多人协作时代码风格统一
vue-cli工具在创建项目时提供选项,我们前面在创建项目时选中了它,所以它在本项目中是直接生效的 。
JavaScript Standard Style 规范说明
在项目创建之初我们就选中了这个规范,也就是说,我们后续所有的代码都必须要遵守这个要求,否则ESLint就会报错。
下面是这份规则中的一小部分:
- 字符串使用单引号 – 需要转义的地方除外
- 关键字后加空格 if (condition) { … }
- 函数名后加空格 function name (arg) { … }
- 坚持使用全等 === 摒弃 == 一但在需要检查 null || undefined 时可以使用 obj == null
- …
建议把https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md看一遍,然后在写的时候遇到错误就可查询解决。如果找不到的规则 再看看这里: http://www.verydoc.net/eslint/00003312.html
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
let a = 10 // 这行代码是新添加的
new Vue({
router,
render: h => h(App)
}).$mount('#app')
改正错误的四种方式
有四种方法来修正错误:
- 手动修正: 人肉修改
- 命令修正:npm run lint
- 修改规则:让代码符合修改之后的规则,当然也就不报错了
- 插件修正: 配合vscode 中的eslint插件
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦