原味地址：http://www.javashuo.com/article/p-ybudfjlt-bp.htmljavascript
最近使用 VS Code 來開發 React，本文記錄一些使用的 VS Code 插件以及離線安裝插件的方法。css
VS Code 插件的離線安裝
內網環境的開發須要考慮插件的離線開發，參考了簡單的 VSCode 插件離線安裝方法，發現官方以及很貼心的提供了下載插件的方式，總結下來一共3步：html
- 進入 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格式化弄亂。vue