https://github.com/wavebeem/vscode-jsx-info

VSCode plugin for jsx-info
https://github.com/wavebeem/vscode-jsx-info

Last synced: 18 days ago
JSON representation

VSCode plugin for jsx-info

• Host: GitHub
• URL: https://github.com/wavebeem/vscode-jsx-info
• Owner: wavebeem
• License: mit
• Created: 2020-12-28T06:54:46.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-04-07T18:24:18.000Z (over 3 years ago)
• Last Synced: 2024-11-30T21:34:18.484Z (22 days ago)
• Language: TypeScript
• Size: 2.22 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# JSX Info for VS Code

![](img/promo.png)

## Video Demo

Watch the [demo video on YouTube](https://www.youtube.com/watch?v=HUGhkelL2jE&feature=youtu.be).

## What is it?

JSX Info is a VS Code extension for [jsx-info](https://www.npmjs.com/package/jsx-info). It can analyze your code base and display reports about how JSX is used.

JSX Info can help you answer the following questions, and more!

- **How many times is each component used?**

  This is useful if you're looking to get rid of a component, but want to see how widely used it is first.

- **How many times is a prop used?**

  This is useful if you want to remove a prop from a component, but want to see how widely used it is first.

- **Where is this prop used?**

  You can search by prop name and value, and click through a list in the sidebar that will open the files and highlight the code where the prop is.

  - Find by prop: `disabled`

  - Find by prop with value: `id=foo`

  - Find by prop with value not equal: `kind!=primary`

  - Find by prop not existing: `!type`

## Installation

Once installed, JSX Info will show up in your Explorer sidebar.

From there, click the "JSX Info" header to expand the view.

Click "Run" to get started.