hello
23 |{xx}
24 |
2 |
3 | This is a extension for [vue-hook-optimizer](https://github.com/zcf0508/vue-hook-optimizer). And you can use it to analyze your vue code.
4 |
5 | ## Demo
6 |
7 | 
8 |
9 | 
10 |
--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | // See https://go.microsoft.com/fwlink/?LinkId=733558
2 | // for the documentation about the tasks.json format
3 | {
4 | "version": "2.0.0",
5 | "tasks": [
6 | {
7 | "type": "npm",
8 | "script": "dev",
9 | "path": "packages/vscode",
10 | "isBackground": true,
11 | "presentation": {
12 | "reveal": "never"
13 | },
14 | "problemMatcher": [
15 | {
16 | "base": "$ts-webpack-watch",
17 | "background": {
18 | "activeOnStart": true,
19 | "beginsPattern": "Build start",
20 | "endsPattern": "Build success"
21 | }
22 | }
23 | ],
24 | "group": "build"
25 | }
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/packages/eslint/src/rules/not-used.md:
--------------------------------------------------------------------------------
1 | # not-used
2 |
3 | Powered by [`vue-hook-optimizer`](https://github.com/zcf0508/vue-hook-optimizer).
4 |
5 | ## Rule Details
6 | ```vue
7 | // 👎 bad
8 |
14 |
15 |
16 | hello {{ aa }}
9 |
3 | [](https://deepwiki.com/zcf0508/vue-hook-optimizer)
4 |
5 | 这是一个用来分析组件代码的工具。它支持 `Vue` 和 `React`。访问 [playground](vue-hook-optimizer.vercel.app/) 或者试试 vscode 扩展 [vue-hook-optimizer-ext](https://marketplace.visualstudio.com/items?itemName=zcf0508.vue-hook-optimizer-ext)。
6 |
7 | ## 安装和运行
8 |
9 | ```bash
10 | # 克隆仓库并安装依赖
11 | pnpm install
12 | # 运行 playground
13 | pnpm run play
14 | ```
15 |
16 | 打开浏览器并访问 `http://localhost:3000/`.
17 |
18 | ## 如何使用
19 |
20 | 1. 把你的组件代码粘贴到编辑器中
21 |
22 | 2. 点击 `Analyze` 按钮
23 |
24 | 这个工具会分析代码，并展示变量和方法之间的关联关系。这是一个简单的示例。
25 |
26 | 
27 |
28 | ## 动机
29 |
30 | 有时我们不得不重构代码，可能一个文件里有成千上万行代码。太复杂难以理解。
31 |
32 | 所以我想开发一个工具来帮助我们分析代码，并找出变量和方法之间的关联关系。我们可以发现一些变量是孤立的，一些方法是过度关联的，然后我们可以重构它们。
33 |
34 | ## 开发计划
35 |
36 | - [x] 增加更多细信息, 包括变量类型、注释、是否在模板或者 hook 方法中被使用
37 | - [x] 提供优化建议
38 | - [x] 支持 `options api`
39 | - [x] [vscode 扩展](./packages/vscode)
40 | - [x] 支持 `React`
41 | - [x] eslint 规则
42 | - [x] mcp server
43 |
44 | ## 贡献
45 |
46 | 欢迎贡献代码，提交 PR。
47 |
48 | ## 支持我
49 |
50 | 如果你喜欢这个工具，请考虑支持我。我将继续努力开发这个工具，并添加更多功能。
51 |
52 | 
53 |
54 | ## License
55 |
56 | MIT
57 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | pull_request:
9 | branches:
10 | - master
11 |
12 | merge_group: {}
13 |
14 | jobs:
15 | lint:
16 | runs-on: ubuntu-latest
17 | steps:
18 | - uses: actions/checkout@v3
19 | - name: Set node
20 | uses: actions/setup-node@v3
21 | with:
22 | node-version: 22.x
23 |
24 | - name: Setup
25 | run: npm i -g pnpm@9
26 |
27 | - name: Install
28 | run: pnpm i --frozen-lockfile
29 |
30 | - name: Build
31 | run: pnpm -C packages/core run build
32 |
33 | - name: Build eslint
34 | run: pnpm -C packages/eslint run build
35 |
36 | - name: Lint
37 | run: pnpm run lint
38 |
39 | test:
40 | runs-on: ${{ matrix.os }}
41 |
42 | strategy:
43 | matrix:
44 | os: [ubuntu-latest]
45 | node_version: [20, 22, 24]
46 | include:
47 | - os: macos-latest
48 | node_version: 22
49 | - os: windows-latest
50 | node_version: 22
51 | fail-fast: false
52 |
53 | steps:
54 | - name: Set git to use LF
55 | run: |
56 | git config --global core.autocrlf false
57 | git config --global core.eol lf
58 |
59 | - uses: actions/checkout@v3
60 | - name: Set node ${{ matrix.node }}
61 | uses: actions/setup-node@v3
62 | with:
63 | node-version: ${{ matrix.node }}
64 |
65 | - name: Setup
66 | run: npm i -g pnpm@9
67 |
68 | - name: Install
69 | run: pnpm i --frozen-lockfile
70 |
71 | - name: Build
72 | run: pnpm run build
73 |
74 | - name: Coverage
75 | run: pnpm run coverage
76 |
77 | - name: Typecheck
78 | run: pnpm run typecheck
79 |
--------------------------------------------------------------------------------
/packages/core/src/suggest/utils.ts:
--------------------------------------------------------------------------------
1 | import type { RelationType, TypedNode } from '../analyze/utils';
2 |
3 | export function hasCycle(
4 | graph: Map45 | 计数: {{ count }} 46 |
47 |59 | 双击计数可以快速编辑 60 |
61 |
3 | [](https://deepwiki.com/zcf0508/vue-hook-optimizer)
4 |
5 | [中文文档](./README_cn.md)
6 |
7 | 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).
8 |
9 | ## Install And Run Playground
10 |
11 | ```bash
12 | # clone the repo then install the dependencies
13 | pnpm install
14 | # run the playground
15 | pnpm run play
16 | ```
17 |
18 | Open the browser and visit `http://localhost:3000/`.
19 |
20 | ## How To Use
21 |
22 | 1. paste your component code into the editor
23 |
24 | 2. click `Analyze` button
25 |
26 | The tool will analyze the code, and show the relations between the variables and the methods. This is a simple demo.
27 |
28 | 
29 |
30 | ## Motive
31 |
32 | Sometime we have to refactor the code, maybe there are thousands of lines of code in one file.
33 | And it is too complex and hard to understand.
34 |
35 | So I want to build a tool to help us analyze the code, and find the relations between the variables and the methods.
36 | We can find out some variables are isolated, and some methods are over-association, and then we can refactor them.
37 |
38 | ## Development Plan
39 |
40 | - [x] add more info, including the variable type, comment, whether has been used in template or hook methods
41 | - [x] provide some suggestions for optimization
42 | - [x] support `options api`
43 | - [x] [vscode extension](./packages/vscode)
44 | - [x] support `React`
45 | - [x] eslint rules
46 | - [x] mcp server
47 |
48 | ## Contribution
49 |
50 | Any contributions are welcome.
51 |
52 | ## Sponsor Me
53 |
54 | If you like this tool, please consider to sponsor me. I will keep working on this tool and add more features.
55 |
56 | 
57 |
58 | ## License
59 |
60 | MIT
61 |
--------------------------------------------------------------------------------
/packages/core/src/analyze/style.ts:
--------------------------------------------------------------------------------
1 | // https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/style/cssVars.ts
2 |
3 | import type { SFCStyleBlock } from '@vue/compiler-sfc';
4 |
5 | enum LexerState {
6 | inParens,
7 | inSingleQuoteString,
8 | inDoubleQuoteString,
9 | }
10 |
11 | function lexBinding(content: string, start: number): number | null {
12 | let state: LexerState = LexerState.inParens;
13 | let parenDepth = 0;
14 |
15 | for (let i = start; i < content.length; i++) {
16 | const char = content.charAt(i);
17 | switch (state) {
18 | case LexerState.inParens:
19 | if (char === '\'') {
20 | state = LexerState.inSingleQuoteString;
21 | }
22 | else if (char === '"') {
23 | state = LexerState.inDoubleQuoteString;
24 | }
25 | else if (char === '(') {
26 | parenDepth++;
27 | }
28 | else if (char === ')') {
29 | if (parenDepth > 0) {
30 | parenDepth--;
31 | }
32 | else {
33 | return i;
34 | }
35 | }
36 | break;
37 | case LexerState.inSingleQuoteString:
38 | if (char === '\'') {
39 | state = LexerState.inParens;
40 | }
41 | break;
42 | case LexerState.inDoubleQuoteString:
43 | if (char === '"') {
44 | state = LexerState.inParens;
45 | }
46 | break;
47 | }
48 | }
49 | return null;
50 | }
51 |
52 | function normalizeExpression(exp: string) {
53 | exp = exp.trim();
54 | if (
55 | (exp[0] === '\'' && exp[exp.length - 1] === '\'')
56 | || (exp[0] === '"' && exp[exp.length - 1] === '"')
57 | ) {
58 | return exp.slice(1, -1);
59 | }
60 | return exp;
61 | }
62 |
63 | const vBindRE = /v-bind\s*\(/g;
64 |
65 | export function analyze(
66 | styles: SFCStyleBlock[],
67 | ) {
68 | const nodes = new Set
5 | Recommended IDE setup:
6 | VSCode
7 | +
8 | Vetur
9 | or
10 | Volar
11 | (if using
12 | <script setup>)
13 |
See README.md for more information.
18 | Vite Docs 19 | | 20 | Vue 3 Docs 21 |
22 | 23 | 26 |27 | 38 | 48 |
49 |
50 | Edit
51 | components/HelloWorld.vue to test hot module replacement.
52 |
25 | 计数: 26 | {count} 27 |
28 |30 | 状态: 31 | {isEven 32 | ? '偶数' 33 | : '奇数'} 34 |
35 |36 | 数值: 37 | {status} 38 |
39 |React Hooks 示例
52 | 97 |
5 | Recommended IDE setup:
6 | VSCode
7 | +
8 | Vetur
9 | or
10 | Volar
11 | (if using
12 | <script setup>)
13 |
See README.md for more information.
18 | Vite Docs 19 | | 20 | Vue 3 Docs 21 |
22 | 23 | 26 |27 | 38 | 48 |
49 |
50 | Edit
51 | components/HelloWorld.vue to test hot module replacement.
52 |
5 | Recommended IDE setup:
6 | VSCode
7 | +
8 | Vetur
9 | or
10 | Volar
11 | (if using
12 | <script setup>)
13 |
See README.md for more information.
18 | Vite Docs 19 | | 20 | Vue 3 Docs 21 |
22 | 23 | 26 |27 | 38 | 48 |
49 |
50 | Edit
51 | components/HelloWorld.vue to test hot module replacement.
52 |
5 | Recommended IDE setup:
6 | VSCode
7 | +
8 | Vetur
9 | or
10 | Volar
11 | (if using
12 | <script setup>)
13 |
See README.md for more information.
18 | Vite Docs 19 | | 20 | Vue 3 Docs 21 |
22 | 23 | 26 |27 | 38 | 48 |
49 |
50 | Edit
51 | components/HelloWorld.vue to test hot module replacement.
52 |
133 | 总计: 134 | {' '} 135 | {this.state.todos.length} 136 | {' '} 137 | | 138 | 已完成: 139 | {' '} 140 | {completedCount} 141 | {' '} 142 | | 143 | 待完成: 144 | {' '} 145 | {pendingCount} 146 |
147 |115 | 总计: {{ todos.length }} | 116 | 已完成: {{ completedCount }} | 117 | 待完成: {{ pendingCount }} 118 |
119 |