Visual Studio Code 使用介绍

今天跟大家分享Visual Studio Code 使用介绍的知识。

1 下载安装

官网下载：https://code.visualstudio.com/

汉化中文（官方下载默认为英文，英文好的小伙伴可直接跳过这步）

点击插件按钮搜索 Chinese, 在弹出的选项中选择第一个中文简体

然后右边会弹出如下图安装界面，接着点击 Install 安装

安装完毕后会有如下提示（主要提醒你安装完中文简体汉化包后一定要重启方可生效）

Vscode界面介绍（主要分为5个区域，分别是活动栏，侧边栏，编辑栏，面板栏，状态栏）

①：活动栏从上到下依次为，打开侧边栏，搜索，使用git，debug，使用插件

②：侧边栏，新建项目文件和文件夹

③：编辑栏，编写代码的区域

④：面板栏，从左到右依次为，问题，输出，调试栏，终端（terminal），最重要的是terminal，用来输入相关命令

⑤：状态栏，点击 [图片上传失败…(image-bcdf98-1559059441856)].png)[图片上传失败…(image-a50ab7-1559059441856)] 该区域可以调出面板栏

⑥：需要注意的为下图红框所示，分别表示鼠标光标所在位置和tab缩进字符，这里为缩进4个字符

新建文件和文件夹

新建文件：Ctrl+N新建文件并修改后缀即可（后缀根据所需文件来，比如.html，.css，.js等）

新建文件夹

①：首先根据需要指定一个路径（这里路径以桌面为例），然后新建一个文件夹（这里新建的文件夹为demo1）

②：鼠标点击侧边栏第二个选项，如下图

③：此时会提示你没有可以打开的文件夹，点击Open Folder按钮导入桌面新建的文件夹demo1

④：把文件夹导入后发现刚刚新建文件夹名字是小写的，现在变大写了，这个不影响，不用太在意

（右边图标从左到右为，新建文件 / 新建文件夹 / 刷新 / 折叠文件）

注：新建文件一定要修改后缀，否则默认都是text文本文件

自动保存设置

File（文件）- Preferences（首选项）- Setting （设置）然后弹出下面界面，选择User（一般会默认选中该选项），接着如下图选择afterdelay选项即可，下面有个数字1000表示1秒，这个可自行设置，表示多少秒以后自动保存

自动格式化代码

File（文件）- Preferences（首选项）- Setting （设置）

User（用户）- Text-Editor（文本编辑）- Formatng（格式化）

然后勾选下图红色框中的选项后重启Vscode即可

Vscode更换主题

File（文件）- Preferences（首选项）- Color-Theme （颜色主题）

然后会出现下图红色框的界面，此时按键盘上的上下键即可实时查看主题颜色，直接回车可选中对应主题

注：可以点击插件直接搜索 theme 下载其它非内置主题

快捷键（只列出了很小一部分常用快捷键）

Ctrl + / （单行注释）

Shift + Alt + A （多行注释）

若要取消单行或多行注释在按一次该快捷键即可

Ctrl + Shift + Enter （上方插入一行，鼠标光标在当前行的任意位置都可以直接换行到上一行）

Ctrl + Enter （下方插入一行，鼠标光标在当前行的任意位置都可以直接换行到下一行）

Alt + Shift + F （格式化代码，不需要全选中代码，直接格式化即可）

Ctrl + Shift + F （查找文件）

点击设置选择 keyboard shortcuts，右边会弹出所有快捷键目录

2 插件安装

方法一：
按F1或Ctrl+Shift+p，输入extensions，点击第一个就可以

方法二：
ctrl + P 然后输入 >ext install

方法三：
点击图中位置

3 插件合集

插件官网：https://marketplace.visualstudio.com/

每一个插件名都超链接到官网，注意查看

a.配置类插件：
1.Settings Sync
最好用的插件，没有之一，一台电脑配置好之后，其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了，使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。

2.Debugger for Chrome
从VS Code调试在Google Chrome中运行的JavaScript代码。
用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。

3.beautify
格式化代码工具
美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。

4.Atuo Rename Tag
修改 html 标签，自动帮你完成头部和尾部闭合标签的同步修改

