React 工程的 VS Code 插件及配置

時間 2019-12-10

標籤 react 工程 code 插件配置欄目 React 简体版

原文原文鏈接

原味地址：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, 壓縮JSON Alt+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 ... } 複製代碼