用好 VSCode 這 13 款插件和 8 個快捷鍵,工作效率提升 10 倍

2021-03-02 程式設計師的那些事

(給程式設計師的那些事加星標)

作者:後端技術學堂/lemon (本文來自作者投稿)

話不多說,馬上進入我們今天的主題吧。

又見VSCode

Visual Studio Code(簡稱VS Code)是一個由微軟開發,同時支持Windows 、Linux 和 macOS 等作業系統的免費代碼編輯器,在2019年的Stack Overflow組織的開發者調研中,VS Code被認為是最受開發者歡迎的開發環境。

之前寫過一篇文章詳細介紹如何使用 VSCode 進行遠程開發,文章得到了眾多讀者的廣泛好評,傳送門:《手把手教你配置 VS Code 遠程開發工具,工作效率提升 N 倍》。

VSCode 遠程開發環境相對其他 IDE 的遠程開發環境,實現了真正的遠程開發,在本地主機(一般是Windows或MAC)上的操作的對象直接就是遠程機(Linux),所有本地主機上的修改直接基於遠端文件,擺脫了傳統開發流程在本地編輯文件,利用FTP工具上傳到遠程編譯機調試編譯,這一套繁瑣的操作,因此非常的方便。

接著上篇VsCode教程,這篇文章我會結合日常工作使用經驗,教你打造一個體驗流暢的 C/C++ 開發環境,這份配置指南可能不是面面俱到,也不會詳細的教你一步步怎麼配置插件,這些太細節的工作留給你自己去完成,實際上插件下載頁都會有詳細的說明。

不少新手可能會覺得 VsCode 編輯文本還好,看代碼和寫代碼太難用,那是沒有掌握正確的打開方式,VsCode 精髓是豐富的插件體系支持,相信看完這篇文章配置好環境之後,就只剩一句「真香」能形容

為了有個直觀的印象,先來看下我的 VsCode 插件列表,因為我用VsCode 開發 C/C++/Go/Python 程序,插件比較多,有些可能和本文無關的插件可以忽略掉。

基礎開發插件

既然是配置支持C/C++環境下開發,那首先推薦的基礎 C/C++ 開發插件,以下兩個是必須要裝的插件,主要提供一些基礎的代碼調試和查看功能,安裝以後 VsCode 就能支持智能化代碼補全、類型填充和聯想、符號和函數定義跳轉、引用查找等 C/C++ 程序開發和源碼管理必備能力,讓你的 VsCode 從編輯器進化成 IDE 的基礎插件。

源碼閱讀

程式設計師日常工作有兩大內容,一個是寫自己的代碼,一個是閱讀別人寫的代碼,下面這兩個插件讓你在 VsCode 優雅看代碼。

首先推薦的是下面的這個懶人神器 TODO Tree,自己寫的 TODO 哭著也要補充實現。

TODO Tree

這個插件的使用場景是,你看完代碼加了下面這個注釋 :// TODO 以後會擴展這部分功能 當然,不知道這個「以後」是什麼時候,一不小心以後變成遙遙無期,一部分原因是不想改,另一部分原因是寫下這段注釋的人時間久了就忘記了,這時候你需要「 TODO Tree 插件」,我們可以更方便的管理代碼中的此類注釋。

這個插件能幫你組織和管理TODO 注釋,你在代碼中注釋的帶 TODO 的標籤會統一在側邊欄顯示出來,當然不限於 TODO 注釋,可以自定義管理標籤比如 FIXME 等,可以基於標籤過濾和篩選。

另一個推薦的源碼閱讀插件是 Bookmarks

「書籤」這個插件的功能就和它名字一樣直接,沒錯它就是一個你的源碼書籤,當我們看大工程源碼的時候,往往需要在成千上萬個源文件之間跳轉,此外, Bookmarks 能幫你方便的創建和管理書籤,看到哪個位置想加個書籤就按快捷鍵 Ctrl + Alt + K ,多按一次就是刪除,不僅如此他還提供了在書籤之前跳躍和查看管理的功能,更多功能可以自己體驗,反正我看大工程源碼用這個很爽。

代碼管理

