教程基础使用和自定义设置

　　visualstudiocode是一款轻量编辑器，采取了和VS相同的UI界面，搭配合适的aclasstaghrefwiki10606IQESsxq1。html插件a可以优化前端开发的体验，今天为大家介绍一下visualstudiocode的使用技巧，大家可以学习下。
　　工具材料
　　visualstudiocode
　　Windows系统
　　基础教程
　　01：hr因为软件下载安装之后，是英文版，可以先将其汉化，变成中文版，更方便开发。点击插件按钮搜索Chinese，在弹出的选项中选择第一个中文简体。
　　02：hr右边会弹出如下图安装界面，接着点击【Install】安装。安装完毕后会有如下提示（主要提醒你安装完中文简体汉化包后一定要重启方可生效）。
　　03：hrVscode界面介绍：主要分为5个区域，依次是活动栏、侧边栏、编辑栏、面板栏、状态栏。
　　04：hr1。活动栏从上到下依次为，打开侧边栏、搜索、使用git、debug、使用插件；
　　2。侧边栏，新建项目文件和文件夹；
　　3。编辑栏，编写代码的区域；
　　4。面板栏，从左到右依次为：问题、输出、调试栏、终端（terminal）、最重要的是terminal，下图一所示，用来输入相关命令；
　　5。状态栏，点击可以调出面板栏；
　　6。需要注意的为下图二红框所示，分别表示鼠标光标所在位置和tab缩进字符，这里为缩进4个字符。
　　05：hr新建文件和文件夹
　　新建文件：CtrlN新建文件并修改后缀即可（后缀根据所需文件来，比如。html，。css，。js等）；
　　新建文件夹
　　1。首先根据需要指定一个路径（这里路径以桌面为例），然后新建一个文件夹（这里新建的文件夹为demo1）；
　　2。鼠标点击侧边栏第二个选项，如下图一；
　　3。此时会提示你没有可以打开的文件夹，点击【OpenFolder】按钮导入桌面新建的文件夹demo1，如下图二；
　　4。把文件夹导入后发现刚刚新建文件夹名字是小写的，现在变大写了，如下图三，这个不影响（右边图标从左到右为，新建文件新建文件夹刷新折叠文件）。
　　注：新建文件一定要修改后缀，否则默认都是text文本文件
　　06：hr自动保存设置。选择File（文件）、Preferences（首选项）、Setting（设置）然后弹出下面界面，选择User（一般会默认选中该选项），接着如下图选择afterdelay选项即可，下面有个数字1000表示1秒，这个可自行设置，表示多少秒以后自动保存。
　　07：hr自动格式化代码。选择File（文件）、Preferences（首选项）、Setting（设置）。User（用户）、TextEditor（文本编辑）、Formatng（格式化），然后勾选下图红色框中的选项后，重启Vscode即可。
　　08：hrVscode更换主题。选择File（文件）、Preferences（首选项）、ColorTheme（颜色主题），如下图一所示。然后会出现下图二红色框的界面，此时按键盘上的上下键即可实时查看主题颜色，直接回车可选中对应主题。
　　VScode用户设置
　　01：hr选择文件菜单内的首选项里面的用户代码片段。
　　02：hr选择代码片段文件html。json。
　　03：hr输入要自定义的快捷键和模板代码段。
　　04：hr进入。html后缀的文件中按快捷键【vh】后按【tab】键即可实现快速输入代码段，自定义设置完成。
　　实用插件推荐
　　01：hrAutoFileName（文件路径自动补全插件）。
　　02：hrESLint插件。安装此插件，可使VSCode安装和重启后自动开始工作。
　　03：hravaScript（ES6）CodeSnippets（代码片段插件）
　　用代码片段加快ES开发速度，例如输入imd可以自动生成如下代码。
　　04：hrProjectManager（项目管理器插件）。简单的项目管理器，可以在你的编辑器中快速切换项目。
　　05：hrSortLines（代码行排序插件）。这个插件可以对选中的代码行进行排序，也提供不区分大小写、反向和唯一等排序功能。
　　06：hrWallaby。js（测试插件）。一个高级的连续测试运行器，可以对正在工作的文件进行测试，它会在你的编辑器中创建通过测试或测试失败的视觉反馈。
　　VScode用户代码片段
　　01：hr找到菜单查看，点击命令面板，或者按commandshiftP快捷键打开命令选项板。
　　搜索Preferences：ConfigureUserSnippets或者首选项：配置用户代码片段。
　　02：hr你可以选择现有的代码片段文件或者创建代码片段文件，其中创建代码片段文件有两个选项：全局可用和当前项目目录可用。
　　03：hr以新建全局代码段文件为例，单击【新建全局代码片段文件】。创建。codesnippets后缀的文件。我们可以看到一个大的对象｛｝，查看注释中示例，JavaScript代码如下图
　　04：hr其中，Printtoconsole是代码片段名称；
　　scope字段表示作用域，在什么语言下其作用；
　　prefix字段为代码片段前缀，定义如何从IntelliSense和选项卡完成中选择此代码段；
　　body即代码片段的主体内容，其中每个字符串表示一行；
　　description字段为代码片段说明，会在IntelliSense候选栏中出现。未定义的情况下直接显示对象名，上面列子中将会显示Logoutputtoconsole。
　　05：hrbody部分可以使用特殊语法结构，来控制光标和要插入的文本，其支持的基本结构有Tabstops（制表符）。
　　用Tabstops可以让编辑器的指针在snippet内跳转。使用1，2等指定光标位置。这些数字指定了光标跳转的顺序，数字最大表示默认选中，按【tab】键，光标移到下一个指定位置。
　　特别注意的是，0表示最终光标位置。相同序号的Tabstops被链接在一起，将会同步更新，比如下列用于生成头文件封装的snippet被替换到编辑器上时，光标就将同时出现在所有1位置。
　　JavaScript代码：
　　06：hrbody支持的基本结构有还有Placeholders（占位符）。
　　Placeholder是带有默认值的Tabstops，如｛1：foo｝。placeholder文本将被插入Tabstops位置，并在跳转时被全选，以方便修改。占位符还可以嵌套，例如｛1：another｛2：placeholder｝｝。
　　比如，结构体的snippet主体可以这样写，JavaScript代码：
　　07：hrChoice是提供可选值的Placeholder。其语法为一系列用逗号隔开，并最终被两个竖线圈起来的枚举值，比如｛1one，two，three｝。当光标跳转到该位置的时候，用户将会被提供多个值（one或two或three）以供选择。