前言
Visual Studio Code（简称VS Code）是一个由微软开发，同时支持Windows、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，它支持测试，并内置了 Git 版本控制功能，同时也具有开发环境功能，例如代码补全（类似于 IntelliSense）、代码片段和代码重构等。该编辑器支持用户个性化配置，例如改变主题颜色、键盘快捷方式等各种属性和参数，同时还在编辑器中内置了扩展程序管理的功能。
Java 开发习惯使用 IDEA，前期我也是继续使用 IDEA 来开发 Angular，不过编写 Html 时，对于代码的提示不够智能。虽然 webstorm 和 IDEA 很相似，但是 VsCode 比 webstorm 更轻量级，所以就转而使用 VsCode。
以下内容记录除此使用 VsCode 的过程，包括
主题
作为一个非前端开发人员，觉得 Atom One Dark Theme 这个主题界面确实不错，网上风评也不错，深受前端大佬们的喜爱。
1、点击扩展商店搜索你要找的插件名称如Atom One Dark Theme，点击安装。
2、使用刚才下载的主题
最后的效果图如下所示：
再推荐一款主题： VSCode simpler Icons with Angular ，效果如下：
插件
由于工作需要，在网上搜索了前端大佬推荐的插件，大致如下：
Auto Close Tag：匹配标签，关闭对应的标签。对于HTML/XML很实用。Auto Rename Tag：改变标签的时候同时改动开闭合标签；对于HTML/XML很实用。HTML CSS Support： 这个也是HTML必备插件之一。HTML Snippets： 提供对HTML语言的支持CSS Peek：html和css中关联css的跳转Code Runner：代码编译运行看结果，支持众多语言Git History：查看git分支提交日志的插件Git History Diff：寻找每一个git分支上面提交过的节点，并可以对比差异性。Path Autocomplete：路径智能补全插件。Path Intellisense： 路径智能提示插件。beautify： 良好的拓展性，可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用；但是react工程的jsx文件用beautify插件格式化会乱掉，建议不要用Chinese (Simplified) Language Pack for Visual Studio Code： 适用于 VS Code 的中文（简体）语言包。fileheader：新建文件作者注释
接下来是适用 Angular 开发的插件：
Debugger for Chrome ： 只需要在代码编辑器中设置断点，在浏览器中会在断点处暂停
npm Intellisense: 支持在代码中导入npm模块（require方法）时的自动补全
Angular Extension pack： 集成了很多提升Angular开发效率的插件
TSLint：TS语法检测
其次习惯了 IDEA 的快捷键，这里也可以安装相关插件。
IntelliJ IDEA Keybindings：IDEA风格的快捷键
快捷键
VSCode的快捷键有很多，需要具体的请仔细参考 VS Code => 左下角设置按钮 => 键盘快捷方式
由于在上一步骤安装了 IDEA 风格快捷键的插件，所以使用起来都很顺手，不过还是有个别快捷键需要调整一下。
我们可以自定义快捷键，在keybindings.json里面设置覆盖即可。该文件具体路径位于：
C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json
不过关于 command 属性的值需要确认好再去修改。
在 VsCode 中全局命令使用 ctrl+shift+p 快捷键 ，如下图所示：
以下内容按照个人使用习惯来配置：
Ctrl+Y ：删除当前行，还有个类似的快捷键 Ctrl+X ，不过后者无法一次性删除多行，个人习惯使用 Ctrl+D来删除。
Ctrl+D ：复制行，个人习惯使用 Ctrl+Alt+Down。
Alt+逗号：移动到当前代码首部。
Alt+句号：移动到当前代码尾部。
关于后面两个快捷键，如果感兴趣的朋友可以按照自己的习惯进行配置，不一定非要使用 Home/End 按键来实现。具体配置过程如下图所示：
问题记录
Vs Code打开新的文件会覆盖窗口中的,怎么改
这是因为你单击文件名的缘故，这个是“预览模式”，所以再单击其他文件时，会覆盖当前打开的文件。
如果你要每次都打开新tab，那就双击文件名好了。这个逻辑和sublime是一样的。
补充：
预览模式是现在各类编辑器的默认功能，如果你实在不喜欢，可以关掉的，看下面：
ctrl+shift+p，在搜索框中输入 Settings，如下所示：
给你配置settings.json里加一条：
// 控制打开的编辑器是否为预览编辑器。预览编辑器在被固定 (例如，通过双击或编辑) 前可重用，其字体样式为斜体。
"workbench.editor.enablePreview": true,
改为
"workbench.editor.enablePreview": false,
文件夹按照层级结构显示
左下角点击设置，在搜索框输入：compact，取消勾选即可。
如何快速打开项目
进入到项目目录下，然后 Shift+鼠标右键打开命令行窗口，输入 code+空格+. 即可。
文章评论