visual studio code教程：基础使用和自定义设置
本经验主要基于基础web前端开发，visual studio code教程——基础使用、扩展插件安装使用以及少许自定义配置，推荐了几个自认为比较好的要求配置项目比较低的VS code扩展插件：Html Snippets——html代码提示easyless——css编程/生成VS color Picker——颜色选择器live HTML Previewer——html文件运行预览SVG Viewer———SVG运行预览还有就是用户设置的配置方法和用户代码片段的编写。***提示***经验里的图片都是GIF动图，大家要多次点击图片才能看到具体操作。
工具/原料
visual studio code
Windows系统
1.基础教程
1、1.1 认识视图界面和大多编辑器一样，该有的基本都有。如图：
3、1.3 新建文件/文件夹新建文件：a. 文件——>新建文件；b. 按Ctrl+n;c. 点文件夹名后面的+号图标。新建文件夹：点文件夹名后面的+号图标。
5、1.5 集成终端终端对开发者来说不可或缺，Visual Studio code 自然也自带终端视窗。可按快捷键Ctrl+`快速调出终端，也可以 查看——>集成终端 调出。需要注意的是：如果当前的文件夹的路径名称包含中文，会出现终端打开失败（待验证）。
7、1.7 文件图标主题设置之前写的有一篇经验，链接附上。
2.VS code用户设置
1、2.1 用户设置入口VS code支持用户自定义设置编辑器，包括快加键修改、代码高亮、以及扩展插件配置等，点击文件——>首选项——>用户设置。编辑器会拆分为两列，一个文件是【默认设置】，一个是【settings.json】，用户设置是空的【settings.json】这个文件（之前没有设置的话），需要自定义的设置项就在settings.json文件里写入json代码即可。
3.插件推荐及使用配置
1、VS code的扩展还是比较丰富的，具体选择方法在前面的步骤1.6已经教大家了，下面介绍几个对基本web前端编辑比较实用的罩煺渥王扩展插件（我个人认为）。3.1 HTNL Snippets为HTML文档提供代码提示功能，包含HTML5。3.2 easyless为less文档提供提示，错误警告，以及把less文档编译为css文件。可自定义设置。开发者给出的配置例子： "less.compile": {"compress": true,"sourceMap": true,"out":false}可以粘贴到用户设置的【默认设置】里，也可以粘贴到用户设置settings.json里。后面的懂json的同学自动忽略：如果settings.json是空的，应该写成：{"less.compile": {"compress": true,"sourceMap": true,"out":false}}如果之前已有写入json代码，你应该在前面的名称/值对块后面加上“,”（新手容易多加或者少加","符号，个人觉得是这样的）。****提示：****在写的时候，代码内最好不要加注释。"sourceMap": true, 这个地方最好设置成false ，因为当你实际使用的时候浏览器找不到sourceMap 可能会报错或者浏览器一直去找，还没遇到过（我碰到jQuery.js因为这个报错的），入门的同学还是设置成false 比较好。
3、3.4 live HTML Previewer为html文档提供预览功能，需要用命令或者快捷键调出，会在编辑器中新增一列，用于运行html文件。a. 按F1在命令框中输入：Show side preview 新增一列显示html，能边写边看到效果，实时预览。b. 可以在html文档中右键选择：Open in browser 在系统默认浏览器中打开，该模式下不能提供实时预览,保存时不自动刷新浏览器。
4.VS code 用户代码片段
1、4.1 用户代码片段 设置入口及示例用户代码片段 是用来提示代码提示及快捷插入的，那么怎么做呢？ 1.文件——>首选项——>用户代码片段 2.选择代码语言 3.按固定格式写json代码 示例格式："Print to console":{"prefix": "log","body": ["console.log('$1');","$2"],"description": "Log output to console"}
3、4.3 怎献垴淄睬么使插入的代码块符合格式化标准？代码格式化主要就是缩进和换行了。1.要缩进的地方按下TAB键即可，例如：[" <a>稆糨孝汶;$1</a>"]2.怎么在"body":[]中插入带双引号的内容?因为注释带有特殊符号尤其是带有双引号（"")的内容会导致json报错，解决方法是用反斜杠“\”对特殊符号进行转义。例如：希望插入：<a href="XXXX/">凯玩网</a> 那么"body":[]那里应该这样写:["<a href=\"XXXX/\">凯玩网</a>"这里在"description": "XXXX"那里同样适用。总的来说，碰到json报错的字符或者符号就用反斜杠“\”进行转义。当然你要考虑插入之后会不会影响程序文档报错或者出现异常，也就是要先确定插入的代码块是正确的完整的，这是自定义代码块存在的意义
