https://github.com/zcf0508/vue-hook-optimizer

🌟 Analyze your components, and provide suggestions for modification.
https://github.com/zcf0508/vue-hook-optimizer

eslint javascript react typescript vscode-extension vue

Last synced: 4 days ago
JSON representation

🌟 Analyze your components, and provide suggestions for modification.

• Host: GitHub
• URL: https://github.com/zcf0508/vue-hook-optimizer
• Owner: zcf0508
• License: other
• Created: 2023-08-06T14:52:25.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-08-16T12:17:58.000Z (4 months ago)
• Last Synced: 2024-12-15T20:14:43.854Z (11 days ago)
• Topics: eslint, javascript, react, typescript, vscode-extension, vue
• Language: TypeScript
• Homepage: https://vue-hook-optimizer.vercel.app/
• Size: 4.52 MB
• Stars: 78
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: license

Awesome Lists containing this project

README

        
[![NPM version](https://img.shields.io/npm/v/vue-hook-optimizer?color=a1b858&label=)](https://www.npmjs.com/package/vue-hook-optimizer)



[中文文档](./README_cn.md)

This is a tool to analyze your components code. It supports `Vue` and `React`. Viste [playground](vue-hook-optimizer.vercel.app/) or try the vscode extension [vue-hook-optimizer-ext](https://marketplace.visualstudio.com/items?itemName=zcf0508.vue-hook-optimizer-ext).

## Install And Run Playground

```bash

# clone the repo then install the dependencies

pnpm install

# run the playground

pnpm run play

```

Open the browser and visit `http://localhost:3000/`.

## How To Use

1. paste your component code into the editor

2. click `Analyze` button

The tool will analyze the code, and show the relations between the variables and the methods. This is a simple demo.

![playground](./images/playground1.png)

## Motive

Sometime we have to refactor the code, maybe there are thousands of lines of code in one file.

And it is too complex and hard to understand.

So I want to build a tool to help us analyze the code, and find the relations between the variables and the methods.

We can find out some variables are isolated, and some methods are over-association, and then we can refactor them.

## Development Plan

- [x] add more info, including the variable type, comment, whether has been used in template or hook methods

- [x] provide some suggestions for optimization

- [x] support `options api`

- [x] [vscode extension](./packages/vscode)

- [x] support `React`

## Contribution

Any contributions are welcome.

## Sponsor Me

If you like this tool, please consider to sponsor me. I will keep working on this tool and add more features.

![sponsor](./images/sponsor.png)

## License

MIT