Vue data 变量无用检查

[ShihanW]

发现项目里有些组件是复制其他项目过来的，代码没修改干净，data 里定义了许多没有用过的变量，我看见的都一个个检查并删除，但效率很低，有没有 V 友知道什么插件可以检查出 data 属性里无用的变量吗？目前了解到 esLint 可以检查 vue 文件里全局无用的变量，不知道它能不能解决我的需求。

[beichenshao]

Using unused-imports plugin and unused-imports/no-unused-imports-ts rule, eslint --fix will remove the imports.

Here is an example repo which --fix removes the unused imports.

https://github.com/moshfeu/eslint-ts-unused-imports

Old answer
eslint has a built-in fix option.

eslint ... --fix
If rules contains no-unused-vars, eslint will "fix" the unused import by removing them (along with other auto fixes).

[shadowyue]

你要是用的 vue2 ，想检查这个挺难的。vue3 的话应该 esLint 就能做到

[CHTuring]

直接用 Webstorm 就好了

[zcf0508]

试试我开发的工具

https://hook.huali.cafe/

也有 vscode 的版本

https://marketplace.visualstudio.com/items?itemName=zcf0508.vue-hook-optimizer-ext

感兴趣的话可以关注一下我的项目

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

[walpurgis]

Options API 定义的 data 会绑定到组件实例上，可以通过实例对象动态访问，只做代码静态分析无法区分是否会被使用

[ShihanW]

@shadowyue 我查阅了 eslint ，没发现它可以检查 data

[ShihanW]

@walpurgis 单文件组件直接查找名称，然后删除，其实也可以，但架不住量太大

[ShihanW]

@zcf0508 谢谢，我尝试一波

[moonbeama]

@shadowyue 是 Ts 吧，用到的会高亮，无用的暗一些

[DOLLOR]

引入 TS 或 JSDOC ，然后用 Vue.extend 包裹你的组件，vue 插件就会对组件里的 this 的做类型推断，就能方便地找出 data 上的变量都被哪里引用过了。

[zcf0508]

@DOLLOR

Vue.extend 并不完美，会有很多的类型无法正确捕获。如果要基于类型分析的话，最好的办法是

1. 添加 ts 依赖
2. 将 vue 升级到 2.7
3. 使用 volar ，开启 volar 的 `vue.inlayHints.optionsWrapper`

如果需要关注 props 的类型，可以看一下我的这个 pr https://github.com/vuejs/vue/pull/13063 。

// ---


我的工具 `vue-hook-optimizer` 是基于静态 ast 分析组件的使用，可以给出所有声明的变量和方法的依赖，并自动判断是否有在模板中使用。

点击 https://hook.huali.cafe/ 试用。

[alleluya]

@zcf0508 在线的试了下 想问下是不是 NOT USED IN TEMPLATE 里没有箭头关联的就可以认为是完全没用过的?

[zcf0508]

@alleluya 感谢试用。

并不是的，我这个工具没有收集在生命周期中使用的情况，所以只作为一个参考，还是需要在代码中仔细检查一下的。

[ShihanW]

@zcf0508 尝试后很棒感觉哎，小小的支持了一下

[zcf0508]

@ShihanW 感谢支持！

项目还比较早期，如果有什么 bug 或者你有什么想法，可以随时提 issue 。

[alleluya]

@zcf0508 嗯 不过挺符合我目前的需求 和 op 有点像 用这个插件还是方便不少~ 感谢~~