整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
于擴展可以很大程度提高開發的效率，VisualStudio Code 儼然成為開發者社區最流行的一款編輯器。本文就為大家介紹下 2021 年最流行的 10 款 VisualStudio Code 擴展。
VisualStudio Code是開發者社區最流行的一款編輯器。理由之一就是VSCode有許多擴展，可以提高開發的效率。
在本文中，我們將介紹每一位開發人員都應該了解的10款VSCode擴展。
AutoRename Tag是一款面向Web開發人員的VSCode擴展。顧名思義，Auto Rename Tag可以在一個標簽更改時自動更新另一個標簽：
這款擴展不僅可以在HTML中使用，也可用于React，因為React使用了JSX：
上述示例中標簽內只有一個文本，但是在真正的應用程序中，大量的標簽和元素嵌套在一起，手工更新非常困難且麻煩。
這款擴展可以將匹配的括號染成相同的顏色。同一個文件內嵌套的組件、函數、對象等帶來的大量括號很容易讓人摸不著頭腦：
例如下述代碼示例：
第一眼看上去，區分不同的代碼塊很困難，但是Bracket Pair Colorizer擴展可以將對應的括號著色，方便瀏覽代碼和閱讀：
代碼片段
代碼片段是節約時間提高生產力的最好辦法。這并不是一個擴展，而是多種語言的各種擴展。
下面是一些流行的代碼片段擴展：
例如，在React中創建新組建時，輸入函數式組件的語法非常繁瑣。使用ES7React/Redux/GraphQL/React-Native snippets擴展，只需要輸入rfc并按回車即可創建函數式組件。
BetterComments可以幫助你編寫便于閱讀的注釋。
清晰、方便理解的注釋不僅對閱讀代碼的人有好處，對自己也非常有用。開發人員經常會遇到這種情況：過一段時間之后，閱讀自己的代碼都有困難。而編寫描述性的注釋對于自己和團隊都有好處。
使用Better Comments擴展，你可以將注釋分為警告、詢問、待辦、重點等幾大類。
在雙斜線后面使用下述字符做標記：
MarkdownAll in One可以處理所有的markdown需求，例如自動預覽、快捷鍵、自動完成等。
從2004年發布以來，Markdown已成為最流行的標記語言之一。技術作者廣泛使用Markdown轉寫文章、博客、文檔等，因為它十分輕便、簡單，而且可以在多個平臺上使用。它的流行帶動了許多Markdown變體的出現，如GitHub Flavored markdown、MDX等。微信搜索公眾號 逆鋒起筆，關注后回復 編程資源，領取各種經典學習資料。
例如，要在Markdown中加粗字體，只需要選中文字按快捷鍵Ctrl+B即可，這樣可以提高生產力。
圖標
描述性的圖標可以幫你區分不同的文件和文件夾。圖標也讓開發過程更有趣。
下面是兩個VSCode標簽頁的比較。一個有圖標，另一個沒有。
有許多圖標擴展可供選擇。流行的圖標擴展有：
Prettier
Prettier是一款有傾向的代碼格式化程序。它在GitHub上獲得了38500多個標星，是最流行的代碼格式化器之一。一致的代碼格式和風格可以節省不少時間，特別是在與其他開發人員協作的時候。
考慮下述代碼：
這段代碼有許多格式問題，例如：
下圖演示了如何使用Prettier來格式化并修復以上錯誤：
該擴展支持Prettier插件，這樣你就可以使用本地定制過的Perttier。
你還可以進一步配置該擴展，甚至可以配置成保存時自動執行。
Importcost可以在代碼中顯示導入的估計大小。編寫項目時，很重要的一點就是不要導入過大的軟件包，以免損害用戶體驗。避免導入過大軟件包的方法之一就是隨時跟蹤軟件包的大小。
如果導入過大，Import Cost就會用紅色顯示大小，以示警告。你可以自行配置小、中、大分別對應的大小。
ProfileSwitcher可以在多個用戶配置中切換。
該擴展特別適合內容創作者，如技術博客作者、YouTube主播等。你不需要每次共享VSCode屏幕時更改設置，只需要創建新的用戶配置即可。
下圖演示了怎樣在兩個用戶配置Default和Content Creation之間切換：
GitLens是一款開源擴展。它給VSCode添加了Git的功能。
該擴展最好的一點就是能通過Git blame和code lens的功能，將代碼的作者可視化。
下面是更詳細的代碼作者的信息：
這只是GitLens的諸多功能之一。其他值得一提的功能有：
本文介紹了10款VSCode擴展，幫助你成為更好的開發者并提高生產力。
還有許多其他的VSCode擴展，比如：
原文鏈接：
https://blog.logrocket.com/top-10-vs-code-extensions-2021/
這里是云端源想IT，幫你輕松學IT”
嗨~ 今天的你過得還好嗎？
生命是什么呢，
生命是時時刻刻不知如何是好。
- 2024.03.06 -
工欲善其事必先利其器，一款好的開發工具可以讓我們事半功倍。前面我們對HTML的相關概念和基本結構已經有了基本的了解，下面我們就來安裝在前端開發中的需要使用的開發工具及環境。
在眾多HTML編輯器中，選擇一個適合自己的工具至關重要。今天我們就來認識一下前端開發工作中使用的最廣泛的工具 “VS Code” , 并在本地搭建好開發環境。
在介紹 “VS Code” 之前，我們先來了解一下什么是 “IDE”。
什么是 “IDE”
IDE 是集成開發環境的英文縮寫 （Integrated Development Environment)，集成開發環境就是將在開發過程中所需要的工具或功能集成到了一起，比如：代碼編寫、分析、編譯、調試等功能，從而最大化地提高開發者的工作效率。
IDE 通用特點：
前端開發IDE
而在前端開發中我們需要安裝一個“趁手”的IDE，幫助我們更快更高效的開發，一個好的IDE是每個程序員的必備武器。前端開發IDE有很多種，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。
我們可以任選一種使用。這幾種IDE的對比如下：
這么多IDE該怎么選呢？對于我們初學者來說，選擇Visual Studio Code，（簡稱VS Code）就可以了。VS code具備內置功能非常豐富、插件很全且安裝簡單、輕量、對電腦的配置要求不算很高，且有MAC版本，應用廣泛等優點，很適合新手。
下面就和我一起下載并安裝VS code吧！
1、進入VScode官網
官網地址：https://code.visualstudio.com/
點擊【Download】進入下載，不要點擊【Download for Windows Stable Build】，否則它會自動幫你下載User Installer用戶版本。
2、然后你會看見Windows，Linux，蘋果三個版本，我們選擇Windows版本，選擇System Installer 點擊【x64】進行下載，不要點擊【↓ Windows windows8,10,11】，否則它也會自動默認下載User Installer用戶版本。
其實選哪個版本都無傷大雅，就算你下載了【User Installer】版本也沒事，因為沒人會沒事把自己電腦上的賬戶換成其他人的賬戶登錄，就算換了也可以換回來，只是有時候特殊情況換了個賬戶登錄不能使用就有一點麻煩，所以還是推薦盡量下載【System Installer】版本。
【x86】：32位操作系統。【x64】:64位操作系統，如果想知道自己是什么系統，可以敲擊Win鍵找到“設置”→“系統”→“關于”→“系統類型”。
3、正在下載
這個下載會比較慢，如果不想等可直接去找個別人下好的安裝包哦！也可找小編領取。
4、下載完后打開文件，會彈出許可協議彈窗，勾選我同意此協議，單擊【下一步】。
5、先去D盤里創建一個新文件夾取名叫“VScode”，點擊【瀏覽】按鈕修改安裝路徑，把路徑改到剛剛在D盤里創建的VScode文件夾里。如果覺得麻煩也可以直接默認安裝在C盤，然后單擊【下一步】，但還是建議安裝在D盤里。
6、修改完路徑后，單擊【下一步】。（安裝路徑是這個樣子D:\VScode\Microsoft VS Code）
7、選擇開始菜單文件夾，默認"Visual Studio Code",單擊【下一步】。
8、根據自己的需求進行勾選，勾選完單擊【下一步】。
【創建桌面快捷方式】：在桌面創建VScode快捷方式。
【將“通過Code打開”操作添加到Windows資源管理器文件上下文菜單】：選中一個文件鼠標右鍵可以通過VScode打開文件。
【將“通過Code打開”操作添加到Windows資源管理器目錄上下文菜單】：選中一個文件夾鼠標右鍵可以通過VScode打開文件夾。
【將Code注冊為受支持的文件類型的編輯器】：對于受支持的文件類型的文件，鼠標右鍵選擇“打開方式”，可以通過“Vscode”打開。
【添加到PATH】：添加VScode文件夾里的bin目錄到PATH環境變量里，添加完以后可通過系統命令輸入code直接啟動VScode。
9、單擊【安裝】進行安裝。
10、安裝完成后單擊【完成】啟動。
下載完之后，大家可以根據自己的需求下載插件，這里推薦我用的比較順手的幾個。
1、下載漢化包
點擊擴展，在搜索欄搜索Chinese，選擇Chinese中文簡體點擊【Install】進行安裝。（建議少用，多看英文，這是一位優秀的程序員走向成功的標志性成長。）
安裝完后單擊【Change Language and Restart】重啟VScode軟件，刷新一下就變成中文簡體了。
2、下載【會了吧】插件
在搜索欄里搜索【會了吧】，這個是在你敲代碼時會自動識別你敲的單詞進行翻譯，如果你有一個單詞不認識，可以點進“會了吧”看看翻譯，對英語基礎差的人很友好。
3、下載【Open in browser】插件
這個是用來運行代碼，并且在瀏覽器打開，查看運行效果的，這個插件必須下，否則當你寫完HTML網頁時你無法運行，無法預覽頁面，不信你可以先試試能不能運行再回來下載。
4、下載【Live Server】插件
這個是用于實時預覽運行效果，當你使用open in browser運行代碼時，只要你的代碼有改變，你就需要手動刷新重新預覽頁面運行結果，而Live Server是自動刷新運行結果，非常方便，非常滴銀性！
1、先去D盤里創建一個新文件夾取名叫“Workspace”（名字隨便取名）。
2、進入VScode找到左上角的文件選擇點擊打開文件夾。
3、找到剛剛創建的“workspace”文件夾，單擊【選擇文件夾】。
4、找到WORKSPACRE，點擊新建文件，名字輸入“01.html”,然后點擊回車鍵創建。
5、在剛剛創建的01.html文件下輸入以下代碼。
<!DOCTYPE html>
<html>
<head>
<meta charest="utf-8">
<title>HTML</title>
</head>
<body>
<h1>這是我的第一個網頁</h1>
</body></html>
6、鼠標右擊空白處單擊【Open In Default Browser】查看運行結果。
7、運行結果如下 。
以上就是常用的前端開發工具VS Code的下載和安裝教程了，你的第一個HTML網頁運行成功了嗎？
一個高效的HTML開發工具和環境是每個前端開發者的得力助手。通過合理選擇工具、配置環境、使用框架和庫、以及不斷的調試和測試，你可以將創意轉化為現實，構建出令人驚嘆的網頁。記住，技術永遠在變，唯有不斷學習和實踐，才能讓你在這個數字世界中游刃有余。
今天就先講到這里了，
更多前端開發基礎知識點擊文末閱讀原文查看哦！
記得關注【云端源想IT】一起學編程！
我們下期再見！
END
文案編輯|云端學長
文案配圖|云端學長
內容由：云端源想分享
這個數字編織的現代世界里，代碼成了連接現實與虛擬的橋梁。但正如繁華都市背后可能隱藏著雜亂的小巷，程序員的代碼庫也常常在創新的風暴中變得混亂不堪。正如宋代詩人蘇軾所云：“橫看成嶺側成峰，遠近高低各不同。”代碼世界的風景，也需要一番整理，方能展現出它那井然有序的美。今天，作為您的代碼整理向導，我將帶領您探索五款Visual Studio Code（簡稱VS Code）的神奇擴展，讓您的代碼庫煥然一新，宛如穿越回那個一切井井有條的黃金時代。
在編程的浩瀚宇宙中，VS Code以其靈活而強大的編輯器特性，成為了眾多開發者心中的“都城”。它不僅承載著現代技術的輝煌，還巧妙融合了開發者的古老智慧——高效與簡潔。想象一下，在摩天大樓的環繞下，一座座古寺靜靜訴說著編碼藝術的源遠流長。是時候揭開這五款寶藏擴展的神秘面紗，看看它們如何在現代化的編碼戰場上，為我們的代碼庫披上秩序的外衣。
推薦指數：
推薦指數：
推薦指數：
推薦指數：
推薦指數：
隨著這趟旅程的結束，希望您已裝備好這些強大的VS Code擴展，準備開啟一段從混亂到有序的編程新篇章。正如古都的保護與現代化建設并行不悖，讓我們的代碼世界同樣在保持高效創新的同時，不失其優雅與秩序。別忘了，分享您的體驗，使用#代碼管理藝術、#VSCode擴展推薦等標簽，讓更多的開發者加入這場追求卓越的編碼之旅。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
