visualstudiocode教程vscode的基础使⽤和⾃定义设置⽅法推荐了⼏个⾃认为⽐较好的要求配置项⽬⽐较低的VS code扩展插件：
Html Snippets——html代码提⽰
easyless——css编程/⽣成
VS color Picker——颜⾊选择器
live HTML Previewer——html⽂件运⾏预览
SVG Viewer———SVG运⾏预览
还有就是⽤户设置的配置⽅法和⽤户代码⽚段的编写。
***提⽰***
经验⾥的图⽚都是GIF动图，⼤家要多次点击图⽚才能看到具体操作。
1.1 认识视图界⾯
和⼤多编辑器⼀样，该有的基本都有。如图：
1.2 ⽂件夹和⽂件的打开
⽂件——>打开⽂件夹/打开⽂件
1.3 新建⽂件/⽂件夹
新建⽂件：
a. ⽂件——>新建⽂件；
b. 按Ctrl+n;
c. 点⽂件夹名后⾯的+号图标。
新建⽂件夹：
点⽂件夹名后⾯的+号图标。
1.4 拆分编辑器（分列）
快加键：Ctrl+\
点击拆分编辑器图标（右上⾓）进⾏拆分编辑器。拆分完毕之后，可以通过⿏标点击拖动⽂件到相应的列。多列同时浏览免去多⽂件来回切换。
1.5 集成终端
终端对开发者来说不可或缺，Visual Studio code ⾃然也⾃带终端视窗。
可按快捷键Ctrl+`快速调出终端，也可以查看——>集成终端调出。
需要注意的是：如果当前的⽂件夹的路径名称包含中⽂，会出现终端打开失败（待验证）。
1.6 安装/卸载扩展（插件）
a. 进⼊扩展视图界⾯安装/卸载
a1.快捷键：Ctrl+shift+x；
a2.查看——>扩展；
a3.点左侧边框的扩展图标按钮进⼊。
在顶部搜索框输⼊你需要的扩展插件，到之后在扩展插件后⾯的选项中点击【安装】即可，需要卸载扩展只需要点【卸载】即可。
扩展下载安装完毕之后需要点击【启⽤】才⽣效，有些扩展需要重启编辑器才⽣效。
b. 如何选择扩展（插件）呢？
其实也不难，扩展的名称⼀般都暴露了它的功能，基本如下：
1.带snippets ⼀般是代码提⽰类扩展；
2.带viewer ⼀般是代码运⾏预览类扩展；
3.带support ⼀般是代码语⾔⽀持；
4.带document ⼀般是参考⽂档类扩展；
5.带Formatt ⼀般是代码格式化整理扩展；
当然有的snippets 也⾃带support功能，并不是以上⾯的关键词作为唯⼀标准。
1.7 ⽂件图标主题设置之前写的有⼀篇经验，链接附上。
1.7 ⽂件图标主题设置之前写的有⼀篇经验，链接附上。
2.VS code⽤户设置
2.1 ⽤户设置⼊⼝
VS code⽀持⽤户⾃定义设置编辑器，包括快加键修改、代码⾼亮、以及扩展插件配置等，点击⽂件——>⾸选项——>⽤户设置。
编辑器会拆分为两列，⼀个⽂件是【默认设置】，⼀个是【settings.json】，⽤户设置是空的【settings.json】这个⽂件（之前没有设置的话），需要⾃定义的设置项就在settings.json⽂件⾥写⼊json代码即可。
2.2 ⾃定义的设置⽅法为：
1、在【默认设置】⾥到相关的设置json代码段，复制该设置完整的json块，例如：【"editor.fontSize": 14,】。
2、到【settings.json】粘贴。不过记得加上外层（前后）“{}”符号，不然不是完整的json，会出错或者设置⽆效。
例如：
{
"editor.fontSize": 20
visual studio和vs code的区别
}
完后按Ctrl+s保存关掉窗⼝，编辑器的⽂字的⼤⼩就变成20了。
需要注意的是，【settings.json】的代码必须符合json格式，且名称（如上⾯的editor.fontSize）和值对（如上⾯的20）是【默认设置】⾥有的或者是扩展中⽀持的，不然不会有任何作⽤。
3.插件推荐及使⽤配置
VS code的扩展还是⽐较丰富的，具体选择⽅法在前⾯的步骤1.6已经教⼤家了，下⾯介绍⼏个对基本web前端编辑⽐较实⽤的扩展插件（我个⼈认为）。
3.1 HTNL Snippets
为HTML⽂档提供代码提⽰功能，包含HTML5。
3.2 easyless为less⽂档提供提⽰，错误警告，以及把less⽂档编译为css⽂件。可⾃定义设置。开发者给出的配置例⼦：
"lesspile": {
"compress":  true,
"sourceMap": true,
"out":false
}
可以粘贴到⽤户设置的【默认设置】⾥，也可以粘贴到⽤户设置settings.json⾥。后⾯的懂json的同学⾃动忽略：如果settings.json是空的，应该写成：
{
"lesspile": {
"compress":  true,
"sourceMap": true,
"out":false
}
}
如果之前已有写⼊json代码，你应该在前⾯的名称/值对块后⾯加上“,”（新⼿容易多加或者少加","符号，个⼈觉得是这样的）。
****提⽰：****
在写的时候，代码内最好不要加注释。"sourceMap": true, 这个地⽅最好设置成false ，因为当你实际使⽤的时候浏览器不到sourceMap 可能会报错或者浏览器⼀直去，还没遇到过（我碰到jQuery.js 因为这个报错的），⼊门的同学还是设置成false ⽐较好。
3.3 VS color Picker
为css⽂档和HTML⽂档提供颜⾊选择，当输⼊“#”后会出现颜⾊选择器浮窗，点击相应颜⾊之后会插⼊
⽂档中，默认⽤16进制表⽰。若想⽤其他格式的颜⾊，如RGB等则推荐扩展：Color Picker (Color Picker缺点是需要配置，安装nodejs，并且添加node到全局环境变量中。⽽且在插⼊时需要使⽤命令调出提⾊板，有点⿇烦）
3.4 live HTML Previewer
为html⽂档提供预览功能，需要⽤命令或者快捷键调出，会在编辑器中新增⼀列，⽤于运⾏html⽂件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。