使用VScode开发Angular

前言主题插件快捷键问题记录Vs Code打开新的文件会覆盖窗口中的,怎么改文件夹按照层级结构显示如何快速打开项目参考文献

前言

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 这个主题界面确实不错，网上风评也不错，深受前端大佬们的喜好。

一、点击扩展商店搜索你要找的插件名称如Atom One Dark Theme，点击安装。

二、使用刚才下载的主题

最后的效果图以下所示：

再推荐一款主题： 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风格的快捷键

快捷键

VS Code的快捷键有不少，须要具体的请仔细参考 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+空格+. 便可。

参考文献

Angular 开发技巧

强大的 VS Code

10 种 JavaScript 开发者必备的 VS Code 插件

VS Code折腾记 - (2) 快捷键大全，没有更全