VS Code 工作流改進(jìn)：工作區(qū)、圖標(biāo)和任務(wù)

最近我發(fā)現(xiàn)了一個之前不知道的 VS Code 功能：在一個項(xiàng)目文件夾打開的同時，可以添加另一個不同的根文件夾到同一個窗口中。我之前一直以為，打開一個項(xiàng)目只能有一個頂級根文件夾，如果需要打開其他文件夾，必須在新窗口中打開。但事實(shí)并非如此！

在 CodePen，我們使用“雙倉庫”模式（一個主 Ruby on Rails 應(yīng)用，一個微服務(wù)），現(xiàn)在我可以同時打開這兩個倉庫：

現(xiàn)在，我可以跨兩個項(xiàng)目進(jìn)行搜索，基本上可以把它當(dāng)成一個大項(xiàng)目來處理。

第一次這樣做，然后關(guān)閉 VS Code 窗口時，它會詢問你是否要保存一個“工作區(qū)”。我之前一直覺得有點(diǎn)麻煩，認(rèn)為它會創(chuàng)建一個文件，而我沒有合適的存放這類文件的地方（我避免將其放在倉庫中，因?yàn)椴幌霃?qiáng)加我的系統(tǒng)給其他人）。

最終，我克服了懶惰，創(chuàng)建了一個本地文件夾來存放所有 .code-workspace 文件。這些文件非常有用，我可以將它們添加到 Dock 中，一鍵打開我設(shè)置好的工作區(qū)。

自定義工作區(qū)圖標(biāo)

工作區(qū)文件有特殊的圖標(biāo)：

由于我將這些文件放在 Dock 中，我想到可以為它們創(chuàng)建自定義圖標(biāo)！這將使我的工作區(qū)一目了然，也更方便使用，因?yàn)槲颐刻炜赡軙啻未蜷_它們。

我從原始圖標(biāo)中獲取了 SVG logo，并將其放置在我的項(xiàng)目 logo 的右下角。

在 macOS 上更改 logo 非常簡單：只需右鍵點(diǎn)擊文件，選擇“顯示簡介”，然后點(diǎn)擊面板中的 logo，粘貼新的圖片即可。

現(xiàn)在，我可以將它們保存在 Dock 中，并一鍵打開所有項(xiàng)目：

打開項(xiàng)目時啟動終端命令

現(xiàn)在我有了這些方便的一鍵式項(xiàng)目打開圖標(biāo)，我想，“如果它也能啟動項(xiàng)目啟動命令，那就太酷了！”。顯然，這就是 Tasks 的用途，設(shè)置起來并不難（感謝 Andrew?。?。在 .vscode/tasks.json 文件中，我添加了以下內(nèi)容：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Gulp",
      "type": "shell",
      "command": "gulp",
      "task": "default",
      "presentation": {
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

每當(dāng)我打開這個工作區(qū)時，它就會為我啟動 gulp 命令。我想你必須手動運(yùn)行一次任務(wù)（終端 → 運(yùn)行任務(wù)），以便它擁有正確的權(quán)限，然后它就可以正常工作了。

覆蓋設(shè)置

我不認(rèn)為這僅僅是工作區(qū)特有的功能，但我真的很喜歡在項(xiàng)目文件夾中使用 .vscode/settings.json 文件來覆蓋 VS Code 設(shè)置。

例如，在 CSS-Tricks，我有一個非?；镜?Sass 設(shè)置，Gulp 將 .scss 預(yù)處理成 .css。這很好，但我可能會搜索選擇器。我不需要在 .css 中看到它，因?yàn)槲覐牟皇褂迷?CSS。我可以將此添加到設(shè)置文件中，并知道它只適用于此項(xiàng)目，而不是所有項(xiàng)目：

{
  "search.exclude": {
    "**/*.css": true,
  }
}

以上是我的VS代碼工作流（工作區(qū)，圖標(biāo)，任務(wù)）的一些改進(jìn)很少的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！