vscode + vue 配置指南

工欲善其事必先利其器

---

• setting.json

{
    "explorer.confirmDelete": false,
    "sync.gist": "a2ec5286250f18947abc5e9043c9c92d",
    "workbench.colorTheme": "One Dark Pro",
    "files.autoSave": "onFocusChange",
    "editor.formatOnSave": true,
    "emmet.triggerExpansionOnTab": true,
    "files.associations": {
        "*.vue": "vue"
    },
    "prettier.semi": true,
    "prettier.singleQuote": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "stylusSupremacy.insertColons": false,
    "stylusSupremacy.insertSemicolons": false,
    "stylusSupremacy.insertBraces": false,
    "stylusSupremacy.insertNewLineAroundImports": false,
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        }
    },
    "liveServer.settings.donotShowInfoMsg": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "window.zoomLevel": 0,
    "git.autofetch": true,
    "todohighlight.isEnable": true,
    "todohighlight.isCaseSensitive": true,
    "todohighlight.keywords": [
        "DEBUG:",
        "REVIEW:",
        {
            "text": "NOTE:",
            "color": "#ff0000",
            "backgroundColor": "yellow",
            "overviewRulerColor": "grey"
        },
        {
            "text": "HACK:",
            "color": "#000",
            "isWholeLine": false,
        },
        {
            "text": "TODO:",
            "color": "red",
            "border": "1px solid red",
            "borderRadius": "2px",
            "backgroundColor": "rgba(0,0,0,.2)",
        },
        {
            "text": "ERR:",
            "color": "#FFF",
            "border": "1px solid #000",
            "borderRadius": "2px",
            "backgroundColor": "red",
        },
        {
            "text": " ppExt:",
            "color": "#fff",
            "border": "1px solid #fff",
            "borderRadius": "2px", //NOTE: using borderRadius along with `border` or you will see nothing change
            "backgroundColor": "purple",
            //other styling properties goes here ... 
        }
    ],
    "search.followSymlinks": false,
    "files.exclude": {
        "**/.DS_Store": true,
        "**/.git": true,
        "**/.hg": true,
        "**/.svn": true,
        "**/bower_components": true,
        "**/CVS": true,
        "**/node_modules": true
    },
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/bower_components/**": true,
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "git.enableSmartCommit": true,
    "git.confirmSync": false,
    "[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

---

• 插件

  1. Auto Close Tag
  2. Auto Complete Tag
  3. Auto Rename Tag
  4. Beautify
  5. Bracket Pair Colorizer
  6. Chinese (Simplified) Language Pack for Visual Studio Code
  7. Code Runner
  8. Color Highlight
  9. Color Picker
  10. CSS Peek
  11. Debugger for Chrome
  12. Document This
  13. DotENV
  14. EditorConfig for VS Code
  15. Git History
  16. Git History Diff
  17. GitLens — Git supercharged
  18. Highlight Matching Tag
  19. HTML CSS Support
  20. HTML Snippets
  21. IntelliSense for CSS class names in HTML
  22. JavaScript (ES6) code snippets
  23. language-stylus
  24. Live Server
  25. Manta's Stylus Supremacy
  26. Node JSON Autocomplete
  27. npm
  28. npm Intellisense
  29. One Dark Pro
  30. Path Autocomplete
  31. Path Intellisense
  32. Prettier - Code formatter
  33. Project Manager
  34. Pug (Jade) snippets
  35. Sass
  36. Settings Sync
  37. TODO Highlight
  38. Todo Tree
  39. Vetur
  40. vscode-icons
  41. VueHelper
  42. yarn
  43. Code Spell Checker

---

• vue模板

{
    // vue 页面模板
    "Print to vue": {
        "prefix": "vue",
        "body": [
            "\n",
            "\n",
            "",
        ],
        "description": "template output to vue"
    },
    // vue 组件模板
    "Print to comp": {
        "prefix": "comp",
        "body": [
            "\n",
            "\n",
            "",
        ],
        "description": "component output to vue"
    }
}

---

• vconsole 全局 snippets

{
    // console / vconsole
    "Print to console": {
        "scope": "javascript,typescript",
        "prefix": "log",
        "body": [
            "console.log('$1', $2);",
        ],
        "description": "Log output to console"
    },
    "Print to vconsole info": {
        "scope": "javascript,typescript",
        "prefix": "info",
        "body": [
            "console.info('$1', $2);",
        ],
        "description": "vconsole info"
    },
    "Print to vconsole warn": {
        "scope": "javascript,typescript",
        "prefix": "warn",
        "body": [
            "console.warn('$1', $2);",
        ],
        "description": "vconsole warn"
    },
    "Print to vconsole error": {
        "scope": "javascript,typescript",
        "prefix": "err",
        "body": [
            "console.error('$1', $2);",
        ],
        "description": "vconsole error"
    }
    
}

---

插件配置

• project manager

[{
    "name": "vue-mcli",
    "rootPath": "$home\\mock\\inside\\vue-mcli",
    "paths": [],
    "group": "",
    "enabled": true
}]

• Debugger for Chrome

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vue-mcli",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

备注

1. Debugger for Chrome 运行会另启动一个 Chrome 进程，通过断点调试（果断抛弃 console）
2. Vue DevTools 添加插件到 Chrome, cli 项目若提示 Vue.js is detected on this page. Open DevTools and look for the Vue panel., 只需重新刷新下浏览器即可

_malk vue cli _