高效開發者是如何個性化 VS Code 外掛與配置的?
譯者按:IDE 是生產力的保證!
本文采用意譯,版權歸原作者所有
2 年之前,我放棄了 Sublime Text,選擇了 Visual Studio Code 作為程式碼編輯器。
我每天花在 VS Code 上的時間長達 5~6 個小時,因此按照我的需求優化 VS Code 配置十分必要。過去這 2 年裡,我試過各種各樣的外掛與配置,而現在我感覺一切都完美了,是時候給大家分享一下我的使用技巧了!
外掛
VS Code 有著非常豐富的外掛,這裡我給大家推薦幾個我最喜歡的 VS Code 外掛。
Prettier Code Formatter
下載量:167 萬
我使用 Prettier 來統一程式碼風格,當我儲存 HTML/CSS/JavaScript 檔案時,它會自動調整程式碼格式。這樣,我不用擔心程式碼格式問題了。由於 Prettier 本身不能個性化配置,有時可能會引起不適,但是至少保證團隊成員可以輕易統一程式碼風格。
npm
下載量:119 萬
npm 外掛可以檢查 package.json 中所定義的 npm 模組與實際安裝的 npm 模組是否一致:
- package.json 中定義了,但是實際未安裝
- package.json 中未定義,但是實際安裝了
- package.json 中定義的版本與實際安裝的版本不一致
npm Intellisense
下載量:105 萬
npm Intellisense 外掛會為 package.json 建立索引,這樣當我 require 某個模組時,它可以自動補全。
Bracket Pair Colorizer
下載量:95 萬
Bracket Pair Colorizer 可以為程式碼中的匹配的括號自動著色,以不同的顏色進行區分,這樣我們可以輕易地辨別某個程式碼塊的開始與結束。
Fudebug, 1 程式碼搞定 BUG 監控!
Auto Close Tag
下載量:117 萬
Auto Close Tag 外掛的功能非常簡單,它可以自動補全 HTML/XML 的關閉標籤。
GitLens
下載量:164 萬
我非常喜歡 Gitlens,因為它可以幫助我快速理解程式碼的修改歷史。
Current Line Blame:檢視當前行程式碼的結尾檢視最近一次 commit 的姓名、時間以及資訊
Current Line Hovers:在當前行程式碼的懸浮框檢視詳細的最近一次的 commit 資訊。
Markdown All in One
下載量:45 萬
Markdown All in One 外掛幫助我編寫 README 以及其他 MarkDown 檔案。我尤其喜歡它處理列表以及表格的方式。
自動調整列表的數字序號
自動格式化表格
使用者配置
除了安裝各種各樣的外掛,我們還可以通過配置 VS Code 的 User Settings 來個性化我們的 VS Code。
字型設定
我非常喜歡帶有 ligatures(合字、連字、連結字或合體字)的字型。ligatures 就是將多於一個字母的合成一個字形。我主要使用 Fira Code 作為我程式設計所使用的字型,如下圖中的 =>
與 ===
:
我的字型配置如下:
"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "editor.fontLigatures": true
關於縮排,我是這樣配置的:
"editor.detectIndentation": true, "editor.renderIndentGuides": false,
import 路徑移動或者重新命名時,自動更新:
"javascript.updateImportsOnFileMove.enabled": "always",
user-settings.json
下面是我的 VS Code 的配置檔案 user-settings.json :
{ "workbench.colorCustomizations": { "activityBar.background": "#111111", "activityBarBadge.background": "#FFA000", "list.activeSelectionForeground": "#FFA000", "list.inactiveSelectionForeground": "#FFA000", "list.highlightForeground": "#FFA000", "scrollbarSlider.activeBackground": "#FFA00050", "editorSuggestWidget.highlightForeground": "#FFA000", "textLink.foreground": "#FFA000", "progressBar.background": "#FFA000", "pickerGroup.foreground": "#FFA000", "tab.activeBorder": "#FFA000", "notificationLink.foreground": "#FFA000", "editorWidget.resizeBorder": "#FFA000", "editorWidget.border": "#FFA000", "settings.modifiedItemIndicator": "#FFA000", "settings.headerForeground": "#FFA000", "panelTitle.activeBorder": "#FFA000", "breadcrumb.activeSelectionForeground": "#FFA000", "menu.selectionForeground": "#FFA000", "menubar.selectionForeground": "#FFA000" }, "editor.fontSize": 14, "editor.lineHeight": 24, // These are for subliminal, check them out. "editor.hideCursorInOverviewRuler": true, "editor.lineNumbers": "on", "editor.overviewRulerBorder": false, "editor.renderIndentGuides": false, "editor.renderLineHighlight": "none", "editor.quickSuggestions": true, // end subliminal changes "editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "vsicons.projectDetection.autoReload": true, "editor.formatOnPaste": false, "editor.formatOnSave": true, "editor.fontLigatures": true, "prettier.tabWidth": 4, "editor.wordWrap": "on", "editor.detectIndentation": true, "workbench.iconTheme": "eq-material-theme-icons-palenight", "editor.minimap.enabled": false, "editor.minimap.renderCharacters": false, "prettier.parser": "flow", "workbench.editor.enablePreview": false, "emmet.includeLanguages": { "javascript": "javascriptreact", "jsx-sublime-babel-tags": "javascriptreact" }, "emmet.triggerExpansionOnTab": true, "emmet.showExpandedAbbreviation": "never", "workbench.statusBar.visible": true, "workbench.activityBar.visible": true, "workbench.editor.showIcons": false, "editor.multiCursorModifier": "ctrlCmd", "explorer.confirmDelete": false, "window.zoomLevel": 0, "javascript.updateImportsOnFileMove.enabled": "always", "materialTheme.accent": "Yellow", "editor.cursorBlinking": "smooth", "editor.fontWeight": "500" }
如果你想知道更多的 VS Code 使用技巧,可以檢視 VSCode Can Do That 。
推薦閱讀
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了10億+錯誤事件,付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用!