面向高級用戶的 VSCode 提示和技巧

已發表: 2022-03-11

為什麼我想成為 Visual Studio 高級用戶？

成為超級用戶是保持領先的另一種方式。 開發人員經常談論他們如何保持領先地位，以及他們如何不斷學習新事物並繼續磨練自己的技能。 這是一個經常被問到的面試問題，因為雇主往往更喜歡致力於擴大技能組合的人才。 掌握您的 IDE 和您的計算機可能是您職業發展的最佳投資之一。

開發人員一直在尋找可以讓他們更好地工作的新博客。 無論您使用什麼 IDE，它都可能有一個博客：訂閱！

另一個原因是它只是節省時間。 花時間改進您的工作流程可以帶來更高的生產力或更多的時間來享受樂趣。 今天，我們將仔細研究 Visual Studio 和 VSCode，並討論提高技能以成為高級用戶的方法。

值得花時間嗎？
（資源）

如何成為 VSCode 高級用戶？

以下是普通用戶與高級用戶的區別：

  • 深入了解你的 IDE： VSCode 有優秀的文檔，閱讀吧！
  • 定制：高級用戶定制他們的工作流程以滿足他們的特定需求。
  • 自動化所有無聊和重複的任務。
  • 不斷改進您的工作流程並跟踪您的 IDE 的發展。

在這篇文章中，我打算解釋我是如何自己解決這些問題的，並為你提供知識，讓你自己去做。 我所做的不一定適合你，至少不完全適合。 人們在不同的環境和項目中工作（對我來說，主要是在 Windows 上使用 React.js 和 TypeScript），但總體方法對每個人都有效。

用 Jest 進行測試

我一次編寫一個測試，這意味著我需要一種方法來一次運行一個測試。 但是，本機正則表達式解決方案非常笨拙。 這就是我使用 Jest Runner 的原因。 這個有用的擴展允許您執行或調試單個套件或測試。

下面的視頻顯示，您​​需要做的就是右鍵單擊測試名稱並使用上下文菜單來運行它。

用 Jest 進行測試

使用 Pact 進行測試

編寫合同測試最耗時的部分可以說是匹配。 我通過創建有用的片段來自動執行重複操作來解決這個問題。 這些是我製作的，請隨意使用（即，只需將它們複製粘貼到 VSCode 的/snippets/typescript.json ）。

下面的視頻展示瞭如何使用這些片段：

  1. 選擇所有出現的相同類型，即選擇所有字符串、時間和其他值。
  2. 使用預定義的鍵綁定，或調用Insert Snippet並選擇相關的片段，或者只是開始輸入您要使用的片段的前綴。

使用 Pact 進行測試

吉特

大多數開發人員每天都使用 Git 和 GitHub，我也是。但是，我盡量避免使用終端或 github.com。

GitHub Pull Requests and Issues 允許我在 VSCode 中輕鬆打開、編輯和審查 PR。 我發現我的 IDE 比 GitHub 的 Web 或桌面應用程序更適合審查代碼。 一些開發人員可能不同意，但我很欣賞在我的 IDE 中這樣做的一致性和舒適性。

吉特

Git 可以做很多事情，但我記住的命令卻很少。 但是為什麼首先要記住任何東西呢？ 記住你日常工作的太多細節方面並不會太有成效。

GitLens 在您的指尖展示了大量令人驚嘆的功能。 多虧了它，我很少需要到達終端才能使用 Git。

吉特鏡頭

終端定制

無論您使用哪種操作系統，您都可以比默認終端做得更好。 我正在使用 Windows 終端 + cmder。 如果您是 Unix 用戶，請查找 iTerm (macOS) 或 Oh My Zsh（Linux 和 macOS）。 我已經將它們與 VSCode 集成並添加了許多別名（快捷方式），從而節省了我編寫命令的時間。

例如：

  • ys = yarn start - 幫助我啟動一個只有兩個字符的應用程序
  • del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - 刪除提供的目錄並在完成後顯示成功消息
  • gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - 刪除除master以外的所有本地分支

在這里和那裡保存一些字符可能看起來很愚蠢，但從長遠來看，這些節省時間的功能加起來。 我發現了使用別名的第二個優勢——花更少的時間輸入它們可以幫助我保持專注並且不會失去思路，因為我不想記住如何調用命令。

代碼生成

創建一個新的組件、頁面等是我經常做的事情，而且很簡單，大多數讀者都知道。 但是創建一個新文件夾並在其中初始化文件可能很乏味。 所以，我自動化了這個過程。

