概述
VisualStudioCode(简称VSCode/VSC)是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比Diff、GIT等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持Win、Mac以及Linux。
1、下载VSCode
打开浏览器输入(进入到官网),点击下载，可以根据自己的操作系统进行下载。
下载地址
2、VSCODE安装
下图为确认安装过程，安装成功后启动VSCode：
3、VSCode安装插件
Chinese(Simplified)LanguagePackforVisualStudioCode（配置显示语言“zh-cn”）、
Vetur、stylelint、Sass、Prettier-Codeformatter、GitLens--Gitsupercharged、ESLint、EditorConfigforVSCode、DebuggerforChrome、DebuggerforJava、CodeRunner、AutoRenameTag
》》重启之后
4、自定义配置
打开文件->首选项->设置，就会进入到settings.json文件中，以下是自定义配置：
{"git.confirmSync":false,"git.autofetch":true,"git.checkoutType":"remote","git.enableSmartCommit":true,"files.autoSave":"onFocusChange","files.associations":{"*.vue":"vue","*.wpy":"vue","*.wxml":"wxml","*.wxss":"css","*.js":"javascript","*.html":"html","*.cjson":"jsonc","*.wxs":"javascript"},"emmet.syntaxProfiles":{"vue-html":"html","vue":"html"},"emmet.includeLanguages":{"wxml":"html"},"eslint.autoFixOnSave":true,"eslint.validate":["javascript","javascriptreact",{"language":"html","autoFix":true},{"language":"vue","autoFix":true},{"autoFix":true,"language":"javascript"},{"autoFix":true,"language":"javascriptreact"},{"autoFix":true,"language":"typescript"},{"autoFix":true,"language":"typescriptreact"}],"terminal.integrated.shell.windows":"C:\\Windows\\System32\\cmd.exe","window.zoomLevel":1,"explorer.confirmDelete":false,"vetur.experimental.templateInterpolationService":false,"editor.tabSize":4,"editor.tabCompletion":"on","editor.codeActionsOnSave":{"source.fixAll":true}}5、设置>用户代码片段
{//Placeyoursnippetsforvuehere.Eachsnippetisdefinedunderasnippetnameandhasaprefix,bodyand//description.Theprefixiswhatisusedtotriggerthesnippetandthebodywillbeexpandedandinserted.Possiblevariablesare://$1,$2fortabstops,$0forthefinalcursorposition,and${1:label},${2:another}forplaceholders.Placeholderswiththe//sameidsareconnected.//Example:"Printtoconsole":{"prefix":"log","body":["console.log('$1')","$2"],"description":"Logoutputtoconsole"},"Printtovuetemplate":{"prefix":"vue","body":["<template>","<divclass='page-view'>","1","</div>","</template>","","<scriptlang='ts'>","importVuefrom'vue'","exportdefaultVue.extend({","data(){","return{}","},","methods:{}","});","</script>","","<stylelang='scss'scoped>",".page-view{","min-height:100%;","}","</style>"],"description":"Logoutputtovuetemplate"}}