邂逅前端开发

软件的认识

常见的软件

软件的定义

专业的软件定义：一系列按照特定顺序组织的计算机数据和指令，是电脑的非有型部分。
软件开发是什么呢？就是告诉计算机一系列的指令，这些指令也称之为程序。
开发软件的这部分人就称之为软件开发工程师，也称之为程序员。

完善的软件系统

前端开发工程师

开发系统中各个环节的不同部分都属于软件开发：
- 这些开发者我们称之为软件开发工程师；
- 开发者、程序员、码农、IT 民工等等；
按照职能的不同也可以划分两类：
- 后端（Back-end）开发，称之为后端开发工程师；
- 前端（Front-end）开发，称之为前端开发工程师；
前端开发工程师：
- 主要负责的：Web（网站、后台管理系统、手机 H5）、小程序端；
- 也可以做：移动端（Uniapp、React Native）、桌面端（Electron）、服务器开发（Node.js）；

前端行业发展

为什么要聊这个话题呢？
- 时代的一粒灰，落在个人头上，就是一座山；
- 如何行业已经停滞，甚至是倒退，没有需求，那么你如何努力也改变不了现状；
技术角度：
- 新框架（Ember.js、Preact.js）、框架更新迭代（vue3、react18）、新工具（Vite）、新模式（工程化、低代码、微前端）层出不穷；
市场需求：
- 人才需求大、薪资高；

前端技术发展线路

初级程序员（薪资 6k-10k，1~2 年）
- 写一些简单的业务，负责项目某些模块的开发、维护；
- 遇到很多问题不知道如何处理，需要查询资料或者交流后可以解决；
- 代码通常写的杂乱无章，能用就行！
中级程序员（薪资 10k-20k，2~4 年）
- 可以独立负责中小型项目，负责公司项目核心业务的开发、维护；
- 遇到大多数问题可以自行查到解决方案，有一定的自学能力，通过官网文档可以自学；
- 代码质量较高，遵守代码规范，并且会对组内其他人的代码有要求；
高级程序员（薪资 20k-50k，4~6 年）
- 独立负责中大型项目，可以为公司项目搭建架构，创建内部的脚手架，公司内部的 UI 框架；
- 可以读懂框架源码，并且从一些开源框架中借鉴优秀的设计、架构、思想；
- 公司的核心员工，具备可替代性，成为公司技术不可或缺的一部分；
系统架构师（50k~）
- 可以对大型项目进行系统架构，不再局限于某个领域（前端、后端?）或者某项技术（JavaScript、Java、 C++?）；
- 对技术领域现有技术方案进行评估，对不同的场景给出对应的解决方案；
- 确定项目最终方案，并且对整个项目进行“核心架构”（包括完成核心架构实现的能力）；
- 保证项目的各个环节有序进行，包括项目的高性能、高可用、可扩展能力；
资深技术专家（50k~）
- 专注于某一个特定领域
  - 比如前端包括不限于对框架源码、node、js 引擎进行定制化需求、优化；
  - 比如后端包括不仅限于 JVM、线程池、SQL 调试、优化；
  - 比如可以主导公司项目某些特定领域技术的落地，类似流媒体、即时通信技术等；
- 某些人在行业内有一定的影响力，是某一块技术领域的 Top 人物；

认识网页和网站

什么是网页

网页的专业术语叫做 Web Page；
打开浏览器查看到的页面，是网络中的一“页”, 通常是 HTML 格式的文件，它要通过浏览器来阅读；
网页的内容可以非常丰富：包括文字、链接、图片、音乐、视频等等
网页是构成网站的基本元素，网页通常由图片、链接、文字、声音、视频等元素组成。
通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为 HTML 文件。
.htm 和 .html 扩展名区别 :
- 因历史遗留问题，Win95\Win98 系统的文件拓展名不能超过 3 字符，所以使用 .htm
- 但在 windows 后缀长度可以大于 3 位，所以 windows 下无所谓.htm与 .html，.html 是为长文件的格式命名的
- 所以 .htm 是为了兼容过去的 DOS 命名格式存在的
- 现在统一使用 .html

什么是网站