下面介紹兩個 Git 版本控制相關的插件,項目中我們用的最多的版本控制工具是 Git ,當然 VsCode 自身提供了比較豐富的 Git 版本控制功能,基本上可以通過在界面點點點完成一些了Git 操作,但我今天要介紹的這兩個插件能讓你的 Git 更驚豔,算是對功能的增強,讓你的 Git 操作更直觀好用,好看的東西誰不喜歡呢?

第一個出場的是Git Graph 插件,可視化Git倉庫,讓你的提交記錄看起來美觀大方,並且基於圖中提交點提供了豐富的Git 操作。

GitGraph

如圖中你所見到的樣子,提交記錄變成一條條時間線,分支也能清晰的用不同顏色時間線區分出來,並且點開提交線上的提交點可以查看當時的提交動作,可以在提交動作上查看做了哪些改動,也可以方便的跳轉到改動文件,更多功能自行體驗,這個插件 lemon 強烈推薦!

下面介紹的這個GitLens 插件也是Git功能增強工具。

GitLens

我最喜歡它的一個功能是,它可以在文件中改動的位置後面直接顯示出本次改動的提交信息,然後你可以直接通過顯示的提交信息跳轉到提交文件對比,其實還有其他豐富的功能,不過這個功能我用的最多。

小而美的工具

下面這幾個插件是我在日常使用中積累的工具插件,非必須,但是擁有了之後編碼幸福感倍增,下面一一介紹給大家。

第一個是下面這個Bracket Pair Colorizer插件,我管它叫彩虹括號插件。

彩虹括號

你是否為經常為寫的大括號、花括號、小括號沒有匹配而煩惱?是否經常找匹配括號看瞎了眼?現在不要 888 也不要 998,只需一鍵下載安裝這個插件就再也不用擔心啦。這個插件讓你寫的每一個括號都能找到他自己的顏色,成雙成對,點一下其中一半括號自動匹配另一半,拯救了廣大程式設計師的近視眼睛度數。

再來介紹下面這個koroFileHeader插件,這個插件主要用於自動的插入頭文件開頭的說明和函數的說明。

koroFileHHeader

比如我們經常看到別人的頭文件開頭是這樣的模板:

/******************************************************************************
*  FILENAME:    niu_bi_head_file.h
*  DESCRIPTION: 非常厲害的頭文件
*  HISTORY:     Date        Author      Comment
*               2020/09/05  lemon
*******************************************************************************/

這個可不是別人一個個字打出來的,安裝插件之後你只需要簡單配置想要的格式,然後按下快捷鍵Ctrl + Alt +i 即可自動即可自動生成這樣一個模板。

類似的對函數的說明注釋模板,只需按下快捷鍵Ctrl + Alt +t 即可完成,非常的方便。

下面這個插件Switcher,這個插件能在頭文件和 C/C++ 文件之間跳轉。

這個插件完全是因為我太懶想省力,才找的一個輔助工具,我們經常需要通過頭文件跳到對應的源文件,或者從源文件跳轉到對應的頭文件,當然可以在側邊欄的文件管理器中選擇打開,但是多了一個步驟有點繁瑣,所以我找了這個插件,其實按插件的說明文檔,它是能在不同的文件類型之間跳轉,不僅僅局限於頭文件和源文件,懶人福音,你值得擁有。

實用工具

下面這幾個插件是比較實用的工具插件,各取所需。

第一個是官方提供的 VsCode 中文漢化包。雖然lemon提倡並鼓勵大家多多實用英語,但若你不想折騰,那咱們家漢語博大精深,好優美的中國話,那就讓VsCode也來說漢語吧,Microsoft 官方直供,兼容性好,放心食用。

中文語言包

下面這個是 Markdown 預覽增強插件。對於經常寫博客或文章的人來說,Markdown 肯定是少不了的,這個插件支持分屏預覽,各種豐富的Markdwon 增強功能。

markdown增強

最後這個 shellman 插件是 Linux shell 腳本輔助工具。在 Linux 下工作難免隨手寫一個腳本,這個插件能提供了便捷的shell script 自動補全和聯想等功能,提高你的腳本編寫速度和準確性。

shellman

以上就是我開發環境中配置的常用插件,快來抄作業,跟著配置起來你就擁有了一個流暢的C/C++開發環境。搭配下面講的插件部分內容服用,效果更佳。

最常用快捷鍵

