全端大師之路 Rush.js - vscode 工作區設定

更新於 發佈於 閱讀時間約 2 分鐘

本篇將針對筆者在使用 rushjs 一陣子後,統整出來的一些小技巧

  1. 工欲善其事,必先利其器:如何把 vscode 設定的服服貼貼
  2. 存擋紀錄好混亂,統一 git commit 的格式:git-cz
  3. 什麼?!根目錄也可以放 package.json,將所有專案的指令抽離出來
  4. 坑中之坑,我要如何順利的把轉案部署上去(App Engine 與 Firebase Hosting):isolate-packag

筆者今天先針對設定 vscode 做說明,過幾天有空再繼續更新後面的

在 monorepo 專案中筆者覺得最麻煩的就是許多專案要切來切去,搞得我好亂啊

raw-image

為了解決這個問題,筆者在 vscode 外掛商店中尋尋覓覓,尋找那命定的外掛,結果…完全沒有任何可以用的QAQ

繞了一大圈結果 vscode 就有內建了 ヽ(#`Д´)ノ

為了讓大家少走點彎路,就來隆重介紹 vscode 的一個很少用到的功能『工作區』

什麼是vscode 工作區

相讓各位客官看看工作區設定完的樣子~~各個專案被分得如此漂亮,終於不用到處找檔案了٩(。・ω・。)و

raw-image

參考一下上篇中設定完各個專案時的樣子

raw-image

有沒有!!!是不是!!!如果要在這些資料夾裡面找來找去真的會瘋掉,好在 vscode 的工作區就可以好好解決這件事

教學開始

首先,在專案空白處按右鍵,點擊『將資料夾新增到工作區…』

raw-image

選擇要區分的專案,就會像這樣

raw-image

如果想把這些工作區存下來可以點擊左上角的『檔案』再點擊『另存工作區為…』,這時會存成一個『xxxxxx.code-workspace』的檔案,就可以將工作區的設定存下來啦

raw-image

搞定!就是這麼簡單ヽ(●´ε`●)ノ

今天就先分享到這,如果各位有不錯的方法,也都歡迎分享喔 (灬ºωº灬)

補充:Monorepo Workspace

補充一個可以讓工作區有 icon 的外掛『Monorepo Workspace』

raw-image

詳細設定可以看看這裡:https://marketplace.visualstudio.com/items?itemName=folke.vscode-monorepo-workspace

留言
avatar-img
留言分享你的想法!
鱈魚-avatar-img
2024/05/10
xxxxxx.code-workspace 484 應該要存到 .vscode 資料夾裡面比較好,存到別的地方的話,重開 VSCode 會一夜回到解放前
avatar-img
充滿智慧的眼神 | 程式x設計x通靈
5會員
2內容數
沒錯,看著那充滿智慧的眼神,你將會得到從未想過的程式能力、設計能力及最強的通靈能力
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本篇文章介紹如何使用Git Bash進行版本控制操作,包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令,您可以更深入地瞭解Git工具的使用方法。
Thumbnail
本篇文章介紹如何使用Git Bash進行版本控制操作,包括創建repository、查看狀態、歷程以及加入暫存和提交暫存等操作。透過基本的Git指令,您可以更深入地瞭解Git工具的使用方法。
Thumbnail
本篇將分享VSCode工作區的設定與功能,包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo,提高工作效率。
Thumbnail
本篇將分享VSCode工作區的設定與功能,包括如何將資料夾新增到工作區、如何存檔、以及外掛推薦。這些小技巧能夠幫助您在使用 rushjs 能更輕鬆地管理 monorepo,提高工作效率。
Thumbnail
Rush 為管理大型存儲庫的工具,適用於處理多個互相依賴的專案。本篇文章教導讀者如何全域安裝 Rush,進行專案初始化並在專案內添加相關檔案。同時也提供瞭如何將其他專案加入以及在專案中引入其他套件的方法。文章詳細介紹了 Rush 的主要功能和各種配置檔案的作用。另外,也提供了一些相關的參考資料。
Thumbnail
Rush 為管理大型存儲庫的工具,適用於處理多個互相依賴的專案。本篇文章教導讀者如何全域安裝 Rush,進行專案初始化並在專案內添加相關檔案。同時也提供瞭如何將其他專案加入以及在專案中引入其他套件的方法。文章詳細介紹了 Rush 的主要功能和各種配置檔案的作用。另外,也提供了一些相關的參考資料。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News