对于Web开发最棒的22个Visual Studio Code插件,1307页字节跳动前端面试全套真题解析火了

31 阅读9分钟

总结

根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。

这里分享一些前端学习笔记:

  • html5 / css3 学习笔记

  • JavaScript 学习笔记

  • Vue 学习笔记

开源分享:docs.qq.com/doc/DSmRnRG…

1. Debugger for chrome

=========================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

相信我,调试JavaScript不仅仅是写 console.log() (虽然这种方式应用最多)。Chrome内置了一些功能,可以拥有更好的调试体验。这个插件能让你在vs code里使用所有(或者几乎所有)这些调试功能。

如果你想了解更多,你可以阅读:

Debugging JavaScript in Chrome and Visual Studio Code.

2. Javascript (ES6) Code Snippets

====================================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

我喜欢Snippets插件。我觉得没有必要反复输入同一段代码。这个插件为你提供了流行的(ES6)JavaScript代码片段。

注…如果你没有用es6javascript特性——赶紧用起来吧!

3. ESLint

============================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

是否想编写更好的代码? 是否需要整个团队使用一致的格式? 安装ESLint。 这个插件可以配置为自动设置代码格式以及带有错误或警告的“yell(提示)”。 VS Code通过合适的配置,可以向你展示这些提示。

4. Live server

=================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

在代码编辑器中进行更改,切换到浏览器,然后刷新以查看更改。 那是开发人员无休止的循环,但是如果你在进行更改时浏览器会自动刷新会怎样呢? 这就是Live Server的用武之地!

它还在本地服务器上运行你的应用程序。 有些事情只有在服务器里运行应用程序时才能测试,因此这也是个利好之处。

5. Bracket Pair Colorizor

============================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

括号阻止开发人员活着的祸害。 使用大量嵌套代码,几乎不可能确定哪些括号彼此匹配。 Bracket Pair Colorizor(如你所料)为括号匹配颜色,以使代码更具可读性。 相信我,你想要!

6. Auto Rename Tag

=====================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

是否需要重命名HTML中的元素? 好了,使用“Auto Rename Tag”,你只需要重命名开始或结束标签,其他标签将自动重命名。 简单但有效!

7. Quokka

============================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

需要一个快速的地方来测试一些JavaScript吗? 我曾经习惯在Chrome中打开控制台,然后在其中输入一些代码,但缺点很多。 Quokka在VS Code中为你提供了一个JavaScript(和TypeScript)暂存器。 这意味着你可以在自己喜欢的编辑器中测试一段代码!

8. Path Intellisense

=======================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

在大型项目中,记住特定的文件名和文件所在的目录可能会很麻烦。 此插件将为你提供智能提示。 当你开始在引号中输入路径时,你将看到目录和文件名的智能提示。 这样可以避免你在文件浏览中花费大量时间:)

9. Project Manager

=====================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

我讨厌的一件事是在VS Code中的项目之间切换。 每次我必须打开文件资源管理器并在计算机上找到项目时。 但这随Project Manager 的应用而改变。 使用此插件,你可以在项目的侧边菜单中打开一个额外的菜单。 你可以在项目之间快速切换,保存收藏夹或从文件系统自动检测Git项目。

如果你开发多个不同的项目,那么这是保持组织状态和提高效率的好方法。

10. Editor Config

====================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

Editor Config是少数几种编码样式的标准,在主要文本编辑器/ IDE中都得到支持。 运行方式如下如下。 你将配置文件保存在你的编辑器支持的存储库中。 在这种情况下,你必须为VS Code添加扩展名,以使其遵守这些配置文件。 设置起来超级容易,非常适合团队项目。

11. Sublime Text Keymap

==========================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

你是Sublime的狂热用户,不愿意切换到VS Code吗? 通过更改所有快捷方式以匹配Sublime的快捷方式,此扩展程序将使你切换得没有任何感知。 现在,你有什么理由不进行切换?

12. Browser Preview

======================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

我喜欢 Live Server extension 扩展(上文提到的),但就便利性而言,这个扩展更进一步。它为您提供了VS Code内部的实时重新加载预览。 无需再查看浏览器即可看到很小的变化!

13. Git Lens

===============================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

git插件一大堆,但是其中一个功能最强大,最多。 您会得到有关警告的信息,行和文件的历史记录,提交搜索等等。 如果你需要有关Git工作流程的帮助,请从这个插件开始!

14. Polacode

===============================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

你知道你在博客和推特中看到的那些漂亮的代码截图吗? 好吧,很可能它们来自Polacode。 使用起来超级简单。 将一段代码复制到剪贴板,打开扩展名,粘贴代码,然后单击保存图像!

15. Prettier

===============================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

不要花时间格式化代码…它做了。 前面,我提到了ESLint,它提供格式化和检查。 如果你不需要棉绒检查,那么选择Prettier。 它非常容易设置,可以配置为在保存时自动格式化代码。

16. Better Comments

======================================================================================

marketplace.visualstudio.com/items?itemN…

在这里插入图片描述

此插件对各种类型的注释进行不同颜色标记,以赋予它们不同的含义,并在其余代码中突出。 我一直在用这个来做提示。 很难忽略一个橙色的大提示,告诉我我有一些未完成的工作要做。

还有用于问题,警报和强调的颜色代码。 你也可以添加自己定义的!

数据结构与算法

这一块在笔试、面试的代码题中考核较多,其中常考的数据结构主要有:数组、链表、队列、栈、Set、Map、哈希表等,不同数据结构有不同的方法以及储存原理,这些算是技术岗的必备知识。算法部分主要分为两大块,排序算法与一些其他算法题

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

排序算法根据考频高低主要有:快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种,这类考核点要么是算法的时间、空间复杂度、稳定度,要么是直接手写代码,故在理解算法原理的同时,对JS语言版的排序算法代码也要加强记忆。

  • 二叉树层序遍历
  • B 树的特性,B 树和 B+树的区别
  • 尾递归
  • 如何写一个大数阶乘?递归的方法会出现什么问题?
  • 把多维数组变成一维数组的方法
  • 知道的排序算法 说一下冒泡快排的原理
  • Heap 排序方法的原理?复杂度?
  • 几种常见的排序算法,手写
  • 数组的去重,尽可能写出多个方法
  • 如果有一个大的数组,都是整型,怎么找出最大的前 10 个数
  • 知道数据结构里面的常见的数据结构
  • 找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2
  • 合并两个有序数组
  • 给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)