网站是什么呢？
- 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网站是由多个网页组成的；
- 通常一个网站由 N 个网页组成（- >= 1）；

网页的显示过程

用户角度

用户在浏览器输入一个网站；
浏览器会找到对应的服务器地址，请求静态资源（可以存放在世界上任何一个地方）；
服务器返回静态资源给浏览器；
浏览器对静态资源进行解析和展示；

前端工程师角度

网页是由网页元素组成的，这些元素是利用 html 标签描述出来，然后通过浏览器解析来显示给用户的。
- 开发项目（HTML/CSS/JavaScript/Vue/React）
- 打包、部署项目到服务器里面

HTML/XHTML/H5 区别

HTML 语法非常宽松, 容错性强;
XHTML 更为严格,它要求标签必须小写、标签必须严格闭合、标签中的属性必须使用引号引起等等;
HTML5 是 HTML 的下一个版本, 所以除了非常宽松,容错性强以外,还增加许多新的特性

服务器

什么是服务器

我们日常生活接触到的基本都属于客户端、前端的内容：
- 比如浏览器、微信、QQ、小程序；
我们知道自己的手机并不可能存放哪些多的数据和资源：
- 比如你用《网易云听音乐》，音乐数据大部分都是存在“服务器”中的；
那么服务到底是什么呢？
- 服务器本质上也是一台类似于你电脑一样的主机；
- 但是这个主机有几个特点：
  - 二十四小时不关机的（稳定运行）；
  - 没有显示器的；
  - 一般装的是 Linux 操作系统（比如 centos）；
- 服务器是专门用于存储数据电脑，访问者可以访问服务器上存储的资源
- 服务器一旦关机，访问者就无法访问

云服务器

那么我以后到公司是不是就看得见服务器了呢？
- 目前公司大部分用的是云服务器（比如阿里云、腾讯云、华为云）；

浏览器

浏览器的作用

我们已经明确知道了网页的组成部分：HTML + CSS + JavaScript。
那么这些看起来枯燥的代码，是如何被渲染成多彩的网页呢？
- 我们知道是通过浏览器来完成；

常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari 和 Opera等。平时称为五大浏览器。

查看浏览器市场份额：https://tongji.baidu.com/research/site?source=index

浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为“浏览器内核”
- 负责解析网页语法，并渲染（显示）网页
常见的国内的浏览器也有很多：

安装最多和使用最广泛的浏览器：Chrome 浏览器

常见的浏览器内核

浏览器最核心的部分其实是 “浏览器内核”；
浏览器内核（渲染引擎）： 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。
- Trident （三叉戟）：IE、360 安全浏览器、搜狗高速浏览器、百度浏览器、UC 浏览器；
- Gecko（壁虎）：Mozilla Firefox；
- Presto（急板乐曲）-> Blink （眨眼）：Opera
- Webkit ：Safari、360 极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
- Webkit -> Blink ：Google Chrome

不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同。

浏览器的访问过程

01 当我们利用浏览器访问网页时,其实是有真实的物理文件传输的.
- 浏览会先将网页上的内容缓存到本地文件夹中,然后再渲染出来呈现给用户查看
02 平时我们在上网时会感觉到第二次访问网页会比第一次访问网页要快,就是因为第一次访问时已经将这个网页上的信息缓存到了本地
03 通过观察我们还发现缓存文件夹中除了缓存图片以外还缓存了一些例如.js .css .html等文件
- 一个网页不是一个文件,而是一堆文件.
- 网页越复杂,那么组成这个网页的文件就越多

浏览器请求数据的过程

01 在浏览器地址栏输入 URL 地址,按下回车后, 浏览器会根据输入的 URL 地址发送请求报文
02 服务器接收到请求报文，会对请求报文进行处理
03 服务器将处理完的结果通过响应报文返回给浏览器
04 浏览器解析服务器返回的结果，将结果显示出来

统一资源定位符 URL

什么是 URL

我们在浏览器的地址栏中输入的地址其实就是 URL
- URL 全称 Uniform Resource Locator (统一资源定位符)
- 通俗点说：URL 无非就是一个给定的独特资源在 Web 上的地址。
  - 理论上说，每个有效的 URL 都指向一个唯一的资源；
  - 这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等；

