我的VSCode安装与配置

title: VSCode安装与配置
date: 2017年10月15日 08:36:30
tags: 实用工具
categories: 实用工具
author: "JiaWei"

总结各种vscode插件,备份自己的设置

VsCode官网

常用插件
* HTML Snippets： H5代码片段以及提示
* Auto Close Tag : 匹配标签，关闭对应的标签。
* Auto Rename Tag : 当修改HTML/XML标签时，会自动修改与之对应的开始/结束标签。
* vscode-icon：让 vscode 资源树目录加上图标。
* Path Intellisense：路径智能提示。
* Eslint：代码检查。
* Settings Sync：VSCode设置同步到Gist。
* Document This:生成js 的注释模板，不过最新版的vscode已原生支持（命令为/**+回车）。
* Beautify：通过配置.jsbeautifyrc文件，可以格式化 javascript, JSON, CSS, Sass, 和HTML文件。

Vue相关插件
* vetur：语法高亮、智能感知、Emmet等。
* VueHelper：Vue代码智能提示（包括Vue、vue-router、vuex）。

自定义配置文件

{
"workbench.colorTheme": "Tomorrow Night Blue",
"workbench.iconTheme": "vscode-icons",
//用于在Vue中体验Emmet
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
//配置Eslint
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
//设置字体大小
"editor.fontSize": 26,
"editor.tabSize": 2,
"files.associations": {
".vue": "vue"
},
//Vetur默认使用 eslint-plugin-vue来检测 <template>,关闭该检测
"vetur.validation.template": false,
"files.exclude": {
"/.git": true,
"/.svn": true,
"/.hg": true,
"/CVS": true,
"/.DS_Store": true,
"/.vscode": true, "/.idea": true
},
//配置可以格式化的文件
"beautify.language": {
"js": {
"type": [
"javascript",
"json"
],
"filename": [
".jshintrc",
".jsbeautify"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"vue"
]
},
"vsicons.dontShowNewVersionMessage": true,
"auto-rename-tag.activationOnLanguage": [
"html",
"xml",
"php",
"javascript",
"vue"
],
"css.fileExtensions": [
"css",
"scss"
],
"files.associations": {
// extension name : html
".ejs": "html",
"*.js": "html"
}
}