最近新使用VS Code开发工具进行前端开发,采用AngularJs框架,关于开发工具的使用,参考了Visual Studio Code 如何安装插件、简单的 VSCode 插件离线安装方法 以及Code开发Angular的必备插件两篇文章,在此汇总记录一下:
目录:
一、插件安装
1.1、插件安装——在线安装步骤
1.2、插件安装——离线安装步骤
一、插件安装
1.1、插件安装——在线安装步骤:
01:在vscode中,点击左边那排按钮最下面的一个扩展按钮:

02:这里有个搜索框,可以在里面搜索插件

03:例如我们搜索"Visual Studio Code Settings Sync",这是一款能够同步自己vscode设置的插件。
输入搜索词后,左边会展示你的搜索结果,点击其中一个,在右边的界面上点击安装按钮。

04:等待数秒安装完毕

05:安装完毕后需要点击重新加载才能使它生效

06:重启vscode后,右下角的提示就是刚才的插件带来的

1.2、插件安装——离线安装步骤:
01: 打开 VSCode 插件市场网址 https://marketplace.visualstudio.com/vscode ,输入你想要的插件名称,比如这里我想要安装的是 Markdown All in One 插件

02:点击进入插件主页,点击右侧的 Download Extension 链接,得到下载下来的离线安装包,以 .vsix 为扩展名结尾

03: 把下载下来的离线安装包拷贝到 VSCode 的安装目录下的 bin 目录下,比如我的 VSCode 安装在 D:\Microsoft VS Code\,因此这里我应该拷贝到 D:\Microsoft VS Code\bin 这个目录下

04: 在vscode中,点击左边那排按钮最下面的一个扩展按钮,找到三个点···,找到 Istall from VSIX

05: 点击“Istall from VSIX”后,找到VSCode 的安装目录下的 bin 目录,选择放进去的离线安装包,点击安装

06:安装完成后,在VS Code右下角会提示是否安装情况,安装成功重启VS Code生效
二、所需插件:
Chinese:中文语言包
open in browser:在浏览器打开HTML文件(在当前HTML页面右击,选择“Open In Default Browser”)
TSLint:Typescript语法检查
Prettier:代码格式化
IntelliJ IDEA Keybindings:IDEA风格的快捷键
Angular 7 Snippets:Angular语法填充(标签)
Angular Files:生成Angular的文件模板(Component、Module、Pipe等等)
Angular Follow Selector:文件跳转(Component跳转到html、scss文件)
Angular Language Service:引用填充和跳转到定义(html中进行引用补全)
Debugger for Chrome:调试Angular代码
网友评论