URL 的格式

URL 的标准格式如下：
- [协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

比如 :
- 127.0.0.1/index.html （浏览器会自动补全 http: 和：80端口,默认是 80 端口）
- http://127.0.0.1/index.html （浏览器会自动补全：80）
- http://127.0.0.1:80/index.html （完整格式）
- 协议类型://ip 地址:端口号/资源路径/资源名称

URL 和 URI 的区别

和 URI 的区别：
- URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源。；
- URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号；
URI 在某一个规则下能把一个资源独一无二的识别出来。
- URL 作为一个网络 Web 资源的地址，可以唯一将一个资源识别出来，所以 URL 是一个 URI；
- 所以 URL 是 URI 的一个子集；
- 但是 URI 并不一定是 URL

URL 拆分

网络协议类型 http://
服务器 IP 地址 127.0.0.1
- 由于 IP 地址全都是数字，没有任何的含义，比较难以记忆。所以在访问网页时最常见的不是 IP 地址而是“域名”（一串有含义的字符）
- 例如： http://www.baidu.com 和 http://111.13.100.92:80/
服务器端口号 :80
资源路径 : 网页在服务器上的路径
- 资源名称 index.html

URL 各部分的作用

服务器 IP 地址 和 服务器端口号 它们两的作用：
- 告诉浏览器要去什么地方才能找到对应的服务器，也就是告诉浏览器服务器的详细地址
- 服务器 IP 地址相当于现实生活中的地址；例如：广州市天河区棠安苑
- 服务器端口号相当于现实生活中的门牌号码；例如： 9 栋 909 室
- 那么如果将地址和门牌号码结合在一起，就是我的详细地址
资源名称的作用：
- 告诉服务器我需要获取哪一个文件
资源名称
- 需要访问的文件名称

HTTP 协议

什么是 HTTP 协议

HTTP 是 Hypertext Transfer Protocol 的缩写, 超文本传输协议
什么是协议
- 在现实生活中有很多的协议, 例如租房协议/买卖协议/离婚协议
- 无论是什么协议他们都是一个共同点, 就是用来规范/约束某一类事物
沟通问题
- 沟通最常见的问题就是语言不通, 例如中国人和美国人沟通, 一个人说中文, 一个人说英文, 如果两个人都不懂中文或者英文, 那么就会出现沟通问题
- 如果要想解决沟通问题, 需要先拟定规定, 两个人都说中文, 或者两个人都说英文, 或者请一个既懂中文又懂英文的翻译

HTTP 协议的作用

HTTP 协议是用来规范/约束哪一类事物
- 浏览器访问网页其实就是去服务器请求数据, 所以浏览器需要和服务器沟通, 所以也会存在沟通问题
- HTTP 协议就相当于我们让两个人都说中文或者都说英文一样, 就是提前规范两个人之间如何沟通, HTTP 协议也就是规范/约束浏览器和服务器之间如何沟通

SEO 优化

搜索引擎优化（英语：search engine optimization，缩写为 SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式。

后续还会讲解 SPA 以及 SSR 相关的概念 , 它们也有 SEO、首屏渲染速度有关；

计算机中的进制

认识进制

进制的概念：
- 维基百科：进位制是一种记数方式，亦称进位计数法或位值计数法。
- 通俗理解：当数字达到某个值时，进一位(比如从 1 位变成 2 位)。
按照进制的概念，来理解一下十进制：
- 当数字到 9 的时候，用一位已经表示不了了，那么就进一位变成 2 位
按照上面的来理解，二进制、八进制、十六进制：
- 二进制：当数字到 1 的时候，用一位已经表示不了了，那么就进一位。
- 八进制：当数字到 7 的时候，用一位已经表示不了了，那么就进一位。
- 十六进制：等等，用一位如何表示十六个数字呢？a(10)、b(11)、c(12) 、 d(13) 、 e(14) 、 f(15)

计算机中的进制

如何表示二进制、八进制、十六进制?
- 二进制（0b 开头, binary）：其中的数字由 0、1 组成，可以回顾之前学习过的机器语言。
- 八进制（0o 开头, Octonary）：其中的数字由 0~7 组成。
- 十六进制（0x 开头, hexadecimal）：其中的数字由 0~9 和字母 a-f 组成（大小写都可以）
十进制 or 二进制:
- 虽然计算机更喜欢二进制, 但是编程中我们还是以十进制为主.
- 因为高级编程语言的目的就是更加接近自然语言, 让我们人类更容易理解.

进制之间的转换(补充)

开发工具

开发必备软件

Chrome 浏览器：开发必备浏览器
- https://www.google.cn/chrome/index.html
VSCode 编辑器：开发推荐编辑器（编写代码）
- https://code.visualstudio.com/
Xmind Zen 思维导图：思维导图笔记
- https://www.xmind.cn/
Typora：markdown 笔记软件

VSCode 的安装

VSCode 编辑器下载-安装：https://code.visualstudio.com/
安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）
- 中文插件：Chinese
- 颜色主题：atom one dark
- 文件夹图标：VSCode Great Icons
- 在浏览器中打开网页：open in browser、Live Sever
- 自动重命名标签：auto rename tag
VSCode 的配置：
- Auto Save 自动保存
- Font Size 修改代码字体大小
- Word Wrap 代码自动换行
- Render Whitespace 空格的渲染方式(个人推荐)
- Tab Size 代码缩进
  - 推荐 2 个空格（公司开发项目基本都是 2 个空格）

常用 VScode 插件

Atom One Dark Theme : 编辑器的颜色主题
Auto Rename Tag : 自动关闭标签，在修改开始标记后，将自动插入结束标记
background-cover : 修改 VScode 背景
Beautify css/sass/scss/less : 美化 css/sass/scss/less
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code : 编辑器语言设置为简体中文
Code Runner : 快速运行调试代码
CSS Peek : 快速定位 CSS
Easy LESS : 自动编译 Less 生成 CSS
EditorConfig for VS Code : 自动格式化代码的插件
Guides : 缩进参考线
Live Server : 实时加载功能的小型服务器
open in browser : 在浏览器打开
Open In Default Browser : 在默认浏览器打开
Polacode : 代码截图生成图片
Prettier : 前端代码格式化
px to rem & rpx & vw (cssrem) : px 单位转 rem
Vetur : .vue 文件语法高亮
VSCode Great Icons : VScode 目录图标
Vue 3 Snippets : 快速生成 Vue3 代码片段
Vue VSCode Snippets : 生成 Vue 基本模板
ESlint : 代码检测工具
Error Lens : 编码时提示错误信息

常用代码片段

生成代码片段站点

站点 : https://snippet-generator.app/
- 用于生成 VScode 代码片段

示例与解析

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>${TM_FILENAME_BASE}</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="root">$0</div>
    <script>
      Vue.config.productionTip = false
      const vm = new Vue({
        el: '#root',
        data: {
          $1, //光标出现的第一个位置
        },
      })
    </script>
  </body>
</html>

注意这里的$1,$2……$0，这是你代码快捷生成之后鼠标光标的所在位置，光标会首先定位在$1,按 Tab 键切换到$2 的位置，以此类推，光标最后会定位在$0 的位置。
还有其他语法，在这里一并讲解：
占位符：
- 占位符是带有值的制表符，如将插入并选择占位符文本，以便可以轻松更改。说白了占位符${1:foo}就是在$1的基础上，光标跳到$1位置的同时会自动生成并选中 foo，同样按 Tab 键切换到$2的位置。占位符可以嵌套，如。${1:foo} ${1:another ${2:placeholder}}
选择
- 占位符可以作为有选择的值。语法是以逗号分隔的值的枚举，用竖线字符括起来，例如。插入代码段并选择占位符时，选项将提示用户选取其中一个值。${1|one,two,three|}
变量
- 插入变量的值。如果未设置变量，则插入其默认值或空字符串。当变量未知（即未定义其名称）时，将插入变量的名称并将其转换为占位符。$name ${name:default}
- 可以使用以下变量：
  - TM_SELECTED_TEXT当前选定的文本或空字符串
  - TM_CURRENT_LINE当前行的内容
  - TM_CURRENT_WORD光标下单词的内容或空字符串
  - TM_LINE_INDEX基于零索引的行号
  - TM_LINE_NUMBER基于一个索引的行号
  - TM_FILENAME当前文档的文件名
  - TM_FILENAME_BASE不带扩展名的当前文档的文件名（比如这里你在用户代码片段中写了${TM_FILENAME_BASE}，在自动生成的代码里就会在这个位置自动填充上你的文件的不含扩展名的文件名）
  - TM_DIRECTORY当前文档的目录
  - TM_FILEPATH当前文档的完整文件路径
  - RELATIVE_FILEPATH当前文档的相对（相对于打开的工作空间或文件夹）文件路径
  - CLIPBOARD剪贴板的内容
  - WORKSPACE_NAME打开的工作区或文件夹的名称
  - WORKSPACE_FOLDER打开的工作区或文件夹的路径
- 要插入当前日期和时间：
  - CURRENT_YEAR本年度
  - CURRENT_YEAR_SHORT本年度的最后两位数
  - CURRENT_MONTH以两位数字表示的月份（例如”02”）
  - CURRENT_MONTH_NAME月份的全名（例如”七月”）
  - CURRENT_MONTH_NAME_SHORT月份的短名称（例如”Jul”）
  - CURRENT_DATE以两位数字表示的月份中的某一天（例如”08”）
  - CURRENT_DAY_NAME日期的名称（例如”星期一”）
  - CURRENT_DAY_NAME_SHORT日期的短名称（例如”星期一”）
  - CURRENT_HOUR24 小时制格式的当前小时
  - CURRENT_MINUTE当前分钟为两位数
  - CURRENT_SECOND当前第二位为两位数
  - CURRENT_SECONDS_UNIX自 Unix 纪元以来的秒数
- 对于插入随机值：
  - RANDOM6 个随机的 Base-10 数字
  - RANDOM_HEX6 个随机的 16 位基本数字
  - UUIDA 版本 4 UUID

Chrome 浏览器开发者工具

打开 Chrome 调试工具：
- 方式一：右键 – 检查
- 方式二：快捷键 – F12

其他技巧：
- 快捷键：ctrl++ 可以调整页面或者调试工具的字体大小；
- 可以通过删除某些元素来查看网页结构;
- 可以通过增删 css 来调试网页样式;

prettier 插件常用配置规则

{
  // 使能每一种语言默认格式化规则
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  /*  prettier的配置 */
  "prettier.printWidth": 300, // 超过最大值换行
  "prettier.tabWidth": 4, // 缩进字节数
  "prettier.useTabs": false, // 缩进不使用tab，使用空格
  "prettier.semi": true, // 句尾添加分号
  // 使用单引号代替双引号,false 不替换
  "prettier.singleQuote": false,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.proseWrap": "preserve",
  //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
  "prettier.arrowParens": "avoid",
  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.bracketSpacing": true,
  // 不格式化vue文件，vue文件的格式化单独设置
  "prettier.disableLanguages": ["vue"],
  // 结尾是 \n \r \n\r auto
  "prettier.endOfLine": "auto",
  //不让prettier使用eslint的代码格式进行校验
  "prettier.eslintIntegration": false,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.ignorePath": ".prettierignore",
  // 在jsx中把'>' 是否单独放一行
  "prettier.jsxBracketSameLine": false,
  // 在jsx中使用单引号代替双引号
  "prettier.jsxSingleQuote": false,
  // 格式化的解析器，默认是babylon
  "prettier.parser": "babylon",
  // Require a 'prettierconfig' to format prettier
  "prettier.requireConfig": false,
  //不让prettier使用stylelint的代码格式进行校验
  "prettier.stylelintIntegration": false,
  // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.trailingComma": "es5",
  // 不让prettier使用tslint的代码格式进行校验
  "prettier.tslintIntegration": false
}

ESlint 常用配置规则

"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明（变量或函数）
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this，只能用在构造器，类，对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数（如果没有引用外部变量不形成闭包就可以）
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例，new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象，比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++，--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块，使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组， [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var，用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with

"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格，换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super，派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置，换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格，规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用，首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN，只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件