VSCode 毫無疑問是一個了不起的工具，但對我來說，缺少一個重要的設置來根據語言或工作區啟用/禁用擴展。

幾乎我，整天在不同語言的項目之間跳來跳去，我有很多擴展和設置在每個場景中都無用，消耗資源。您可以在每個項目上手動禁用它，但如果您創建一個新項目，則需要重新製作。那是浪費時間。

雖然 VSCode 團隊解決了這個問題，但我們可以使用一些變通方法，為 Node 創建專用配置文件 發展。

它並不完美，因為您可以共享在多個場景中使用的那些擴展。但我更喜歡在磁盤上留出一點空間來支持快速設置配置。

創建個人資料

我們將使用 --extensions-dir 為擴展和數據創建一個新的配置文件文件夾 和 --user-data-dir 參數。

如何使用？

你瘋了嗎？每次我們想使用 Node? 時，我們都需要編寫並記住這個長命令。

不，當然不是。

在 macOS/Linux 上

在這條路徑 $HOME/.vscode/profiles/node/ 下載這張圖片：

碼頭啟動器

在同一路徑上，創建一個名為 code-node.command 的文件 裡面有這段代碼：

open -n -a "Visual Studio Code.app" --args --extensions-dir="$HOME/.vscode/profiles/node/extensions" --user-data-dir="$HOME/.vscode/profiles/node/data"

保存並使用 chmod +x code-node.command 執行權限 .

複製 icon-node.png 剪貼板上的內容。一種方法是在預覽中打開圖片，選擇 Edit > Select All ，然後選擇 Edit > Copy 或按 Command-C .

選擇 code-node.command 文件，然後選擇 File > Get Info .在 Info 窗口的頂部，單擊圖標的圖片將其選中，然後選擇 Edit > Paste 或按 Command-V .

選擇 code-node.command 文件，然後選擇 File > Make Alias 或按 Command-L 將其命名為 VSCode 節點 （中間有空格）。只需將此別名快捷方式拖放到您的 Dock 或桌面即可。

別名

在這些情況下，別名可能是我們最好的朋友。打開你的 .zshrc 或 .bash_profile 並粘貼這個。

alias code-node="code --extensions-dir \"$HOME/.vscode/profiles/node/extensions\" --user-data-dir \"$HOME/.vscode/profiles/node/data\""

保存文件並重新啟動終端窗口。現在你可以用 code . 在 VSCode 中打開一個文件夾項目 命令，但是現在，如果您要使用 Node 使用 code-node . 而是。

在 Windows 上

在此路徑 %HOMEPATH%/.vscode/profiles/node/extensions 下載這個圖標：

快捷方式

在同一路徑上，創建一個快捷方式文件並設置以下屬性：

命名為：VSCode Node

將目標設置為：

"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code\Code.exe" --extensions-dir "%HOMEPATH%/.vscode/profiles/node/extensions" --user-data-dir "%HOMEPATH%/.vscode/profiles/node/data"

開始於：

"C:\Users\%USERNAME%\AppData\Local\Programs\Microsoft VS Code"

並使用之前下載的圖標。

顏色

識別何時使用 VSCode 和 Node 風格的 VSCode 版本會很好。

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#68A063",
        "activityBar.foreground": "#000000",
        "activityBar.inactiveForeground": "#00000099",
        "activityBarBadge.background": "#303030",
        "activityBarBadge.foreground": "#ffffff",
        "statusBar.noFolderBackground": "#3C873A",
        "statusBar.background": "#68A063",
        "statusBar.foreground": "#000000",
        "statusBarItem.hoverBackground": "#3C873A"
    }
}

就這樣。現在由您決定要安裝哪些設置和擴展。這些是我最喜歡的建議。

擴展

編輯器

• 點ENV

• 模板字符串轉換器
  

{
    "template-string-converter.autoRemoveTemplateString": true,
}

• JavaScript 助手：JS 和 TS 的重構和代碼操作

調試

• 調試可視化工具

• Turbo 控制台日誌
  

{
    "turboConsoleLog.logMessagePrefix": "DEBUG -> "
}

編輯器

• 點亮html

• npm 智能感知

• 路徑智能感知
  

{
    "path-intellisense.extensionOnImport": true,
    "javascript.suggest.paths": false,
    "typescript.suggest.paths": false
}

容器

• 碼頭工人

休息

• REST 客戶端

• 迅雷客戶端

• 將 JSON 粘貼為代碼

• vscode-隨機

片段

• dein Snippets Pack - Debug + Const &Props + Arrow Functions

• JavaScript (ES6) 代碼片段

• 節點片段

同步

我不是內置 VSCode Sync 選項的忠實擁護者，因為您可以使用多個 GitHub 用戶帳戶，而且您不能創建配置文件。

不過不用擔心，我們可以使用廣為人知的 Setting Sync 擴展。

請創建另一個 GitHub 帳戶，添加 -node 到您的用戶名和 +node 到您的 Gmail 帳戶。

使用這個技巧，您可以擁有另一個 GitHub 帳戶，而無需創建新的電子郵件帳戶。只需使用您的新 username-node 賬戶，瞧，你的 Node 風格的 VSCode 版本可以跨多個設備同步。

就是這樣！
快樂編碼 🖖