27個適用于JavaScript開發(fā)的VSCode工具

這篇文章主要介紹27個適用于JavaScript開發(fā)的VSCode工具，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供南安網(wǎng)站建設(shè)、南安做網(wǎng)站、南安網(wǎng)站設(shè)計、南安網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、南安企業(yè)網(wǎng)站模板建站服務(wù)，10余年南安做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

Visual Studio Code（也稱為VSCode）是一種輕量級但功能強(qiáng)大的跨平臺源代碼編輯器, 借助對TypeScript 和Chrome調(diào)試器等開發(fā)工具的內(nèi)置支持，越來越多的開發(fā)都都喜歡使用它。

如果你正在尋找更多的好用的 VSCode 工具，那么這篇或許能夠幫助你。以下是 2019年為 JS 開發(fā)者提供的27個不可思議的VSCode工具。

1. Project Snippets (代碼片段)

project snippets，這是我最喜歡的一個工具，它來自于 VSCode 中內(nèi)置的原始用戶代碼片段。 該特性允許你創(chuàng)建自己的代碼段，以便在整個項目中重用。

但是**“重用”**它們到底意味著什么？

如果咱們經(jīng)常要重復(fù)寫下面這樣的樣板文件：

import { useReducer } from 'react'

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

const useSomeHook = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return {
    ...state,
  }
}

export default useSomeHook

實際上，咱們可以直接將上面的代碼放到的用戶代碼片段中，因此不必寫出(或復(fù)制和粘貼)整個代碼片段，只需鍵入一個自定義前綴來生成配置的代碼片段即可。

打開 VsCode，然后選擇 文件 >首選項 > 用戶代碼片段，則可以選擇通過單擊 '新建全局代碼片段文件'來創(chuàng)建新的全局代碼片段。

例如，要為 TypeScript React 項目創(chuàng)建自己的代碼片段文件，可以單擊新建全局代碼片段文件，輸入 typescriptreact.json。它將引導(dǎo)咱們訪問一個新創(chuàng)建的.json文件，可以使用該文件來構(gòu)建使用TypeScript 的 React 應(yīng)用程序。

例如，要從上面的代碼示例創(chuàng)建一個用戶片段，可以這樣做:

{
  "const initialState = {}; const reducer = (state, action)": {
    "prefix": "rsr",
    "body": [
      "const initialState = {",
      "  //$1",
      "}",
      "",
      "const reducer = (state, action) => {",
      "  switch (action.type) {",
      "    default:",
      "      return state",
      "  }",
      "}"
    ]
  }
}

有了它，咱們可以創(chuàng)建一個以.tsx結(jié)尾的新TypeScript文件，在新創(chuàng)建的文件輸入rsr，然后按回車或 tab 鍵 VSCode 就會幫咱們生成代碼片段內(nèi)容。

const initialState = {
  //
}

const reducer = (state, action) => {
  switch (action.type) {
    default:
      return state
  }
}

全局用戶代碼片段的問題是，它將貫穿咱們所有項目(在某些情況下，這對于一般的代碼片段來說是非常強(qiáng)大的)。

一些項目將以不同的方式配置，當(dāng)需要區(qū)分特定的用例時，用于配置代碼片段的全局文件就成了一個問題。

例如，當(dāng)每個項目的項目結(jié)構(gòu)不同時

{
  "import Link from components/common/Link": {
    "prefix": "gcl",
    "body": "import Link from 'components/common/Link'"
  },
  "border test": {
    "prefix": "b1",
    "body": "border: '1px solid red',"
  },
  "border test2": {
    "prefix": "b2",
    "body": "border: '1px solid green',"
  },
  "border test3": {
    "prefix": "b3",
    "body": "border: '1px solid magenta',"
  }
}

這對于具有特定file/folder結(jié)構(gòu)的項目可能就足夠了，但是如果咱們正在處理另一個項目，其中 Link 組件具有類似components/Link的路徑，該怎么辦？

請注意這三個border tests是如何將它們的值用單引號括起來的：border: '1px solid red'。