5.中文（简体）语言包
Chinese (Simplified) Language Pack for Visual Studio Code
将界面转换为中文，对英语不好的人，非常友好。例如我。。。

6.Code Spell Checker
代码拼写检查器
一个与camelCase代码配合良好的基本拼写检查程序。
此拼写检查程序的目标是帮助捕获常见的拼写错误，同时保持误报数量较低。

7.vscode-icons
显示Visual Studio代码的图标，目前该插件已被vscode内部支持：“文件” -> “首选项” -> “文件图标主题”

8.guides
显示代码对齐辅助线，很好用

9.Rainbow Brackets
为圆括号，方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员，当然还有JavaScript和其他程序员特别有用。
效果如下：

10.Bracket Pair Colorizer
用于着色匹配括号

11.Indent-Rainbow
用四种不同颜色交替着色文本前面的缩进

12.filesize
在状态栏中显示当前文件大小，点击后还可以看到详细创建、修改时间

13.Import Cost
对引入的计算大小

14.Path Intellisense
可自动填充文件名

15.WakaTime
从您的编程活动自动生成的度量标准，见解和时间跟踪

16.GitLens
git日志查看插件
GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等

17.REST Client
REST客户端允许您直接发送HTTP请求并在Visual Studio Code中查看响应

18.Npm Intellisense
用于在 import 语句中自动填充 npm 模块
require 时的包提示（最新版的vscode已经集成此功能）

19.Azure Storage
VS Code的Azure存储扩展允许您部署静态网站并浏览Azure Blob容器，文件共享，表和队列。按照本教程从VS Code部署Web应用程序到Azure存储

20.Project Manager
它可以帮助您轻松访问项目，无论它们位于何处。不要再错过那些重要的项目了。您可以定义自己的收藏项目，或选择自动检测VSCode项目，Git，Mercurial和SVN存储库或任何文件夹。
从版本8开始，您就有了专门的项目活动栏！
以下是Project Manager提供的一些功能：
将任何项目保存为收藏夹
自动检测VSCode，GIT中，水银或SVN存放区
在相同或新窗口中打开项目
识别已删除/重命名的项目
一个状态栏标识当前项目
专门的活动栏

21.Language Support for Java™ by Red Hatredhat.java
这个插件，这个下载次数，安装就对了

22.Todo Tree
此扩展可以快速搜索（使用ripgrep）您的工作区以获取TODO和FIXME等注释标记，并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。
找到的TODO也可以在打开的文件中突出显示。

b.VS code 主题集合
1.Night Owl
一个非常适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。

2.Atom One Dark Theme
一个基于Atom的黑暗主题

3.Dracula Official
官方吸血鬼主题，博主用的就是这款，很漂亮

4.One Dark Pro
Atom标志性的One Dark主题，也是VS Code下载次数最多的主题之一！

5.Bimbo
简约而现代的神奇海洋主题

c.代码提示提示类
1.HTML Snippets
完整的HTML代码提示，包括HTML5

2.HTML CSS Support
在 html 标签上写class 智能提示css样式

3.jQuery Code Snippets
jQuery代码提示
超过130个用于JavaScript代码的jQuery代码片段。
只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。

4.HTMLHint
html代码检测，支持html5

d.语言相关
1.C＃
适用于.NET Core的轻量级开发工具。
伟大的C＃编辑支持，包括语法突出显示，智能感知，转到定义，查找所有引用等。
调试支持.NET Core（CoreCLR）。注意：不支持单声道调试。桌面CLR调试支持有限。
支持Windows，macOS和Linux上的project.json和csproj项目。

2.CodeMetrics
计算TypeScript / JavaScript文件的复杂性。

3.VUE插件
vetur 语法高亮、智能感知、Emmet、vue提示等

VueHelper snippet代码片段
ESLint 将ESLint JavaScript集成到VS代码中。代码规范提示

prettier 代码规范性插件

4. Java Extension Pack
它是一组流行的扩展，可以帮助在Visual Studio Code中编写，测试和调试Java应用程序。查看VS Code中的Java以开始使用。

关于Visual Studio Code 使用介绍，你学会了多少？欢迎在留言区评论！