一些简单的VS code扩展插件：
Html Snippets——html代码提示
easyless——css编程/生成
VS color Picker——颜色选择器
live HTML Previewer——html文件运行预览
SVG Viewer———SVG运行预览
用户设置的配置方法和用户代码片段的编写
提示：下面的图片都是GIF动图，大家要多次点击图片才能看到具体操作
**
1.1 认识视图界面
**
快加键：Ctrl+
a. 进入扩展视图界面安装/卸载
a1.快捷键：Ctrl+shift+x；
在顶部搜索框输入你需要的扩展插件，找到之后在扩展插件后面的选项中点击【安装】即可，需要卸载扩展只需要点【卸载】即可。
b. 如何选择扩展（插件）呢/strong>
其实也不难，扩展的名称一般都暴露了它的功能，基本如下：
1.带snippets 一般是代码提示类扩展；
2.带viewer 一般是代码运行预览类扩展；
3.带support 一般是代码语言支持；
4.带document 一般是参考文档类扩展；
5.带Formatt 一般是代码格式化整理扩展；
当然有的snippets 也自带support功能，并不是以上面的关键词作为唯一标准。
2.2 自定义的设置方法为：
1、在【默认设置】里找到相关的设置json代码段，复制该设置完整的json块，例如：【“editor.fontSize”: 14,】。
2、到【settings.json】粘贴。不过记得加上外层（前后）“{}”符 ，不然不是完整的json，会出错或者设置无效。
需要注意的是，【settings.json】的代码必须符合json格式，且名称（如上面的editor.fontSize）和值对（如上面的20）是【默认设置】里有的或者是扩展中支持的，不然不会有任何作用
3.3 VS color Picker
为css文档和HTML文档提供颜色选择，当输入“#”后会出现颜色选择器浮窗，点击相应颜色之后会插入文档中，默认用16进制表示。若想用其他格式的颜色，如RGB等则推荐扩展：Color Picker (Color Picker缺点是需要配置，安装nodejs，并且添加node到全局环境变量中。而且在插入时需要使用命令调出提色板，有点麻烦）
a. 按F1在命令框中输入：SVG
b. 选择SVG Viewer,新增一列显示SVG运行结果。
可变区域（这里用XXXX表示）如下：A. “Print to XXXX”: {
//仅作为标识和目的用途，区别于其他代码块（有多个相同值时会 错），不会插入。
B.“prefix”: “XXXX”,
//触发提示的关键字符，也就是输入什么时弹出提示窗。例如:当希望输入a的时候就弹出，这里就写a。在提示窗显示。
C. “body”: [“XXXX $1 XXXX”],
D. “description”: “XXXX”
// 这里是相关描述，比如说明插入的代码块内容、用途、代码结构、参数等，仅在提示窗显示不会插入}
E. 上面示例中的$1和$2是初始定位光标位置，用于插入后需要修改的值、参数等。还是上面的例子：
“body”:[“$1”]
那么在插入之后，光标的位置将处于和的中间。再如：
“body”:[“$1”,
“$2GBK”]
那么在插入
GBK
之后，光标首先在a标签内，输入完内容之后，光标跳到和GBK中间。输入或者移动光标之后光标恢复正常
插入结果为：
（效果见动图）
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！