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

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在我有了這些方便的一鍵式項(xiàng)目打開圖標(biāo)，我想，“如果它也能啟動(dòng)項(xiàng)目啟動(dòng)命令，那就太酷了！”。顯然，這就是Tasks 的用途，設(shè)置起來並不難（感謝Andrew?。Ｔ?code>.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)我打開這個(gè)工作區(qū)時(shí)，它就會(huì)為我啟動(dòng)gulp命令。我想你必須手動(dòng)運(yùn)行一次任務(wù)（終端→ 運(yùn)行任務(wù)），以便它擁有正確的權(quán)限，然後它就可以正常工作了。

覆蓋設(shè)置

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

例如，在CSS-Tricks，我有一個(gè)非常基本的Sass 設(shè)置，Gulp 將.scss預(yù)處理成.css 。這很好，但我可能會(huì)搜索選擇器。我不需要在.css中看到它，因?yàn)槲覐牟皇褂迷鶦SS。我可以將此添加到設(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)文章！