快捷鍵太多,沒必要完全記下來,只需記住一些常用的快捷鍵即可,一些不常用的快捷鍵在使用的時候加強記憶就好。列舉出我自己常用的快捷鍵,不多,但夠用!應付日常開發工作綽綽有餘。

Ctrl + Shift + P  這個必須要放在第一位,這個命令是所有「命令之母」。這麼說一點也不過分,它會打開 VsCode 命令窗口,在這個窗口下輸入上述的插件名稱就能知道這個插件支持哪些特性了,順帶還會說明特性快捷鍵。

下面舉個例子,先輸入Ctrl + Shift + P 打開命令查找輸入框,然後輸入 bookmarks 就能知道這個插件的支持的所有特性,順便記下快捷鍵。

Ctrl + P 文件查找。快速打開文件列表,輸入關鍵字匹配文件,優先顯示最新打開過的文件,方便的在指定文件之間跳轉。

F12 跳轉到定義,這個沒啥好說的,跳轉到函數或符號的定義,這是高頻操作。

Alt + F12 以預覽方式在當前頁面顯示定義,都是查看定義,相對 F12的優點是不會跳出當前文件到定義文件,而是在當前文件打開一個小窗口預覽,如下圖:

Shift + F12 查看光標所在函數或變量的引用,就像 Alt +F12 一樣以預覽方式在當前文件打開引用的文件列表。如下圖:

Alt + 左/右箭頭 前進或者後退到光標所在源碼的上一個位置。

Ctrl + Shift + O 查看當前文件的符號,可以用關鍵字過濾符號,當然你也可以在左側的大綱視圖中查找符號,不過大綱視圖不能查找匹配符號,所以我更習慣用快捷鍵方式查找符號。

符號和函數查找

快捷鍵講完了嗎?沒有,太多快捷鍵了;其他的快捷鍵不重要嗎?因人而異吧,高頻使用的快捷鍵就是重要的,而上面我說的這幾個是超高頻使用,記住這幾個差不多就行了,剩下快捷鍵你如果用的多了自然就記住了,但是我上面說的這幾個快捷鍵請務必先記在腦子裡,這會大大降低你的使用成本,儘早享受 VsCode Coding 的樂趣

最後說幾句

想起我上大學的時候,大一學習C語言課必須安裝VC++ 6.0才行,那時候也有 Visual studio 這樣的 IDE,不過老師沒推薦其他 IDE,都是憑藉自己對編程的興趣發現了更多比VC++ 6.0 更加 '現代化' 的 IDE,比如Jetbrain 系列和Visual studio系列,愛不釋手各種嘗試。

現在主流的 IDE 已經非常豐富,其實編輯器或者 IDE 只是一個工具,沒有最好自己用的順手就行,就像 Vim 黨和 Emacs 黨誰也說服不了誰一樣,自己喜歡就好。

大家更應該關注編程這件事本身,提高自身硬實力才是最緊要的,不過好的工具能讓你事半功倍,這點我也是完全贊成的,希望這篇文章也能夠讓你事半功倍。

如果文章對你有幫助,請不吝點擊「在看、分享」激勵我持續創作。

- EOF -


關注「程式設計師的那些事」加星標,不錯過圈內事

好文章,我在看❤️

