什么，VSCode 竟然是代碼編輯器？

來源：公眾號【魚鷹談單片機(jī)】，ID ??：emOsprey

VSCode 被部分網(wǎng)友稱為宇宙第一神器，最近魚鷹也算是感受到它的強(qiáng)大，主要是豐富的插件解決了眾多的開發(fā)痛點(diǎn)，而代碼編輯反而變成了其中最微不足道的一個功能。本期魚鷹介紹一下常用的插件，幫助大家更有效率的搬磚，成為最亮的那個崽。

? 1、git增強(qiáng)

這段代碼誰寫的？什么時候?qū)懙模縞ommit id 是多少？這個文件的修改記錄有哪些？如何比較兩個提交的修改？

雖然 git 命令行都可以解決，但遠(yuǎn)不如 VSCode 展示的那么直觀，并且效率大大提高了。

雖然 VSCode ?天生支持 git 相關(guān)功能，只是還需要插件增強(qiáng)：gitlens。

自帶文件對比功能，各種文件處于何種狀態(tài)一清二楚（Changes Staged Changes）

輕松查看提交記錄，并且可以隨時打開查看提交里面的文件修改情況。

只要光標(biāo)放在某段代碼上，就能輕松查看某段代碼誰提交的（這里可以看到是魚鷹四個月前提交的）：

輕松查看某個文件所有歷史提交記錄

2、流程圖

很多公司要求畫流程圖，很多時候，我們需要安裝特定軟件才能開始畫，這很麻煩，而且你要看別人的流程圖時，如果沒有裝軟件，也沒法看，很耽誤時間，這不，有個插件方便的解決了這個問題，非常便捷。

只要是 .drawio ?后綴的文件，自動打開編輯界面。

隨時編輯，同時可以將其保留在代碼倉庫，隨時跟著代碼更新而更新。并且可以導(dǎo)出圖片 png 格式，電腦和 vscode 都能打開：

3、Markdown

上面很多，功能不一樣?？梢远荚囋囆Ч＿@里魚鷹安裝的是這個：

這樣你 clone 別人代碼后，可以非常直觀的查看效果：打開預(yù)覽：

同時在 markdown 文件中畫圖：

```mermaidgraph TD    配置 -->|user config| top[bsp_cfg.h]    bsp_module[bsp_pin/app_cfg.h] -->|include| bsp[app_cfg.h]    bsp[bsp/app_cfg.h] -->|include| top[bsp_cfg.h]```

上面這段代碼放到md文件中就可以看到效果了。

4、遠(yuǎn)程開發(fā)

具體看這篇?vi 命令記不??？VSCode 遠(yuǎn)程開發(fā)幫你忙?非常推薦的現(xiàn)代化開發(fā)方式。在本地開發(fā)就和本地一樣，即使是虛擬機(jī)也可以使用，再也不用來回切換虛擬機(jī)和 windows 了

5、docker 容器開發(fā)

為什么要使用 docker，對于Linux開發(fā)方式來說，docker是所有開發(fā)者的福音，環(huán)境安裝流程可以固化，再也不擔(dān)心鏡像和軟件之間的兼容問題了。

年少不知docker好

docker通用安裝使用指南-Ubuntu-樹莓派5
后面還會更新更多 docker 在 stm32 開發(fā)的方法，歡迎關(guān)注魚鷹。

6、STM32 開發(fā)

vscode 怎么調(diào)試 stm32 代碼？這個插件可以幫助你進(jìn)行源碼級別調(diào)試，雖然不如 MDK ，但也是不錯的替代選擇。

7、PDF 文件查看

這個插件可以在 vscode 直接查看 pdf 文件，不用另外安裝軟件了

8、C語言/ Python

自動分析 C 語言語法，可以進(jìn)行代碼跳轉(zhuǎn)（按住 ctrl ，然后點(diǎn)擊需要跳轉(zhuǎn)的代碼處即可）。python開發(fā)語法提示

9、網(wǎng)頁開發(fā) live server

編輯的網(wǎng)頁如何快速查看效果？試試上面這個插件。安裝完之后，可能需要修改一下，使其自動打開谷歌瀏覽器：

網(wǎng)頁文件右擊，通過該插件打開即可，之后會在谷歌瀏覽器自動打開該網(wǎng)頁呈現(xiàn)效果。

效果：

10、娛樂

網(wǎng)易云插件聽音樂

4399 插件玩游戲

小霸王游戲

如有幫助，歡迎轉(zhuǎn)發(fā)更多同行。