由于一直使用 VS 做 C# 开发。所以开发 Angular 也就使用 VSCode 了。下面就开始将 VSCode 配置成自己的 IDE
# 1、安装 VSCode
在官网下载即可:https://code.visualstudio.com
VSCode 常用快捷
| 快捷键 | 用途 |
|---|---|
| Ctrl+P | 直接输入文件名，跳转到文件。下输入 > 可以进入 Ctrl+Shift+P 模式 |
| Ctrl+Shift+P | 打开命令面板 |
| Shift+F12 | 找到所有的引用 |
| F2 | 批量重命名（重构的时候使用） |
| F11 | 全屏 |
| Ctrl + G | 转到行... Go to Line... |
| Alt+ ←/→ | 转到上/下一个刚操作过的文件 |
| Ctrl+Home / End | 滚动到顶部/底部 Scroll to top/bottom |
| F12 | 跳转到定义 |
| Ctrl+K R | 显示资源管理器中的活动文件 Reveal active file in Explorer |
| Alt+O | 跳转到 HTML（angular2-switcher） |
| Alt+U | 跳转到 TS（angular2-switcher） |
| Alt+I | 跳转到 CSS（angular2-switcher） |
| Alt+P | 跳转到 Spec（angular2-switcher） |
| Ctrl+` | 显示集成终端 Show integrated terminal |
| Ctrl+Shift+` | 创建新终端 Create new terminal |
| Ctrl+Shift+C | 复制选定 Copy selection |
# 2、Angular 常用插件
| 插件名称 | 用途 |
|---|---|
| Angular Files | 生成 Angular 的文件模板（Component、Module、Pipe 等等） |
| Angular Follow Selector | 组件标签定位组件文件；或者样式，定位样式所在文件 |
| Angular Language Service | 引用填充和跳转到定义（html 中进行引用补全） |
| Debugger for Chrome | 调试 Angular 代码 |
| angular2-switcher | 文件跳转（Component 跳转到 html、scss 文件） |
# 3、前端开发提升效率常用插件
| 插件名称 | 用途 |
|---|---|
| *Prettier - Code formatter | 自动格式化 |
| *TSLint | Typescript 语法检查 |
| Auto Rename Tag | 支持快速重命名 HTML 标签 |
| Live Sass Compiler | 支持 Sass 实时编译成 CSS |
| CSS Peek | 支持在 HMTL 中跳转到 CSS |
| HTML CSS Support | 在 HTML 中智能提示 CSS 类名 |
| *Bracket Pair Colorizer 2 | 有助于我们快速定位代码块 |
| *javascript console utils | 快速生成 console.log() |
| SCSS Everywhere | |
| *Better Comments | TODO、*、!、? 标注注释 |
| *Todo Tree | 显示 TODO 树 |
| Quokka.js | js/ts 快速输出 console.log()内容 |
| *Faker | 快速的插入用例数据 |
| Path Intellisense | 文件路径补全 |
# 4、安装编程字体 Fira Code
在系统中安装 Fira 字体后，在settings.json中添加如下配置即可。
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",//添加上FiraCode字体
"editor.fontLigatures": true, //开启连体字
1
2
2
GitHub 官方网址：https://github.com/tonsky/FiraCode