高效開發者是如何個性化 VS Code 外掛程式與配置的?
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可以為程式碼中的匹配的括號自動著色,以不同的顏色進行區分,這樣我們可以輕易地辨別某個程式碼區塊的開始與結束。
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。
原文網址:http://tilomitra.com/vs-code-settings-and-extensions-for-faster-javascript-development/
本文採用意譯,版權歸原作者所有
推薦教學:vscode教學
#以上是高效開發者是如何個性化 VS Code 外掛程式與配置的?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

VS Code 系統要求:操作系統:Windows 10 及以上、macOS 10.12 及以上、Linux 發行版處理器:最低 1.6 GHz,推薦 2.0 GHz 及以上內存:最低 512 MB,推薦 4 GB 及以上存儲空間:最低 250 MB,推薦 1 GB 及以上其他要求:穩定網絡連接,Xorg/Wayland(Linux)

如何使用 Visual Studio Code 定義頭文件?創建頭文件並使用 .h 或 .hpp 後綴命名在頭文件中聲明符號(例如類、函數、變量)使用 #include 指令在源文件中包含頭文件編譯程序,頭文件將被包含並使聲明的符號可用

vscode 內置終端是一個開發工具,允許在編輯器內運行命令和腳本,以簡化開發流程。如何使用 vscode 終端:通過快捷鍵 (Ctrl/Cmd ) 打開終端。輸入命令或運行腳本。使用熱鍵 (如 Ctrl L 清除終端)。更改工作目錄 (如 cd 命令)。高級功能包括調試模式、代碼片段自動補全和交互式命令歷史。

在 Visual Studio Code(VSCode)中編寫代碼簡單易行,只需安裝 VSCode、創建項目、選擇語言、創建文件、編寫代碼、保存並運行即可。 VSCode 的優點包括跨平台、免費開源、強大功能、擴展豐富,以及輕量快速。

VS Code 終端常用命令包括:清除終端屏幕(clear)列出當前目錄文件(ls)更改當前工作目錄(cd)打印當前工作目錄路徑(pwd)創建新目錄(mkdir)刪除空目錄(rmdir)創建新文件(touch)刪除文件或目錄(rm)複製文件或目錄(cp)移動或重命名文件或目錄(mv)顯示文件內容(cat)查看文件內容並滾動(less)查看文件內容只能向下滾動(more)顯示文件前幾行(head)

解決 Visual Studio Code 中中文註釋變為問號的方法:檢查文件編碼,確保為“UTF-8 without BOM”。更改字體為支持中文字符的字體,如“宋體”或“微軟雅黑”。重新安裝字體。啟用 Unicode 支持。升級 VSCode,重啟計算機,重新創建源文件。

VS Code 一步/下一步快捷鍵的使用方法:一步(向後):Windows/Linux:Ctrl ←;macOS:Cmd ←下一步(向前):Windows/Linux:Ctrl →;macOS:Cmd →

VS Code 終端命令無法使用的原因及解決辦法:未安裝必要的工具(Windows:WSL;macOS:Xcode 命令行工具)路徑配置錯誤(添加可執行文件到 PATH 環境變量中)權限問題(以管理員身份運行 VS Code)防火牆或代理限制(檢查設置,解除限制)終端設置不正確(啟用使用外部終端)VS Code 安裝損壞(重新安裝或更新)終端配置不兼容(嘗試不同的終端類型或命令)特定環境變量缺失(設置必要的環境變量)
