一、下载安装
在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code。
- 开源，免费；
- 自定义配置
- 集成git
- 智能提示强大
- 支持各种文件格式（html/jade/css/less/sass/xml），可通过安装插件来支持C++、C#、Python、PHP等其他语言
- 调试功能强大，可断点调试
- 强大的插件扩展
官网下载地址，选择对应系统下载安装包。
二、安装插件
可以直接再VS Code中浏览和下载安装插件。
单击侧面的活动栏中的Extensions图标，或View：Extensions命令（Ctrl + Shift + X），打开Extensions视图，显示出插件列表，单击可查看到详细信息。
下面以安装中文插件为例。点击安装。
安装成功后会出现“重新加载”，单击重启VS Code以启用新拓展（此处还需要先选择语言）。
快捷键【Ctrl+Shift+P】，搜索
configure language，点击。
然后选择中文语言。
会提示需要重启生效，确认进行重启。
重启后即可生效。
三、推荐插件（不定期跟新）
1、Chinese (Simplified) Language Pack for Visual Studio Code
中文（简体）语言包。
毕竟是我第一个安装的插件。
2、Debugger for Chrome
从VS Code调试在Google Chrome中运行的JavaScript代码。
3、Auto Rename Tag
自动完成另一侧标签的同步修改。
4、Auto Close Tag
自动添加HTML / XML关闭标记，与Visual Studio IDE或Sublime Text相同。
5、Beautify
美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。
6、Bracket Pair Colorizer
此扩展允许使用颜色标识匹配的括号。用户可以定义要匹配的字符以及要使用的颜色。
7、HTML CSS Support
智能提示CSS类名以及id 。
8、HTML Snippets
智能提示HTML标签，以及标签含义。
9、JavaScript(ES6) code snippets
ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间。
10、jQuery Code Snippets
jQuery代码智能提示。
11、open in browser
vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari。
12、Vetur
Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。
13、Path Intellisense
自动补全路径。
13、ESLint
js语法纠错，可以自定义配置，不过配置较为复杂。
14、vscode-icon
让 vscode 资源树目录加上图标。
15、CSS Peek
html与css关联。
16、Prettier - Code formatter
代码格式化，虽然vscode虽然带了但可能不全，可以安装一个。
四、自定义用户代码片段（以vue为例）
1、打开定义代码片段配置文件
-
文件=>首选项=>用户代码片段，选择vue，打开配置文件。
-
也可以按F1或者ctrl+shift+p，进入命令行，输入snippets，选择首选项用户代码片段，在选择vue（同上）。
2、配置代码片段配置文件
初始打开都是注释掉的内容，可以根据它给出的例子设置自己的代码片段。
- prefix: 是触发snippet的简写（输入即可快速输入body中的模板内容）
- body：代码片段模板内容，每一行拆分为数组中的一个元素即可
- description : 注释说明
例如常用的vue组件模板：
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
"</template>",
"<script>",
"export default {",
"}",
"</script>",
"<style lang=\"scss\" scoped>",
"</style>"
],
"description": "veu template"
}
}
3、使用
如果按照上面的配置，即新建了一个.vue文件，可以直接输入vue即可看到代码片段选择，选择即生成。
