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

课程名称：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插件