原味地址：https://juejin.im/post/5b5fce12e51d45162679e032
最近使用 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格式化弄亂。
參考資料
作者：清秋
鏈接：https://juejin.im/post/5b5fce12e51d45162679e032
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。