vscode写Vue的最佳配置、插件

因为一些特殊原因，导致系统重装，所以vscode的一些配置、插件也就随之丢失了。故，记录一下。

插件

1. Beautify
    美化 javascript, JSON, CSS, Sass, 以及 HTML 。一般需要配合.jsbeautifyrc使用

2. Eslint
    检查代码是否符合规范

3. GitLens
    Git提示

4. language-stylus
    stylus语法支持

5. Markdown All in One
    Markdown语法快捷键

6. Material Icon Theme
    多样化的文件图标

7. One Dark Pro
    一款深黑色的主题

8. Path Intellisense
    相对、绝对路径提示

9. Prettier formatter
    代码格式化

10. Python
     Python支持

11. React Native Snippet
     React Native 语法片段扩展

12. Setting Sync
     同步本地vscode编辑器的设置到github

13. Vetur
     Vue语法支持。包括语法高亮、语法代码提示、语法lint检测等

14. Vue VSCode Snippets
     Vue 语法片段扩展

15. npm Intellisense
     import、require npm模块是自动补全

配置

{
    // 异步保存编辑器配置相关
    "sync.gist": "30exxxxxxxxxxxxxxxxxxxxxxxxxxxxxd91",    // GitHub不会保存此ID，需要本地保存，以防丢失
    "sync.quietSync": false,
    "sync.removeExtensions": true,
    "sync.syncExtensions": true,
    "sync.autoDownload": false,
    "sync.autoUpload": false,
    "sync.forceDownload": false,
    // git显示推送提示
    "git.showPushSuccessNotification": true,
    // git路径
    "git.path": "E:/Program Files/Git/bin/git.exe",
    // git自动拉取
    "git.autofetch": true,
    // 编辑器默认缩进
    "editor.tabSize": 2,
    // 编辑器图标主题
    "workbench.iconTheme": "material-icon-theme",
    // 编辑器颜色主题
    "workbench.colorTheme": "One Dark Pro Vivid",
    // 配置文件关联，以便启用对应的智能提示，比如wxss使用css
    "files.associations": {
        "*.vue": "vue",
        "*.wxss": "css"
    },
    // 配置emmet是否启用tab展开缩写
    "emmet.triggerExpansionOnTab": true,
    // 配置emmet对文件类型的支持，比如vue后缀文件按照html文件来进行emmet扩写
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html",
        "javascript": "javascriptreact",
        // xml类型文件默认都是单引号，开启对非单引号的emmet识别
        "xml": {
            "attr_quotes": "single"
        }
    },
    // 在react的jsx中添加对emmet的支持
    "emmet.includeLanguages": {
        "jsx-sublime-babel-tags": "javascriptreact"
    },
    // 默认开启eslint
    "eslint.enable": true,
    // 文件保存时，是否自动根据eslint进行格式化
    "eslint.autoFixOnSave": true,
    // eslint vue支持，并且支持自动格式化
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // prettier进行格式化时是否安装eslint配置去执行，建议false
    "prettier.eslintIntegration": true,
    // 如果为true，将使用单引号而不是双引号
    "prettier.singleQuote": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
}