1、官网https://code.visualstudio.com/Download下载最新版
下载zip,为免安装版本,直接解压即可,然后进入解压文件夹,点击Code.exe 双击即可运行。
2、安装vue所需插件
(1)、打开软件,使用快捷键,Shift+Ctrl+p 安装中文插件,选择Configure Display language,
然后选择Install additional languages,选项会在左侧出现安装插件的搜做目录
选择如下图所示的中文插件安装即可
(2)安装vetur插件,在上图所示搜索框中搜索vetur,点击安装
同样搜索eslint代码规范插件,点击安装
接下来安装Prettier代码格式规范插件,搜索点击安装
3、配置插件
点击菜单“文件”->“首选项”->“设置”,打开对话框,如下图所示
点击上图中的标识的图标进行配置(配置入下图):
配置代码:
{
// prettier:每行在这个字符数内整合代码,如果你的屏幕较宽分辨率较高可以适当加大
"prettier.printWidth": 120,
// prettier:是否在每行末尾加上分号
"prettier.semi": false,
// prettier:如果为true,将使用单行否则使用双引号
"prettier.singleQuote": true,
// vetur:对html的内容使用js-beautify-html
"vetur.format.defaultFormatter.html": "js-beautify-html",
"files.autoSave":"off",
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
{ "language": "vue", "autoFix": true }
],
"eslint.options": {
"plugins": ["html"]
},
//关闭vue模板校验
"vetur.validation.template": false
}
至此,VSCode配置完成。