VSCode 基礎必備插件 超實用


1、View In Browser

在瀏覽器里預覽網頁必備

2、vscode-icons

改變編輯器里面的文件圖標,個人比較稀飯這個。其他的這里就不說了。

 
image

3、Bracket Pair Colorizer

給嵌套的各種括號加上不同的顏色

 
image

4、Highlight Matching Tag

高亮對應的 HTML 標簽 以及 標識出對應的各種括號

 
image

5、Auto Rename Tag

自動修改匹配的 HTML 標簽

 
image

6、Path Intellisense

智能路徑提示,可以在你輸入文件路徑時智能提示。

 
image

7、Markdown Preview

實時預覽 markdown

8、stylelint

CSS / SCSS / Less 語法檢查

 
image

進價必備插件

9、Live Server

彩蛋1:

下面的小字注解: n p mNode 包管理器

是這樣寫出來的:<ruby>n p m<rp>(</rp><rt>Node 包管理器</rt><rp>)</rp></ruby>

一個不錯的 Markdown 書寫技巧是吧?提升閱讀體驗,真是太刺激了 : )

我以前使用 Live Server 都是 n p mNode 包管理器 下載的,而且使用的時候需要在控制台手動敲啟動代碼。還好 VSCode 有了相應的插件,現在只需要鼠標點幾下就行了。

這個插件基本功能是預覽網頁,但它的特點是:會將網頁在本地服務器上預覽,最重要的是代碼保存之后,瀏覽器自動刷新,有多方便不用我說了吧?

使用方法:

 
image

在 HTML 文件上右鍵

打開 HTML 文件,點擊編輯器右下角 Go Live 按鈕

 
image

10、Prettier

格式化插件。有的人可能會推薦 Beautify。我原來也是一直用這個,后來發現這個並不能格式化 React 的代碼。所以果斷換成 Prettier。

11、carbon-now-sh

將代碼分享為圖片(圖片的格式可以為 png 和 svg),最最最重要的是: 圖片逼格敲高 ↓↓↓

之所以將代碼分享為圖片,是因為如果直接分享代碼,在有些地方代碼格式可能會亂。

比如:你在評論區和別人交流代碼,結果那個評論區做的很垃圾,粘貼上去的代碼格式會很亂,有的代碼甚至被解析了?所以是不是有必要將代碼分享為圖片呢?

 
image

12、Codelf

Codelf 是一個用來給變量命名的網站,你只要輸入你想起的中文名,它就會給你提供很多建議的命名:

 
image

可能很多人知道有 Codeif 這么個網站,其實 VSCode 上有插件哦,是不是很神奇 : )

 
image

沖這個網站的逼格,必須安排!

13、Turbo Console Log

快捷添加 console.log,一鍵 注釋 / 啟用 / 刪除 所有 console.log

簡直好用到犯規!

 
image

簡單說下這個插件要用到的快捷鍵:

ctrl + alt + l 選中變量之后,使用這個快捷鍵生成 console.log

alt + shift + c 注釋所有 console.log

alt + shift + u 啟用所有 console.log

alt + shift + d 刪除所有 console.log

14、GitLens

詳細的 Git 提交日志

Git 重度使用者必備,尤其是多人協作時:哪一行代碼,何時、何人提交都有記錄。

 
image

媽媽再也不用擔心我背鍋了!

15、Regex Previewer

實時預覽正則表達式的效果

 
image

16、css-auto-prefix

自動添加 CSS 私有前綴

 
image

17、Change Case

轉換命名風格

 
image

18、CSS Peek

定位 CSS 類名

 
image

19、vscode-json

處理 JSON 文件,用法看圖:

 
image

20、HTML Boilerplate

雖然 VSCode 已經內置了一鍵生成 HTML 模板的快捷方式,但這個有另外的用處,看圖:

 
image

21、settings sync

在不同電腦間同步你的插件

安裝了這么多插件,換了台電腦又得重新安裝,所以,這個插件不考慮入手嗎?

 
image

這里簡述下這個插件怎么用:

首先要想在不同的設備間同步你的插件, 需要用到 Token 和Gist id

Token 就是你把插件上傳到 github 上時, 讓你保存的那段字符,Gist id 在你上傳插件的那台電腦上保存着。

ps: 如果你沒有保存Token,也不知道Gist id,不要慌, 可以這樣獲取:

在你上傳 Sync 設置的 VSCode 里,按 F1, 然后輸入 Sync,選擇 Sync: 高級選項:

 
image

然后選擇:

 
image

這樣就會進入一個壓縮的文件,然后鼠標右鍵整理一下文檔格式如下:

 
image

這樣就能看見你的 Token 了。

接下來就是獲取你的 Gist id:

在 VSCode 里,依次打開: 文件 -> 首選項 -> 設置,然后輸入 Sync 進行搜索:

 
image

這樣就獲取到你的 Gist id。

知道了 Token 和 Gist id,就能在不同設備間同步你的 VSCode 插件。

(當然,你也可以把 Token 和 Gist id 分享給別人,這樣別人就能一鍵下載你用的 VSCode 插件!)

彩蛋2:

我的 Token 和 Gist id 分別是:

Token:

4f5135c3c9e7275950f58133bc4b5f75461ceef3

Gist id:

ce3ff9d53df48d738f1e9e86fff55a8c

里面有我用的所有 VSCode 插件 : )

其他插件推薦

22、React/Redux/react-router Snippets

React 代碼快捷生成

 
image

23、Minify

壓縮 HTML、CSS、JS 代碼

 
image

24、:emojisense:

快速挑選 Markdown 中的 Emoji

 
image

當然不想下載這個插件,可以去這個網站找你想用的 Markdown Emoji 代碼:Emoji cheat sheet for Github

也可以下載瀏覽器插件,去尋找你想要的 Markdown Emoji代碼 (這里我用的火狐瀏覽器):

 
image
 
image

當然,還有一個網站: Emoji Homepage,可以直接復制粘貼 Emoji,但是相應的 Markdown Emoji 代碼,需要自己轉換一下,比如這個表情:

 
image

鼠標經過顯示 See No Evil 那么他的 Markdown Emoji 代碼就是 :see_no_evil:(全部小寫, 空格用下划線代替)

25、TODO Highlight

高亮 TODO,FIXME、還可以自己配置要高亮的關鍵字。

我猜小伙伴們在跑代碼時一定和我一樣,經常打一些 TODO 標記吧?

所以,這個插件很適合你!

 
image

26、Icon Fonts

添加字體圖標

 
image

27、SVG View

預覽 SVG

image

28、px to rem

像素轉 rem

29、code spell checker

對基本關鍵字拼寫校驗:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM