A convenient way to traverse your React application.
Table of Contents
About The Project
Sapling is a VS Code extension built with React developers in mind. As your codebase grows, your native file structure becomes less and less intuitive. Wouldn't it be nice to have a file structure that represents the actual relationships between the components and containers in your application? Wouldn't you like a quick reference to your available props, and an indication of routes and conditional rendering?
Installing from VS Code Extension Marketplace:
To install sapling for development, please see the contributing section below.
After installing, click the Sapling tree icon in your extension sidebar (image of icon here). From there, you can either click "Choose a file" to select your root component, or build your tree directly from a file open in your editor with the "Build Tree" button on the right hand side of your status bar. Click the + and - buttons to expand and collapse subsets of your tree, and hover over the information icon (image of icon here) to get a list of props available to that component. You can also press the view file icon (image of icon here) to open the file where the component is defined in your editor window. Below is a quick-reference legend for icon and text format meanings. If you prefer not to view React Router or other third-party components imported to your app, you can disable either of these in the VS Code Extension Settings.
Icon Legend in Sapling Tree View:
Sapling can currently display React apps made with JSX/TSX and ES6 import syntax.
Sapling will detect React components invoked using JSX tag syntax and React-Router component syntax, where React is imported in a file:
Sapling will detect the names of inline props for JSX components it identifies:
Sapling can identify components connected to the Redux store, when 'connect' is imported from 'react-redux', and the component is the export default of the file:
Sapling prioritizes file dependencies over component dependencies. Consider the following JSX contained in the file App.jsx:
Sapling will display Home and Navbar as siblings, both children of App: (image of actual Sapling here)
This extension contributes the following settings:
Distributed under the MIT License. See
Twitter: @TeamSapling | Email: email@example.com