梦入神机,旷世神医

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

27個(gè)適用于JavaScript開發(fā)的VSCode工具-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),勐臘企業(yè)網(wǎng)站建設(shè),勐臘品牌網(wǎng)站建設(shè),網(wǎng)站定制,勐臘網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,勐臘網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

1. Project Snippets (代碼片段)

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

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

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

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

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

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

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

const initialState = {
  //
}

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

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

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

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

{
  "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',"
  }
}

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

請(qǐng)注意這三個(gè)border tests是如何將它們的值用單引號(hào)括起來的：border: '1px solid red'。

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

這就是 project snippets 的亮點(diǎn)所在。

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

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

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

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

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

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

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

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

4. Material Theme

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

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

5. @typescript-eslint/parser

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

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

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

6. Stylelint

對(duì)我來說，出于以下幾個(gè)原因，stylelint 在我所有的項(xiàng)目中都是必須的：

它有助于避免錯(cuò)誤。
它加強(qiáng)了CSS中的樣式約定。
它與Prettier支持并駕齊驅(qū)。
它支持 CSS/SCSS/Sass/Less。
它支持社區(qū)編寫的插件。

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

7. Markdownlint + docsify

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

標(biāo)題下面必須是個(gè)空行
代碼段必須加上類型
文中不能出現(xiàn)這種html標(biāo)號(hào)
URL必須用< >擴(kuò)起來

同時(shí)也可以配合安裝 docsify，因?yàn)樗С?code>Markdown和每個(gè)項(xiàng)目的其他增強(qiáng)。

8. TODO Highlight

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

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

9. Import Cost

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

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

10. Highlight Matching Tag

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

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

11. vscode-spotify

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

這就是 vscode-spotify 用武功之地，因?yàn)樗梢栽赩SCode內(nèi)直接使用音樂播放器。

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

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

12. GraphQL for VSCode

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

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

13. Indent-Rainbow

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

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

14. Color Highlight

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

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

15. Color Picker

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

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

16. REST Client

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

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

只需要?jiǎng)?chuàng)建一個(gè)新文件寫入下面這一行：

https://google.com

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

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

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

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

{ "email": "[email protected]", "password": 1 }

就會(huì)發(fā)送POST請(qǐng)求，參數(shù)為{ "email": "[email protected]", "password": 1 }。

17. Settings Sync

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

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

18. Todo Tree

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

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