手记

【金秋打卡】第18天 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插件
0人推荐
随时随地看视频
慕课网APP