Web前端最全Vue 项目eslint 配置编程风格（VScode）(2)，面试相关知识_vue eslint开启

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包

3.Prettier

Prettier的中文意思是“漂亮的、机灵的”，也是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

Prettier具有以下几个有优点：

可配置化

支持多种语言

集成多数的编辑器

简洁的配置项

很多项目都会使用ESLint来提高代码的质量，有两种方式能够集成Prettier和ESLint，你也可以单独或同时使用它们。使用ESLint+Prettier主要是让ESLint使用Prettier规则.

**总结：**三种都可以格式化，但是又有互相没有的部分，所以可以一起共同使用。但是同时在VScode配置的时候注意冲突问题，保存自动格式化时候很容易冲突。解决冲突文章

Vue新项目配置ESLint

---

---

我们在使用Vue UI 创建项目得时候,选择Linter/Formatter的时候我们有如下选项：

• ESLint with error prevention only --仅错误预防

• ESLint + Airbnb config --Airbnb配置

• ESLint + Standard config --标准配置

• ESLint + Prettier --Prettier风格规则

Vue老项目配置ESLint

---

---

你可以使用 npm 安装 ESLint：

$ npm install eslint --save-dev

紧接着你应该设置一个配置文件：

$ ./node_modules/.bin/eslint --init

然后按照可选一步一步配置：

安装之后你就可以看到目录里面有eslint 的配置文件：

module.exports = {

env: {

browser: true,

es2021: true

},

extends: [

‘plugin:vue/essential’,

‘standard’

],

parserOptions: {

ecmaVersion: 12,

sourceType: ‘module’

},

plugins: [

‘vue’

],

rules: {

}

}

这里基本上eslint 就可以在项目里生效了，还需要自己风格配置和工具配置。

按照自己选项安装之后，可以发现安装了如下依赖：

• eslint@7.12.1

• eslint-plugin-node@11.1.0

• eslint-config-standard@16.0.0 //对应配置项的extends：‘standard’

• eslint-plugin-import@2.22.1

• eslint-plugin-vue@7.1.0 //对应配置项的extends：plugin:vue/essential

• eslint-plugin-promise@4.2.1

除了 eslint-config-standard@16.0.0还有一个eslint-plugin-vue@7.1.0，

添加这个插件可以检查.vue 文件的 template ，同时该插件提供多种规则标准集关于vue3和vue2。建议使用：Recommended，可以规范template 标签。

ESLint常用配置说明

---

---

一个环境定义了一组预定义的全局变量。

| 配置项 | 说明 |

| — | — |

| env | 运行环境 |

一个配置文件可以被基础配置中的已启用的规则继承。

| 配置项 | 说明 |

| — | — |

| extends | 继承规则，可继承规则集合 |

ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器

| 配置项 | 说明 |

| — | — |

| parserOptions | 配置制定解析器 |

ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。

| 配置项 | 说明 |

| — | — |

| plugins | 插件 |

一个环境定义了一组预定义的全局变量。

| 配置项 | 说明 |

| — | — |

| Processor | 插件可以提供处理器 |

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

“off” 或 0 - 关闭规则

“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

| 配置项 | 说明 |

| — | — |

| Rules | 规则 |

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

| 配置项 | 说明 |

| — | — |

| globals | 全局变量 |

ESLint 规则说明

---

---

我们可以根据规则配置，除了extends 规则集之外的规则补充。

具体规则描述查看官网

Rules配置最佳实践：

/*

• @Description:

• @Autor: ZY

• @Date: 2020-09-22 11:09:46

• @LastEditors: ZY

• @LastEditTime: 2020-10-24 18:14:07

*/

module.exports = {

root: true,

env: {

browser: true,

node: true

},

‘extends’: [

‘plugin:vue/strongly-recommended’, //vue 插件推荐规则

‘@vue/standard’

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

的流量控制

• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-IDKsMglW-1715864046968)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-MYlrvqlx-1715864046968)]