如何将 JavaScript 代码里的变量名转换为驼峰命名？

Question

我有一个 js 文件，以前的变量名都是下划线，现在想改成驼峰命名。想要找到一个办法，自动化的把变量名改成驼峰命名，而且不影响代码里的其他内容。
因为这个文件内容比较繁多，所以不能使用 ctrl+f、ctrl+h 直接替换，否则可能会影响到其他部分。需要修改的地方太多，手动修改也不现实。

我使用的编辑器是 vscode，搜索了一些插件，需要选中变量名才能转换成驼峰命名，还是得手动选取所有的变量名，很头疼。有其他的一些思路或者工具吗？求教

测试代码如：

let test_name = ''
test_name = document.querySelector('.test_name')

更新：想起来了 vscode 的重命名功能，用这个办法把变量一个个重命名吧。这样不会影响到字符串之类的东西。至于我期望的万能解决办法看来是很难了（正则会匹配到一些文本内容，所以我放弃尝试了）

Answer 1

代码转换的话,属于 Babel 的范围,用 Babel 的插件解决.

可以将变量名转换为小驼峰命名的插件

• babel-plugin-camelcase-identifier
• babel-plugin-transform-imports

以下演示使用babel-plugin-camelcase-identifier插件,配置比较简单

提示

建议在做转换之前,先把原有代码备份好,比如使用 git.如果能做好单元测试的话,是更好的了,保证转换之后的代码能正常运行.

安装

yarn add -D @babel/core @babel/cli babel-plugin-camelcase-identifier

配置

// .babelrc
{ "plugins": ["camelcase-identifier"] }

使用

// index.js
var ab_ss = 1
var a = {
  ss_aa: 3,
}
var a = ab_ss + 2

npx babel index.js --out-file index-compiled.js

结果

---

• babel-plugin-camelcase-identifier
• babel-plugin-transform-imports

Answer 2

我期待你能找到这个东西

Answer 3

vscode 里面的ctrl+f 可以用正则匹配, 很简单了吧

Answer 4

大佬, 记得有方法了之后, 把方法贴出来嗷

Answer 5

有个想法，比如先读取这个js文件，然后一行行的找“包含下划线的，且后面跟着一个空格和一个等号的”，将其替换成驼峰形式，输出到另一个文件。然后两个文件看一下差分验证下。

Answer 6

有兴趣的话可以用jscodeshift自己写一个。

我看来一下，没有现成的工具