這在 JS 中是完全有效的，但是如果使用 styled-components 作為項目的樣式解決方案呢?該語法不再適用于該工作區(qū)，因為 styled components使用普通的CSS語法

這就是 project snippets 的亮點所在。

Project snippets使咱們可以聲明項目/工作區(qū)級別的代碼段，讓當(dāng)前項目代碼段不會與其它項目沖突也不會污染其他項目。

2. Better Comments(更加人性化的注釋)

如果喜歡在代碼中編寫注釋，那么有時你可能會發(fā)現(xiàn)搜索您以前編寫的特定注釋的位置是令人沮喪的，因為代碼可能會變得有些擁擠。

有了 Better Comments，可以通過引入彩色注釋使注釋更加明顯。

3. Bracket Pair Colorizer (標(biāo)簽匹配 括號匹配插件)

第一次看到Bracket Pair Colorizer的屏幕截圖時，我第一時間入安裝使用了。

4. Material Theme

Material Theme是一個史詩主題，可以直接安裝到VSCode中，安裝后代碼看起來像這樣：

5. @typescript-eslint/parser

如果你是一個TypeScript用戶，應(yīng)該開始考慮將你的 TSLint 配置轉(zhuǎn)移到ESLint + TypeScript上，TSLint 背后的支持者已經(jīng)宣布計劃在今年的某個時候棄用 TSLint。

項目正逐步采用@typescript-eslint/parser和相關(guān)包，以確保其項目的前瞻性設(shè)置。

咱們?nèi)匀荒軌蚶么蟛糠諩SLint的規(guī)則和兼容性與更漂亮使用新的設(shè)置。

6. Stylelint

對我來說，出于以下幾個原因，stylelint 在我所有的項目中都是必須的：

1. 它有助于避免錯誤。

2. 它加強(qiáng)了CSS中的樣式約定。

3. 它與Prettier支持并駕齊驅(qū)。

4. 它支持 CSS/SCSS/Sass/Less。

5. 它支持社區(qū)編寫的插件。

7. Markdownlint + docsify

markdown 愛好者一定要試試 vscode 上的 markdownlint 擴(kuò)展，會用綠色波浪線給你提示出 N 多不符合書寫規(guī)范的地方，比如：

• 標(biāo)題下面必須是個空行

• 代碼段必須加上類型

• 文中不能出現(xiàn)<br>這種html標(biāo)號

• URL必須用< >擴(kuò)起來

同時也可以配合安裝 docsify，因為它支持Markdown和每個項目的其他增強(qiáng)。

8. TODO Highlight

如果習(xí)慣在應(yīng)用程序代碼中編寫待辦事項的開發(fā)者，可以安裝 TODO Highlight 這樣的擴(kuò)展名對于突出顯示整個項目中設(shè)置的待辦事項非常有用。

9. Import Cost

Import Cost 可以顯示咱們在VS代碼編輯器中導(dǎo)入的程序包的大小。

10. Highlight Matching Tag

有時，試圖匹配標(biāo)簽的結(jié)束地方會令人沮喪，這時 Highlight Matching Tag 就派上用場了

11. vscode-spotify

程序員經(jīng)常邊聽歌邊打代碼，有時候?qū)懙揭话?，歌太難聽，想切換，得切到音樂播放器，然后在回到 VsCdoe 界面，有點麻煩。

這就是 vscode-spotify 用武功之地，因為它可以在VSCode內(nèi)直接使用音樂播放器。

有了這個擴(kuò)展，各位就可以在狀態(tài)欄中看到當(dāng)前播放的歌曲，可以通過熱鍵在歌曲之間切換，也可以點擊按鈕來控制音樂播放器等等。

12. GraphQL for VSCode

GraphQL一直在發(fā)展，咱們經(jīng)?？梢栽?JS 社區(qū)中看到它的身影。因此，最好開始考慮在 VSCode中安裝 GraphQL for VSCode。

13. Indent-Rainbow

Indent-Rainbow 會給縮進(jìn)添加一種顏色,讓你更加直觀的看到代碼層次。

