目錄
插件" >插件
Prettier Code Formatter" >Prettier Code Formatter
npm" >npm
npm Intellisense" >npm Intellisense
Bracket Pair Colorizer" >Bracket Pair Colorizer
Auto Close Tag" >Auto Close Tag
GitLens" >GitLens
Markdown All in One" >Markdown All in One
使用者設定" >使用者設定
字體設定
user-settings.json
首頁 開發工具 VSCode 高效開發者是如何個性化 VS Code 外掛程式與配置的?

高效開發者是如何個性化 VS Code 外掛程式與配置的?

Nov 20, 2019 am 09:49 AM
vscode 外掛

2年之前,我放棄了Sublime Text,選擇了Visual Studio Code作為程式碼編輯器。

我每天花在VS Code上的時間長達5~6小時,因此按照我的需求優化VS Code配置十分必要。過去這2年裡,我試過各種各樣的插件與配置,而現在我感覺一切都完美了,是時候給大家分享一下我的使用技巧了!

高效開發者是如何個性化 VS Code 外掛程式與配置的?

插件

VS Code有著非常豐富的插件,這裡我推薦給大家幾個我最喜歡的VS Code插件。

Prettier Code Formatter

#下載量:167萬

我使用Prettier來統一程式碼風格,當我儲存HTML/CSS/JavaScript檔案時,它會自動調整程式碼格式。這樣,我不用擔心程式碼格式問題了。由於Prettier本身無法個人化配置,有時可能會引起不適,但至少保證團隊成員可以輕易統一程式碼風格。

高效開發者是如何個性化 VS Code 外掛程式與配置的?

npm

#下載量:119萬

npm外掛程式可以檢查package.json中所定義的npm模組與實際安裝的npm模組是否一致:

  • package.json中定義了,但是實際未安裝

  • #package.json中未定義,但實際安裝了
  • package.json中定義的版本與實際安裝的版本不一致

高效開發者是如何個性化 VS Code 外掛程式與配置的?

npm Intellisense

#下載量:105萬

npm Intellisense外掛程式會為package.json建立索引,這樣當我require某個模組時,它可以自動補全。

高效開發者是如何個性化 VS Code 外掛程式與配置的?

Bracket Pair Colorizer

#下載量:95萬

Bracket Pair Colorizer可以為程式碼中的匹配的括號自動著色,以不同的顏色進行區分,這樣我們可以輕易地辨別某個程式碼區塊的開始與結束。

高效開發者是如何個性化 VS Code 外掛程式與配置的?

Auto Close Tag

#下載量:117萬

Auto Close Tag外掛的功能非常簡單,它可以自動補全HTML/XML的關閉標籤。

高效開發者是如何個性化 VS Code 外掛程式與配置的?

GitLens

#下載量:164萬

# #我非常喜歡Gitlens,因為它可以幫助我快速理解程式碼的修改歷史。

Current Line Blame:查看目前行程式碼的結尾查看最近一次commit的名稱、時間以及訊息

高效開發者是如何個性化 VS Code 外掛程式與配置的?

Current Line Hovers:在目前行程式碼的懸浮框查看詳細的最近一次的commit資訊。

高效開發者是如何個性化 VS Code 外掛程式與配置的?

Markdown All in One

#下載量:45萬

Markdown All in One插件幫助我編寫README以及其他MarkDown檔案。我尤其喜歡它處理清單以及表格的方式。

自動調整清單的數字序號

高效開發者是如何個性化 VS Code 外掛程式與配置的?

#自動格式化表格

高效開發者是如何個性化 VS Code 外掛程式與配置的?

使用者設定

除了安裝各種各樣的插件,我們還可以透過設定VS Code的User Settings來個性化我們的VS Code。

字體設定

我非常喜歡帶有ligatures(合字、連字、連結字或合體字)的字體。 ligatures就是將多於一個字母的合成一個字形。我主要使用Fira Code作為我程式設計所使用的字體,如下圖中的=>===

高效開發者是如何個性化 VS 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1243
24
vscode需要什麼電腦配置 vscode需要什麼電腦配置 Apr 15, 2025 pm 09:48 PM

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)

vscode怎麼定義頭文件 vscode怎麼定義頭文件 Apr 15, 2025 pm 09:09 PM

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

vscode終端使用教程 vscode終端使用教程 Apr 15, 2025 pm 10:09 PM

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

vscode在哪寫代碼 vscode在哪寫代碼 Apr 15, 2025 pm 09:54 PM

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

vscode終端常用命令 vscode終端常用命令 Apr 15, 2025 pm 10:06 PM

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

vscode中文註釋變成問號怎麼解決 vscode中文註釋變成問號怎麼解決 Apr 15, 2025 pm 11:36 PM

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

vscode上一步下一步快捷鍵 vscode上一步下一步快捷鍵 Apr 15, 2025 pm 10:51 PM

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

vscode終端命令不能用 vscode終端命令不能用 Apr 15, 2025 pm 10:03 PM

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

See all articles