VSCode安装与配置

安装

在vscode官网下载版本安装。

配置

常用插件

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

Vue相关插件

1. vetur：语法高亮、智能感知、Emmet等。
2. VueHelper：Vue代码智能提示（包括Vue、vue-router、vuex）。

自定义配置文件

打开文件->首选项->设置，就会进入到 settings.json 文件中，在左侧是VSCode默认的配置，在窗口右侧可以进行一系列的配置。以下是我的自定义配置

{
    "workbench.colorTheme": "Monokai",
    "workbench.iconTheme": "vscode-icons",
    
    //用于在Vue中体验Emmet
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    
    //配置Eslint
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    
    //设置字体大小
    "editor.fontSize": 18,
    "editor.tabSize": 2,
    "files.associations": {
        "*.vue": "vue"
    },
    //Vetur默认使用 eslint-plugin-vue来检测