为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第18天 Web前端架构师2022版

【金秋打卡】第18天 Web前端架构师2022版

2022.11.10 22:15 66浏览

课程章节: 第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')

1.png

改正错误的四种方式

有四种方法来修正错误:

  • 手动修正: 人肉修改
  • 命令修正:npm run lint
  • 修改规则:让代码符合修改之后的规则,当然也就不报错了
  • 插件修正: 配合vscode 中的eslint插件
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
4
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消