React 工程的 VS Code 插件及配置

時間 2019-11-08

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

原文原文鏈接

最近使用 VS Code 來開發 React，本文記錄一些使用的 VS Code 插件以及離線安裝插件的方法。javascript

Windows 安裝 VS Code 的小提示

在安裝時推薦勾選如圖兩個選項，這樣右鍵文件夾或文件就能夠直接使用 VS Code 打開了，很是方便。css

VS Code 插件的離線安裝

內網環境的開發須要考慮插件的離線開發，參考了簡單的 VSCode 插件離線安裝方法，發現官方已經很貼心的提供了下載插件的方式，總結下來一共3步：html

進入 VS Code Market，搜索須要的插件
點擊Download Extension，下載下來的是.vsix格式文件
安裝VS Code時配置好了環境變量，在控制檯執行 code --install-extension your-extension-name.vsix 便可安裝

2019-10-19 更新，可視化安裝 VS Code 插件的方法：如圖點擊左側 EXTENSION 菜單，點擊 ... 按鈕，選擇「從 VSIX 安裝...」便可安裝。vue

一些實用的插件

適用於 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
 ...
}
複製代碼