用於提升 Web 開發效率的 VSCode 擴展

你是否知道 Visual Studio Code 和 Visual Studio 的區別？簡單點講，Visual Studio 是一個大而全的開發工具集，而 Visual Studio Code 是一個開源的、跨平臺的代碼編輯器，目前已經很流行，尤爲是在 Web 開發領域。它快速、可擴展、可定製，而且有大量功能。

在 Web 開發方面，VSCode 是一個好用的編輯器，同時也有不少好用的擴展，推薦給有須要的你。

增長代碼易讀性的必備擴展

1. Bracket Pair Colorizer 2 —— 經過顏色顯示匹配到的括號。
2. Indent Rainbow —— 使用四種顏色交替顯示縮進。
3. AutoClose Tag —— 自動添加 HTML/XML 閉合標籤。
4. Auto Rename Tag —— 自動修改 HTML/XML 閉合標籤。
5. Indenticator —— 突出的顯示當前的縮進深度（尤爲適合長代碼塊）。
6. VSCode Icons — 文件/文件夾圖標，使編輯器更漂亮。
7. Dracula —— 一款很是漂亮的主題。
8. Prettier —— 一款經過解析代碼實現代碼格式化的工具。
9. Path Intellisense —— 一款自動補全文件名的工具。
10. ESLint 或 TSLint —— 代碼檢查工具，保障代碼的一致性和避免 bugs。

通常性操做擴展

1. Code Spell Checker —— 一個良好的基本拼寫檢查工具。
2. change-case —— 快速更改選中單詞的大小寫。
3. Regex Previewer —— 正則表達式匹配並排文檔的匹配項。
4. Partial Diff —— 比較同文件、不一樣文件或剪切板內容的不一樣。
5. Copy With Line Numbers —— 使用行號（和文件路徑）複製選定的行。
6. Paste Image —— 直接粘貼圖片到 markdown/asciidoc。
7. TinyPNG —— 壓縮 JPG/PNG 圖片。
8. Polacode —— 製做很是漂亮的代碼快照。

調試擴展

1. Turbo Console Log —— 自動編寫有意義的日誌消息。
2. Debugger for Chrome —— 在 Chrome 瀏覽器或支持 Chrome Debugger 協議的任何其它工具中調試 JavaScript 代碼。

版本控制擴展

1. GitLens —— 加強內置的 Git 工具。
2. Version Lens —— 顯示每一個依賴包的最新版本。

Markdown 擴展

1. Markdown Shortcuts —— 編輯 Markdown 快捷方式。
2. Markdown Preview Enhanced —— 強大的 Markdown 編輯器工具。

衡量平常生產力擴展

1. WakaTime —— 自動生成平常編碼工做量圖表統計。
2. Code Time —— 開源插件，提供編程指標。

其它擴展

1. Settings Sync —— 使用 GitHub Gist 同步 VSCode 的配置。
2. Project Manager —— 輕鬆切換項目。
3. Quokka.js —— 運行 JavaScript 工具。
4. TODO Highlight —— 突出顯示 TODO，FIXME 和其它註釋。
5. Import Cost —— 顯示將要引入包的大小。
6. REST Client —— 發送 HTTP 請求並查看響應結果。
7. Live Server —— 啓動具備實時重載的本地開發服務器。
8. Code Runner —— 運行代碼塊，支持多種語言。
9. Live Share —— 協做編程工具。
10. Paste JSON as Code —— 將 JSON 轉換爲其它語言的代碼。
11. Remote - SSH —— 鏈接遠程開發服務器進行編程。
12. React-Native/React/Redux snippets for es6/es7 —— 代碼片斷。

以上，簡單羅列了一些擴展名稱和功能說明，具體詳細的使用，參考具體擴展的文檔。另外，根據你的須要選擇安裝和開啓相關的擴展。若是你想了解更多的擴展，能夠直接在 VSCode 擴展市場搜索。

關注公衆號「展白說」，獲取更多有價值的內容。