vscode|vscode + vue 配置指南 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 } ] }

备注

Debugger for Chrome 运行会另启动一个 Chrome 进程，通过断点调试（果断抛弃 console）

Vue DevTools 添加插件到 Chrome, cli 项目若提示 Vue.js is detected on this page. Open DevTools and look for the Vue panel., 只需重新刷新下浏览器即可