发现项目里有些组件是复制其他项目过来的,代码没修改干净,data 里定义了许多没有用过的变量,我看见的都一个个检查并删除,但效率很低,有没有 V 友知道什么插件可以检查出 data 属性里无用的变量吗?目前了解到 esLint 可以检查 vue 文件里全局无用的变量,不知道它能不能解决我的需求。
1
beichenshao 263 天前
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). |
2
shadowyue 263 天前
你要是用的 vue2 ,想检查这个挺难的。vue3 的话应该 esLint 就能做到
|
3
CHTuring 263 天前 1
直接用 Webstorm 就好了
|
4
zcf0508 263 天前
|
5
walpurgis 262 天前
Options API 定义的 data 会绑定到组件实例上,可以通过实例对象动态访问,只做代码静态分析无法区分是否会被使用
|
10
DOLLOR 262 天前
引入 TS 或 JSDOC ,然后用 Vue.extend 包裹你的组件,vue 插件就会对组件里的 this 的做类型推断,就能方便地找出 data 上的变量都被哪里引用过了。
|
11
zcf0508 262 天前
@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/ 试用。 |