最近使用 VS Code 來開發 React，本文記錄一些使用的 VS Code 外掛以及離線安裝外掛的方法。
VS Code 外掛的離線安裝
內網環境的開發需要考慮外掛的離線開發，參考了簡單的 VSCode 外掛離線安裝方法，發現官方以及很貼心的提供了下載外掛的方式，總結下來一共3步：
- 進入 VS Code Market，搜尋需要的外掛
- 點選Download Extension，下載下來的是
.vsix格式檔案 - 安裝VS Code時配置好了環境變數，在控制檯執行
code --install-extension your-extension-name.vsix即可安裝
一些實用的外掛
- 適用於 VS Code 的中文（簡體）語言包 ：
- 地址： Chinese (Simplified) Language Pack for Visual Studio Code
- 英文好的同學可以不必安裝本外掛
- 一個下載量最多的 VS Code 主題外掛： One Dark Pro
- 地址： One Dark Pro
- ESLint:
- 地址： ESLint
- Debugger for Chrome：
- 地址：Debugger for Chrome
- 可以和 WebStorm 一樣打斷點了
- 路徑自動補全外掛： Path Intellisense
- 地址：Path Intellisense
- 雖然 VS Code 自帶了自動補全路徑功能，html檔案沒有問題，但是在 JSX 裡有些檔案無法智慧提示（比如 JSX 裡面的 img 的 src ），本外掛很好用，相對路徑絕對路徑都沒有問題
- JSON工具： JSON Tools
- 地址： JSON Tools
- 格式化JSON很方便，只需兩個快捷鍵: 格式化JSON
Ctrl(Cmd)+Alt+M, 壓縮JSONAlt+M
- CSS 智慧提示外掛： IntelliSense for CSS class names in HTML
- 地址： IntelliSense for CSS class names in HTML
- 本外掛已經支援
className和class(TypeScript React, JavaScript and JavaScript React language modes) - 暫不支援 css module 智慧提示
- CSS Module 智慧提示
- 地址： CSS Modules
- 本外掛可以解決 IntelliSense for CSS class names in HTML 不支援 css module 智慧提示的功能
- 可以實現 css 自動補全、轉到定義位置
- 括號顏色匹配： Bracket Pair Colorizer
- 地址： Bracket Pair Colorizer
- 使用顏色來配對括號
- Bookmarks
- 地址： Bookmarks
- 將常用的位置新增到書籤，可以極大提高效率
- React/Redux/react-router Snippets
- 地址： React/Redux/react-router Snippets
- React 的程式碼段，熟悉了之後很方便
JSX 中使用 Emmet 快速補全標籤
- VS Code 自帶了 Emmet，可以自動補全 HTML 檔案中的標籤
- 想要補全
react檔案中 JSX 裡面的標籤，需要在使用者設定中增加 Emmet 的設定：
{
...
// 在預設不支援 Emmet 的語言中啟用 Emmet 縮寫功能。在此新增該語言與受支援的語言間的對映。
// 示例: {"vue-html": "html", "javascript": "javascriptreact"}
"emmet.includeLanguages": {"javascript": "javascriptreact"},
// 啟用後，按下 TAB 鍵，將展開 Emmet 縮寫。
"emmet.triggerExpansionOnTab": true
...
}
複製程式碼- 其中
emmet.triggerExpansionOnTab配置為true可以使用 TAB 鍵自動補全元件標籤了 - 可以自動將
class轉為className，很方便
關於格式化外掛
感覺自帶的程式碼格式化功能基本夠用了，就沒安裝 Prettier 和 Beautify，Beautify反而還會把react裡面的jsx格式化弄亂。