相關焦點

  • 33 個提高前端工作效率的 VSCode 實用插件
    不不不,今天我們來聊聊vscode中那些提高工作效率的實用插件吧。咱們也不能一天天光摸魚,還是得幹點正事。特此,我整理了一些好用的vscode插件,如果覺得不錯,歡迎一鍵三連,你們的點讚,就是我持續寫文最大的動力🙈🙈🙈本文從基礎必備、代碼規範、開發神器三個方面來推薦,方方面面都有涉及
  • 這款提升工作效率的App,用了兩年依然好用
    專業療愈助眠曲、大自然白噪音、放鬆輕音樂和色彩心理催眠暗示巧妙交融在一起,幫你阻擋外界的嘈雜與喧鬧,身體仿佛置身一座能催眠的小島,腦海困意來襲,眼皮慢慢地緊緊地的閉上,短時間進入深睡狀態。小睡眠,幫助入睡,用了半年,平時工作壓力大,下班晚,入睡困難,其實身體已經疲憊不堪。聽了它就能靜下心來慢慢沉澱下來。
  • 這幾個插件,讓你的 vscode更牛逼
    常說「工欲善其事,必先利其器」,一款好用的編輯器幫助我們提高工作效率。簡介vscode 微軟在15年推出的免費跨平臺的編輯器,並且具有很強大的功能。為什麼推薦vs code就是vscode。當然支持這麼多功能也是建立在豐富的插件上的。每一個好的插件使得vscode 用起來更加的強大。我現在主要使用vscode在 markdown ,git ,Java,文本功能。本篇文章也是建立在這個基礎上完成。
  • 162個超實用的Win10快捷鍵即拿即用,幫你10倍提升工作效率!
    會用電腦和用好了電腦是兩回事!你每天工作都需要面對著的電腦,你真的了解它嗎?今天給您推薦的是:《Win10快捷鍵大全》用好Win10的快捷鍵,10倍提升你的工作效率!那你就只能加班加點地工作,看著身邊的同事操作電腦如行雲流水,到點就下班。只有你還在滿頭大汗地核對數據,一個個複製粘貼,還要反覆點擊頁面切換,一而再再而三地核對。有時候不禁問自己:「為什麼我用了這麼多年電腦,操作還是這麼不熟練?
  • 用好 VS Code這 13款插件和 8個快捷鍵,俺又飄了~
    不少新手可能會覺得 VsCode 編輯文本還好,看代碼和寫代碼太難用,那是沒有掌握正確的打開方式,VsCode 精髓是豐富的插件體系支持,相信看完這篇文章配置好環境之後,就只剩一句「真香」能形容。版本控制功能,基本上可以通過在界面點點點完成一些了Git 操作,但我今天要介紹的這兩個插件能讓你的 Git 更驚豔,算是對功能的增強,讓你的 Git 操作更直觀好用,好看的東西誰不喜歡呢?
  • 能讓你開發效率翻倍的15款VSCode 插件/擴展配置!
    [7]ESLint 如何配置 可以參考這篇文章-企業級前端開發規範如何搭建 🛠[8]ESLint 配置好之後,我們接下來看看啟用/禁用 ESLint 擴展的效果禁用 ESLint 擴展的效果禁用 ESLint 擴展時,當我們編寫不符合 ESLint 規範的代碼時,只有啟動項目或執行 ESLint
  • 10 個必備的 VSCode 插件
    你只需在顏色上懸停光標,就可以預覽色塊中色彩模型的(HEX、 RGB、HSL 和 CMYK)相關信息了。插件地址:https://marketplace.visualstudio.com/items?itemName=bierner.color-info8.
  • ​WebStorm 超好用的10款插件,效率提升了好多!
    今天主要跟大家介紹這款軟體的10款最好用的插件,分享給大家!Ps:本篇介紹的大部分插件,IntelliJ IDEA 上也基本都可以使用!1、CodeGlance用過 sublime 的同學會知道右側有一個當前文件中代碼的縮略圖,這個插件可以讓 webstorm 也具有此功能。
  • 提升效率神器,這12款VS Code 插件還沒安裝?
    性能遠超Atom和webstorm,你有什麼理由不用它?在這裡,我會給你們推薦12款實用的插件,讓你對 vscode 有更深刻的體會,漸漸地你就會知道它有多好用。GitLens彌補了這些缺陷,有助於提交我們開發和閱讀的效率。列舉一些GitLens的常用功能:1.歷史視圖。展示當前文件的歷史變更記錄。
  • 10個Win+組合快捷鍵,讓你的工作效率提升10倍
    在鍵盤的左下角,Ctrl鍵和Alt鍵的中間,主鍵盤右邊也有一個。其實它的功能很強大,常見就是不常用。今天,小編整理了10個Win鍵組合應用的典型用法,希望能幫助大家提升工作效率!單獨使用win鍵Win+P這個快捷鍵估計很少有人用到,它的功能是打開投影儀或無線顯示器,平時工作中可能用的比較少。按下Win+P後,界面會彈出一個選擇菜單,根據需要選擇即可,非常方便。Win + 空格
  • 用 Mac 提升工作效率的 5 種方法
    Mac 系統一向以提供高效的工作環境著稱,iOS,Android 和 server 端程式設計師都可以輕鬆的在 Mac 上搭建舒適的開發環境。筆者主要從事 iOS 開發,一般在 macbook 上工作,以下是這些年累積下來的一些提升工作效率的方式,和大家分享。
  • 一位優秀產品經理的寶箱:13款讓工作效率提升10倍的工具匯總
    網際網路公司的產品經理在日常工作中離不開一些專業工具軟體的支持。這篇文章,饅頭妹妹誠意推薦13款讓產品經理工作效率提升10倍的工作軟體,快快收藏噢~Worktile 是一個專注於提高企業協作效率的平臺,它以任務看板方式展現團隊內部的信息和分工安排,主要解決團隊項目協作效率低下的問題。看板管理和樂高積木式的模塊化功能是Worktile的最大特點。用戶可以在項目看板上按工作習慣和流程打造貼合自身的工作流;通過充足的自定義權限可定義團隊、項目、任務的多種屬性。
  • VSCode 必裝的 10 個高效開發插件
    VSCode 的基本使用視頻教程在我們的知識星球社區中給大家分享過我原創的 10 集視頻教程「VSCode 高效開發必裝插件」。此課程為 VSCode 編輯器系列課程。VSCode 強大的插件庫使得其在提升開發效率方面更加的無敵,系列課程給大家分享了必裝插件的安裝、配置與使用技巧相關的知識。
  • 14個vscode必用插件
    14個vscode常用插件1、auto rename tag, html自動更新配對標籤名稱
  • 13款爆款Chrome插件神器,工作效率提升80%!(附下載)
    這是因為 Chrome 支持大量擴展插件,能幫你短時間內完成更多工作,同時比一些 App 消耗更少的系統資源。舉個例子,如果你發現自己工作時刷微博的時間有點太多了,那你就可以下載上述的禁網插件來幫自己抵抗誘惑。
  • 提升 Chrome 使用效率的 30個快捷鍵、16個擴展插件與 12個前端調試方法
    前言★如果你要用一種工具用幾年,甚至十幾年,那就現在開始用它,用的爛熟,那你可以將來的工作中節省掉很大一部分的時間。我還記得 18 年的時候,有一次小組開會,當時的老大說我的工作效率不夠高,他見我當時不服的表情,然後他又當場問我:瀏覽器的快捷鍵記得有幾個 ?
  • 8款提升效率神器,太!好!用!了!
    我們都知道軟體的快捷鍵能大大的提升工作效率,但快捷鍵往往只針對於某一軟體,即使再方便,當我們遇到其他方面的需求時也難以滿足。於是,人們開發了數量龐大的多功能神器軟體!幫助人們節省下了許多時間。而Windows作為市面上覆蓋範圍最廣的電腦系統,開發者們圍繞其開發的程序不在少數,那麼在比比皆是的軟體中,哪一款才是真正值得佔用我們電腦空間的軟體呢?
  • 這些Windows技巧,讓你的工作效率10倍提升
    Ctrl+F經常用Office的肯定不陌生,這是查找的快捷鍵。但其實在Windows中,除了Office能用外,只要是屏幕上顯示內容都可以查找,比如Chrome等。Window常用快捷鍵熟記快捷鍵,效率提高不少,當然還有很多。依據個人經驗整理而成,要是遺漏歡迎補充。1.  WindowsTab能夠像Chrome標籤一樣管理多個文件夾,或者軟體。
  • 提高 VSCode 寫代碼效率的技巧
    編輯器一鍵預覽 markdownmarkdown 需要安裝插件麼?不需要,vscode 本身就內置了這個功能。diff 視圖快速在 diff 之間跳轉當文件內容特別多,比如好幾千行的時候,要找 diff 還是比較麻煩的。其實根本不用自己去找,還容易漏,vscode 編輯器提供了上下按鈕,可以直接跳到上一個 diff、下一個 diff
  • 讓你 vscode 寫代碼效率更高的技巧
    是我們寫代碼常用的編輯器,它的功能很多,但其實我們有很多功能都沒用到,這篇文章就是想梳理下那些可能你不知道的但是卻對效率提高很有幫助的一些技巧。,可能很多同學都沒注意到這些按鈕,但其實是很有用的。快速搜索功能入口知道 vscode 有某個功能但是不知道入口在哪?直接用 help下面的搜索框,搜索結果會直接標出來在哪個菜單下有什麼按鈕。