visual studio code入门教程（visual studio code）

大家好，小太来为大家解答以上问题。visualstudiocode入门教程，visualstudiocode这个很多人还不知道，现在让我们一起来看看吧！

解答：

1、 visualstudiocode是一个轻量级的编辑器，采用了和VS一样的UI，可以用合适的插件优化前端开发体验。今天，我想向大家介绍一下visualstudiocode的使用技巧。

2、 工具/材料

3、 visualstudiocode

4、 视窗系统

5、 基础课

6、 因为软件下载安装后是英文的，所以可以先翻译成中文，开发起来更方便。点击插件按钮搜索“中文”，在弹出的选项中选择第一个“简体中文”。

7、 右边会弹出如下安装界面，然后点击【安装】进行安装。安装后会有如下提示(主要提醒您必须重启中文简体中文包才能生效)。

8、 Vscode界面介绍：主要分为五个区域，依次是活动栏、侧边栏、编辑栏、面板栏、状态栏。

9、 活动栏从上到下依次是：打开侧边栏、搜索、使用git、调试、使用插件；

10、 侧边栏，新建项目文件和文件夹；

11、 编辑栏，写代码的区域；

12、 面板，从左到右依次是：问题、输出、调试、终端，最重要的是终端，如下图1所示，用来输入相关命令；

13、 状态栏，点击调出面板栏；

14、 注意，如下图2的红框所示，分别表示鼠标光标的位置和tab缩进字符，这里缩进4个字符。

15、 创建新文件和文件夹

16、 创建新文件：CtrlN创建新文件并修改后缀(后缀基于所需文件，如。html，css，js等。);

17、 新建文件夹

18、 先根据需要指定一个路径(这里以桌面为例)，然后新建一个文件夹(这里新建的文件夹是demo1)；

19、 点击侧边栏中的第二个选项，如下图1所示；

20、 此时，会提示您没有可以打开的文件夹。点击【打开文件夹】按钮，在桌面导入新文件夹demo1，如下图2所示；

21、 导入文件夹后，发现新创建的文件夹名称是小写的，现在变成大写了，如下图3所示。这并不影响它(右边的图标从左到右，新建文件/新建文件夹/刷新/文件夹文件)。

22、 注意：必须修改新文件的后缀，否则默认都是文本文件。

23、 自动保存设置。选择文件、首选项、设置，会弹出如下界面。选择“用户”(该选项通常默认选中)，然后选择如下图所示的“afterdelay”选项。底部有一个数字1000代表1秒，可以自行设置，表示会自动节省多少秒。

24、 自动格式化代码。选择文件、首选项和设置。用户、文本编辑器、格式化，然后选中下图红框中的选项，然后重新启动Vscode。

25、 Vscode替换主题。选择File、Preferences和Color-Theme，如下图1所示。然后会出现下面图2中带红框的界面。此时按键盘上的上下键可以实时查看主题颜色，直接回车选择对应的主题。

26、 VS代码用户设置

27、 从“文件”菜单的“首选项”中选择“用户代码片段”。

28、 选择代码片段文件“html.json”。

29、 输入要自定义的快捷键和模板代码片段。

30、 输入带有的文件。html后缀，按快捷键[vh]再按[tab]键快速进入代码段，自定义设置完成。

31、 实用插件推荐

32、 自动命名(文件路径自动完成插件)。

33、 ESLint插件。安装这个插件，可以让VS代码在安装重启后自动开始工作。

34、 AvaScript(ES6)代码片段(代码片段插件)

35、 用代码片段加速ES开发。例如，输入imd可以自动生成以下代码。

36、 项目经理(项目经理插件)。简单的项目管理器，您可以在编辑器中快速切换项目。

37、 排序行(代码行排序插件)。这个插件可以对选中的代码行进行排序，还提供了不区分大小写、反向和唯一的排序功能。

38、 Wallaby.js(测试插件)。一个高级的连续测试运行器，它可以测试工作文件，并且它会在你的编辑器中创建测试通过或失败的视觉反馈。

39、 VS代码用户代码片段

40、 找到菜单“视图”点击“命令面板”，或者按“commandshiftP”快捷键打开命令调板。

41、 搜索“首选项：配置用户片段”或“首选项3360配置用户片段”。

42、 您可以选择“现有代码段文件”或“创建代码段文件”。创建代码段文件有两个选项：“全局可用”和“当前项目目录”

43、以新建全局代码段文件为例，单击【新建全局代码片段文件…】。创建.code-snippets后缀的文件。我们可以看到一个大的对象{}，查看注释中示例，JavaScript代码如下图

44、其中，Printtoconsole是代码片段名称； scope字段表示作用域，在什么语言下其作用； prefix字段为代码片段前缀，定义如何从IntelliSense和选项卡完成中选择此代码段； body即代码片段的主体内容，其中每个字符串表示一行； description字段为代码片段说明，会在IntelliSense候选栏中出现。未定义的情况下直接显示对象名，上面列子中将会显示Logoutputtoconsole。

45、body部分可以使用特殊语法结构，来控制光标和要插入的文本，其支持的基本结构有Tabstops（制表符）。 用“Tabstops”可以让编辑器的指针在“snippet”内跳转。使用“1，2”等指定光标位置。这些数字指定了光标跳转的顺序，数字最大表示默认选中，按【tab】键，光标移到下一个指定位置。 特别注意的是，“0”表示最终光标位置。相同序号的“Tabstops”被链接在一起，将会同步更新，比如下列用于生成头文件封装的“snippet”被替换到编辑器上时，光标就将同时出现在所有“1”位置。 JavaScript代码：

46、body支持的基本结构有还有Placeholders（占位符）。 “Placeholder”是带有默认值的”Tabstops”，如{1：foo}。“placeholder”文本将被插入“Tabstops”位置，并在跳转时被全选，以方便修改。占位符还可以嵌套，例如{1:another{2:placeholder}}。 比如，结构体的snippet主体可以这样写，JavaScript代码:

47、“Choice”是提供可选值的“Placeholder”。其语法为一系列用逗号隔开，并最终被两个竖线圈起来的枚举值，比如{1|one,two,three|}。当光标跳转到该位置的时候，用户将会被提供多个值（one或two或three）以供选择。

本文到此结束，希望对大家有所帮助。

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！