下面的視頻顯示了使用中的 Supercharge React。 使用New Component ，我可以指定新組件的名稱和位置。 然後擴展程序運行一個腳本，該腳本創建一個文件夾並初始化這個新組件。

代碼生成

智能感知

VSCode 擁有強大的 IntelliSense，而且大多數時候，你不必考慮使用它。 但是，當您瀏覽建議時，您可以按Ctrl+Space查看有關每個可用選項的文檔。

IntelliSense 可以額外定制，以適應您的工作流程和個人偏好。

智能感知

鍵盤快捷鍵

我確定您使用諸如Ctrl+S和Ctrl+F之類的快捷方式。 它們都有很好的文檔記錄，如果你對 VSCode 的大量快捷方式不太熟悉，我建議你改變它並加倍努力去掌握它們。 某個綁定太笨重？ 您召喚的命令通常需要很長時間才能輸入？ 打開 VSCode 的鍵盤編輯器以創建快捷方式。

如果您想知道某個命令是否已分配給某個組合鍵，請單擊搜索欄中的鍵盤按鈕，您可以在其中記錄擊鍵。 然後，您將看到什麼/如果命令已與它們相關聯。

鍵盤快捷鍵

鼠標快捷鍵

開發人員經常被告知要提高工作效率，他們需要學會討厭鼠標而喜歡鍵盤。 如果您正在處理小而密集的文件，這可能是有效的。 但是在自動代碼格式化和包含數百行代碼的文件的時代，我認為這更像是一個例外而不是規則。

我不僅積極使用鼠標，而且還使用 Logitech Options 對其進行了自定義以適應我的工作流程。 我對鼠標上的特殊鍵進行了編程，以在 VSCode 中執行某些命令。

以下是如何“教”鼠標做更多的事情，而不僅僅是移動光標並單擊：

  1. 從右上角的菜單中選擇 VSCode。
  2. 單擊要自定義的按鈕。
  3. 從左側的操作列表中選擇按鍵分配。
  4. 在 VSCode 中輸入預定義的快捷方式。

鼠標快捷鍵

備份和同步設置

如果您無法備份並在再次需要時重新使用它，那麼定制任何東西就沒有多大意義。

本機解決方案目前僅供內部人員使用。 但是，設置同步可幫助您​​將代碼設置保存為 Gist，並允許您在多台機器之間同步工作流程。 你需要一個 GitHub 令牌來配置它，但之後，你只需要運行一個命令來上傳和下載你的設置。

推薦的 VSCode 擴展

我已經提到了幾個擴展並解釋了我如何使用它們。 以下是一些值得注意的提及：

  • 環繞：需要將一些選定的代碼包裝在箭頭函數或 try-catch 塊中？ 此擴展程序將為您完成！
  • 搜索 node_modules：即使您沒有從 VSCode 的資源管理器中排除node_modules以提高性能，該文件夾太大，無法導航。 此擴展程序可讓您搜索您正在尋找的任何內容，而不是無休止地滾動。
  • Glean 和 React Refactor 為您的 JSX 文件提供了一些有用的重構工具。
  • 自動關閉標籤會自動為 HTML/JSX/TSX 文件添加結束標籤。
  • File Utils：一種創建、複製、移動、重命名和刪除文件和目錄的便捷方式。 它也是可定制的。
  • JavaScript Booster 會自動執行一些常見的重構操作。

概括

不要成為普通用戶。 而是成為高級用戶。 總是比其他人走得更遠，看看它會把你帶到哪裡。 始終注意效率低下並嘗試減輕它們。

大多數開發人員應該熟悉我的解決方案：看板。 每次我發現讓我慢下來的事情時，我都會把它寫成待辦事項。 每當我有空閒時間時，我都會嘗試找到解決方法。

看板

如果您發現這篇文章不知所措並且不知道從哪裡開始，請閱讀文檔，它將為您提供最佳投資回報率！ 我知道閱讀官方文檔聽起來很無聊，但我保證從長遠來看它會有所回報。 它不僅會教您如何提高工作效率，而且您將學習如何編寫文檔。

為了方便起見，我編制了這份文檔必讀部分的列表：

  • 提示和技巧：有些是顯而易見的，你可能已經知道了，但我可以保證你會發現一些你不知道的東西。
  • 編輯技巧：這些編輯技巧非常強大，學習它們將使您每天受益。
  • 收縮/擴展代碼：當您與另一個開發者配對時，試試這個快捷方式，給他們留下深刻印象！
  • 鍵綁定：了解鍵綁定的工作原理以及如何自定義它們，這是掌握 IDE 的基石之一。
  • 支持數百種編程語言：了解 VSCode 針對您選擇的語言有哪些特定功能。