vscode|vscode + vue 配置指南

【vscode|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 _

    推荐阅读