14. Color Highlight

Color Highlight 可以在代碼中突出顯示顏色，如下所示：

15. Color Picker

Color Picker 是一個 VSCode 擴(kuò)展，它為咱們提供了一個圖形用戶界面，用來選擇和生成顏色代碼，如 CSS 顏色符號。

16. REST Client

第一次看到 REST Client 并嘗試它時，與現(xiàn)有的軟件(如Postman)相比，它似乎不是一個非常有用的工具。

但是，對 REST Client擴(kuò)展的用法了解越多，就會意識到它對開發(fā)工具的影響有多大，尤其是在測試API 時。

只需要創(chuàng)建一個新文件寫入下面這一行：

https://google.com

然后轉(zhuǎn)到命令面板(CTRL + SHIFT + P)，單擊Rest Client: Send request，它會在一瞬間彈出一個包含請求響應(yīng)詳細(xì)信息的新選項卡，非常有用：

甚至還可以傳遞參數(shù)，或?qū)⒄埱篌w數(shù)據(jù)請求到POST，而下面僅需幾行代碼：

POST https://test.someapi.com/v1/account/user/login/
Content-Type: application/json

{ "email": "someemail@gmail.com", "password": 1 }

就會發(fā)送POST請求，參數(shù)為 { "email": "someemail@gmail.com", "password": 1 }。

17. Settings Sync

vscode上有各種各樣不同的插件，如果要在不同的電腦上使用 vscode 配置是件比較麻煩的事情，使用 Settings Sync 將 vscode 配置備份起來，當(dāng)需要在其他電腦使用  vscode  時只需下載備份的配置就可以了。

咱們只需要一個 GitHub 帳戶，并且每次要保存配置（包括按鍵綁定，代碼片段，擴(kuò)展名等）時，只需按SHIFT + ALT + U將私有設(shè)置上傳到 GitHub 帳戶即可。 然后，下次登錄或重新格式化為另一臺計算機(jī)時，可以按SHIFT + ALT + D組合鍵立即下載配置。

18. Todo Tree

Todo Tree 將幫助咱們找到在整個應(yīng)用程序代碼中創(chuàng)建的所有待辦事項。它將把它們放到一個單獨的樹中，還可以在面板的左側(cè)同時查看它們

19. Toggle Quotes

Toggle Quotes是一個有趣的實用工具擴(kuò)展，它允許咱們在引號之間進(jìn)行切換。當(dāng)需要在使用字符串插入時切換到反引號時，它就派上用場了。

20. Better Align

Better Align 對齊賦值符號和注釋。要使用它，將光標(biāo)放在想要對齊的代碼中，使用CTRL + SHIFT + P打開命令面板(或者使用自定義快捷方式打開命令面板)，然后調(diào)用Align 命令。

21. Auto Close Tag

Auto Close Tag自動閉合html標(biāo)簽。

22. Sort Lines

Sort lines 可以幫助咱們排序選中行。

23. VSCode Google Translate

如果是參與多語言開發(fā)的項目，VSCode Google Translate 可以幫助咱們快速切換語言。

24. Prettier

Prettier是VSCode的擴(kuò)展，可自動格式化JavaScript/TypeScript 等等，使代碼更漂亮。

25. Material Icon Theme

與其他圖標(biāo)主題相比，我更喜歡 Material Icon Theme，因為文件類型更為明顯，尤其是在使用深色主題。

26. IntelliSense for CSS Class Names in HTML

IntelliSense for CSS Class Names in HTML，基于在工作空間中找到的定義性，并提供了CSS 類名補(bǔ)全。

27. Path Intellisense

Path Intellisense 自動路勁補(bǔ)全。

以上是“27個適用于JavaScript開發(fā)的VSCode工具”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：27個適用于JavaScript開發(fā)的VSCode工具
網(wǎng)頁鏈接：http://muchs.cn/article24/jioice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、面包屑導(dǎo)航、商城網(wǎng)站、域名注冊、動態(tài)網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)