The extension provides refactoring tools for your React codebase
Branch: master
Clone or download
semantic-release-bot chore(release): 4.6.0 [skip ci]
# [4.6.0](v4.5.0...v4.6.0) (2019-02-15)

### Features

* **extract-component:** Allow extracting component to same file ([f012bda](f012bda))
Latest commit 3bc1772 Feb 15, 2019

VSCode Glean

The extension provides refactoring tools for your React/Javascript/Typescript codebase

Build Status

The extension provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components and more! In addition, you can extract regular Javascript/Typescript code between files, while handling exporting the selected code from the old location and importing in the new one!


  • Allows extracting JSX into new component
  • Allows converting Class Components to Functional Components and vice-verse
  • Allows wrapping JSX with conditional
  • Moving code between files
  • Typescript support
  • ES2015 modules support
  • CommonJS modules support


Go to the link below and click Install.

Visual Studio Code Market Place: Glean


Extracting JSX into a new Component

Glean allows easy extraction of JSX into new React components. Just select the JSX to extract, and Glean will handle all the rest:

  • Generate Stateful or Stateless Component, such that the extracted JSX will continue to function.
  • It will identify all inputs to the newly created component.
  • Replace extracted JSX with newly created component, while providing it with all the props.

Example of JSX extraction

Converting Functional Component to Stateful Component

Example of Stateless to Stateful Component Conversion

Converting Stateful Component to Functional Component

Example of Stateful to Stateless Component Conversion

WARNING!!! This refactoring will delete all Lifecycle methods and setState calls!

Render Conditionally

Example of Render Conditionally

Extract to file

Select text and either VSCode's code suggestion (aka "Lightbulb") or Command Pallet ('Extract to File' command) to extract the text.

Example of Javascript Extraction

Experiments Features

All the experimental features are opt-in and need to be enabled through the configuration.

Hooks Support for Class Component to Functional Component Refactoring

Example of Hooks Support

Configuration Options

glean.jsModuleSystem (Default: 'esm')

Determines how the selected code will be exported/imported. Valid options are 'esm' and 'commonjs'.

glean.jsFilesExtensions (Default: [ "js", "jsx", "ts", "tsx" ])

List of extensions of files that should be treated as javascript files. This determines whether or not the snippet will be exported and imported. The snippet will be treated as javascript only if the extension of both origin and target files appears in this list.

glean.switchToTarget (Default: false)

Determines whether VSCode should switch to target file after extracting.

glean.experiments (Default: [])

A list of enabled experimental features. Available experimental features:

  • "hooksForFunctionalComponents" - Hooks Support


Feel free to open issues or PRs!

Getting started

In order to start working all you need to do is:

$ git clone
$ cd vscode-glean
$ npm install
$ code .

Running Extension

  • Go to VSCode debug sidebar
  • Select Extension from the dropdown
  • Hit F5

Running Tests

  • Go to VSCode debug sidebar
  • Select Extension Tests from the dropdown
  • Hit F5

Commit messages

Please refer to to the following guide.