VS Code編輯器外掛整理及配置設定
阿新 • • 發佈:2019-01-04
語言包:
- Chinese -- VS Code的漢化包
格式化+程式碼補全:
- ESLint -- Integrates ESLint
- Vetur -- A vue tooling
- Prettier -- Format your JavaScript / TypeScript / CSS
- minapp -- 微信小程式標籤、屬性的智慧補全(同時支援原生小程式、mpvue 和 wepy 框架,並提供 snippets)
- JS-CSS-HTML Formatter -- This extension wraps js-beautify to format your JS, CSS, HTML, JSON file.
註釋高亮+縮排提示:
- indent-rainbow -- 程式碼縮排顏色塊
- Rainbow Brackets -- 高亮括號顏色提示縮排
- TODO Hightlight -- 高亮註釋,“TODO:” “FIXME:”
Git工具:
- GitLens -- 超級強大的git工具,不過不能合分支
有趣的外掛:
- Power Mode -- 按下鍵盤,煙花等特效
setting.json配置:
1 { 2 "files.associations": { 3 "*.cjson": "jsonc",4 "*.wxss": "css", 5 "*.wxs": "javascript" 6 }, 7 "emmet.includeLanguages": { 8 "wxml": "html" 9 }, 10 "minapp-vscode.disableAutoConfig": true, 11 "editor.tabSize": 2, 12 "git.confirmSync": false, 13 "git.autofetch": true, 14 "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",15 "eslint.autoFixOnSave": true, 16 "vetur.format.defaultFormatter.js": "vscode-typescript", 17 "prettier.eslintIntegration": true, 18 "prettier.semi": false, 19 "prettier.singleQuote": true, 20 "vetur.format.defaultFormatter.html": "js-beautify-html", 21 "vetur.format.defaultFormatterOptions": { 22 "js-beautify-html": { 23 "wrap_line_length": 120, 24 "wrap_attributes": "auto", 25 "end_with_newline": false 26 }, 27 "prettyhtml": { 28 "printWidth": 100, 29 "singleQuote": false, 30 "wrapAttributes": false, 31 "sortAttributes": false 32 } 33 }, 34 "editor.wrappingIndent": "none", 35 "editor.fontSize": 12, 36 "markdown.preview.fontSize": 12, 37 "terminal.integrated.fontSize": 12, 38 "window.zoomLevel": 0 39 }
寫在最後:
古有語“工欲善其事必先利其器”,VSCode 在眾多程式碼編輯器中屬輕巧而不失靈活的利器,很多器本身就是就非常值得研究,如果有什麼需求需要去尋求擴充套件,個人建議的做法還是多讀文件,多讀官方文件,摸清楚清楚你自己手頭工具的能力和侷限,才能避免在法拉利跑車上安裝自行車輪子的笑話。如果實在要新裝輪子,建議仔細閱讀新輪子的說明書。