1. 程式人生 > >VS Code編輯器外掛整理及配置設定

VS Code編輯器外掛整理及配置設定

  語言包:

  1. Chinese -- VS Code的漢化包

  格式化+程式碼補全:

  1. ESLint -- Integrates ESLint
  2. Vetur -- A vue tooling
  3. Prettier -- Format your JavaScript / TypeScript / CSS
  4. minapp -- 微信小程式標籤、屬性的智慧補全(同時支援原生小程式、mpvue 和 wepy 框架,並提供 snippets)
  5. JS-CSS-HTML Formatter -- This extension wraps js-beautify to format your JS, CSS, HTML, JSON file.

  註釋高亮+縮排提示:

  1. indent-rainbow -- 程式碼縮排顏色塊
  2. Rainbow Brackets -- 高亮括號顏色提示縮排
  3. TODO Hightlight -- 高亮註釋,“TODO:” “FIXME:”

  Git工具:

  1. GitLens -- 超級強大的git工具,不過不能合分支

  有趣的外掛:

  1. 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 在眾多程式碼編輯器中屬輕巧而不失靈活的利器,很多器本身就是就非常值得研究,如果有什麼需求需要去尋求擴充套件,個人建議的做法還是多讀文件,多讀官方文件,摸清楚清楚你自己手頭工具的能力和侷限,才能避免在法拉利跑車上安裝自行車輪子的笑話。如果實在要新裝輪子,建議仔細閱讀新輪子的說明書。