av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

27個(gè)提升開發(fā)幸福度的VsCode插件

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

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

1. Project Snippets (代碼片段)

project snippets，這是我最喜歡的一個(gè)工具，它來自于 VSCode 中內(nèi)置的原始用戶代碼片段。

該特性允許你創(chuàng)建自己的代碼段，以便在整個(gè)項(xiàng)目中重用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Material Theme

Material Theme是一個(gè)史詩主題，可以直接安裝到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

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

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

7. Markdownlint + docsify

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

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

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

8. TODO Highlight

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

9. Import Cost

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

10. Highlight Matching Tag

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

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)擊按鈕來控制音樂播放器等等。

12. GraphQL for VSCode

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

13. Indent-Rainbow

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

14. Color Highlight

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

15. Color Picker

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

16. REST Client

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

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

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

https://google.com

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

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

 
 
 
 
    
  
  
  
  
  1. POST https://test.someapi.com/v1/account/user/login/
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. Content-Type: application/json
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. { "email": "[email protected]", "password": 1 }
    6.

就會(huì)發(fā)送POST請求，參數(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 帳戶即可。然后，下次登錄或重新格式化為另一臺計(jì)算機(jī)時(shí)，可以按SHIFT + ALT + D組合鍵立即下載配置。

18. Todo Tree

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

19. Toggle Quotes

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

20. Better Align

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

21. Auto Close Tag

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

22. Sort Lines

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

23. VSCode Google Translate

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

24. Prettier

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

25. Material Icon Theme

與其他圖標(biāo)主題相比，我更喜歡 Material Icon Theme，因?yàn)槲募愋透鼮槊黠@，尤其是在使用深色主題。

26. IntelliSense for CSS Class Names in HTML

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

27. Path Intellisense

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


網(wǎng)站題目：27個(gè)提升開發(fā)幸福度的VsCode插件
文章出自：http://uogjgqi.cn/article/djsiidg.html
掃二維碼與項(xiàng)目經(jīng)理溝通

我們在微信上24小時(shí)期待你的聲音

解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流