前端学习总结-01-VSCODE的使用.pdf

前⾔ 本⽂最新内容将在GitHub上实时更新。 VS Code 本来是前端⼈员专⽤，但由于它实在是太好⽤了，于是，各种开发⽅向的码农也正在⽤ VS Code 作为他们的主⼒编程⼯具。甚⾄是⼀些写作的同学，也把 VS Code 作为 markdown 写作⼯具。 写下这篇⽂章，是顺势⽽为。 VS Code 的介绍 VS Code 的全称是 Visual Studio Code ，是⼀款开源的、免费的、跨平台的、⾼性能的、轻量级的代 码编辑器。它在性能、语⾔⽀持、开源社区⽅⾯，都做的很不错。 编辑器与 IDE IDE 和 编辑器 是有区别的： IDE ：对代码会有较好的智能提示，同时侧重于⼯程项⽬，对项⽬的开发、调试⼯作有较好的图 像化界⾯的⽀持，因此⽐较笨重。⽐如 Eclipse 的定位就是 IDE 。 编辑器：要相对轻量许多，侧重于⽂本的编辑。⽐如 Sublime Text 的定位就是编辑器。再⽐如 Windows 系统⾃带的「记事本」就是最简单的编辑器。 需要注意的是，VS Code 的定位是 编辑器 ，⽽⾮ IDE 。但 VS Code ⼜⽐⼀般的编辑器的功能要丰富 许多。 VS Code的⼀些补充 VS Code 的使命，是让开发者在编辑器⾥拥有 IDE 那样的开发体验，⽐如代码的智能提示、语法 检查、图形化的调试⼯具、插件扩展、版本管理等。 VS Code 的源代码以MIT协议开源。 VS Code ⾃带了 TypeScript 和 Node.js 的⽀持。也就是说，你在书写 JS 和 TS 时，是⾃带智能 提示的。 有⼀点你可能不知道，VS Code 这个客户端软件是⽤ js 语⾔开发出来的（具体请⾃⾏查阅关键 字 Electron ）。有句话说得好：能⽤ js 实现的功能，最终⼀定会⽤ js 实现。 前端利器之争： VS Code 与WebStorm 前端⼩⽩最喜欢问的⼀个问题是：哪个编辑器/IDE 好⽤？是VS Code还是 WebStorm （WebStorm 其实是 IntelliJ IDEA的定制版）？我来做个对⽐： 哪个更酷：显然 VS Code 更酷。 内存占⽤情况：根据我的观察，VS Code是很占内存的（尤其是当你打开多个窗⼝的时候），但 如果你的内存条够⽤的话，使⽤起来是不会有任何卡顿的感觉的。相⽐之下，IDEA 不仅⾮常占 内存，⽽且还⾮常卡顿。 使⽤⽐例：当然是 VS Code 更胜⼀筹。先不说别的，我就拿数据说话，我⽬前所在的前端团队 有100⼈左右，绝⼤部分前端同学都在⽤VS Code ，妥妥的。 所以，如果你以后还问这个问题，那就真有些掉底了。 VS Code 的安装 VS Code 官⽹： VS Code 的安装很简单，直接去官⽹下载安装包，然后双击安装即可。 上图中，直接点击 download 下载安装即可。 VS Code快捷键 VS Code⽤得熟不熟，⾸先就看你是否会⽤快捷键。以下列出的内容，都是常⽤快捷键，⽽加粗部分 的快捷键，使⽤频率则⾮常⾼。 掌握10%的内容，⾜矣应对90%的⼯作。熟练使⽤它们，你就已经很⽜了。 移动光标 Mac快捷键 Win快捷键 作⽤ 备注 Cmd + ← Fn + ← 将光标定位到当前⾏的最左侧 很常⽤ Cmd + → Fn + → 将光标定位到当前⾏的最右侧 很常⽤ Cmd + ↑ Ctrl + Home 将光标定位到⽂章的第⼀⾏ Cmd + ↓ Ctrl + End 将光标定位到⽂章的最后⼀⾏ 根据上⾯的快捷键，我们可以举⼀反三。补充如下： 「⽅向键」：在单个字符之间移动光标 「option + 左右⽅向键」：在单词之间移动光标（很常⽤）。注：Win 快捷键是「Ctrl + 左右⽅ 向键」。 「Cmd + 左右⽅向键」：在整⾏之间移动光标（很常⽤）。注：Win 的快捷键是「Fn + 左右⽅ 向键」 「Cmd + Shift + \ 」：在代码块之间移动光标。 删除操