作为一名软粉，换成 WebStorm

字节跳动EA前端
13,549 阅读8分钟

前言

在前端开发同学使用的 IDE 工具中，有两个占到绝对主流：WebStorm 与 VSCode。这也是我们推荐新手入门的两个主要工具，而本文则是用来安利 WebStorm 的，局限性不可避免，还请自行判断。
Webstorm 由 Jetbrains 公司开发，这个公司 2000 年成立在捷克的首都布拉格，他们最著名的产品就是 IntelliJ IDEA，全球第一 Java IDE。当然宇宙第一 IDE 是谁就不用我说了。

20200519112459

VSCode的话我自己其实平时是有在用的，而且用的 Insider 版本，但是两个在我这里的地位是完全不同的，一个是 IDE，另一个呢那就是 nodepad.exe。说实话啊，VSCode 当记事本用是真的好用，它真的是一个非常棒的 Editor。
另外，本文作者是个软粉
I means 等一个微软收购 JetBrains
然后字节跳动收购微软

功能对比

开箱即用！

Webstorm VSCode
代码检查 可靠、智能、发展出了自己的 Linter可侦测未使用的选择器、多余的逻辑、未处理的 Promise 等，甚至还能教你语文 主要依赖 ESLint无限可能 (指现在还没有)
版本控制 迄今为止最好用的 git 客户端 比命令行好一点，装了插件更好一点
集成版本控制 自带 LocalHistory，实时记录更改，撤销你手残 git reset --hard 的结果，自带改进版 Stash (Shelve) 装插件
代码重构 在代码中和注释中重命名变量安全删除 装插件
插件 利益驱动开发，高质量官方插件 开源车！
价格 企业已购买 / 预览版免费 统统不要钱！
开发效率 启动慢，开发很快 启动很快；装了一堆插件不见得快

代码检查

JetBrains 是在长期的发展过程中自己做了一套 Linter，个人觉得非常好用。比如说它可以去检查你的代码中有没有未使用的变量，当然这个在 ESLint 支持范围内，但是它还可以检查未使用的选择器、多余的逻辑、未使用的文件或文件夹。
关于多余的逻辑主要是说比如 if (foo) return true else return false 这类的冗余逻辑，WebStorm 会提示 If statement can be simplify，加上 Redundant else statement，因为你前面已经 return 了肯定不需要 else 了。
关于未处理的 Promise 是说它会提醒你是不是忘了 await。
它还会检查正则表达式。比如你写了一个正则表达式 /(\d|.)/，它会提示你把它改成 /[\d.]/。
对于 VSCode，Linter 能力完全依赖 ESLint，ESLint 能做到什么程度它就能做到什么程度。从这个角度来看呢 VSCode 是一款具有无限可能无限未来的 IDE。

版本控制

download

WebStorm 可以说是集成了迄今为止最好用的 VCS 客户端，而且它不只是 git 客户端，Subversion，CVS，个个都跑得欢。
20200519113003
看这张截图，Cherry-pick，Rebase，Merge，还可以 Undo commit 或者 Reword。这两个虽然我用的不多，但是你用到的时候如果没有 WebStorm 你会非常痛苦的。当然 Undo commit 仅限本地，如果是远端它会让你交一个 revert commit。
而 WebStorm 的 VCS 能力还不限于此。对于 Git Merge，它有我认为目前市面上最好的用户体验。
20200519113149

智能合并，多数时候不会出问题。如果一个文件和另一个文件可以自动合并，它就不会通知你，除此以外的情况，它会保留可以自动合并的部分让你看。
20200519113216
它会列出所有具有冲突的文件。
好，那 VSCode 的 Git 是什么样的呢？跟没有差不多，不过有一个插件叫 Git Lens，推荐 VSCode 用户去安装。简而言之，你得装插件。

集成版本控制

WebStorm 自带一个功能叫 LocalHistory。基本上长这个样子。

20200519113311
什么时候需要用到它呢？当你手残的时候。它不会像 git 那样你 commit 一次记录一次，他会自动记录所有更改，所以如果你在命令行里打了一个 git reset --hard，那就是你用这个功能的时候了。你可以选择 Revert，Create Patch，或者手动回退每一处更改。
20200519113336

它还支持从选区查看历史，而且它的 VCS 也有这个功能，你可以查看单个文件或文件夹的历史，或者查看一小片代码片段的更改历史，简单的说，想怎么查就怎么查。 VSCode 要想支持这个功能的话，装插件。
同学们，这就是开源车和特斯拉的区别。
20200519113404

代码重构

在 WebStorm 的一级文件菜单里你找不到 Delete 和 Rename 这类选项，它们都被收纳到了二级菜单里，这个二级菜单叫 Refactor。

20200519113425

你可以看到有一个功能叫 Safe Delete。它是干什么的呢？它会在删除文件之前帮你检查有哪个地方用到了这个文件，准确性没到 100% 也有 99% 了吧。剩下那 1% 多半是某个输出文件夹里的某个文件引用了输出文件夹里的同名文件。
这个功能引用的是 WebStorm 的重构功能。它不仅会搜索变量，还会搜索注释，字符串，还可以包括文本常量和其他非代码文件。
20200519113500

20200519113510
VSCode 用户建议装插件。

总结

所以我们可以看出，WebStorm 是几乎不需要自己装插件的，开箱即用。当然这不代表 WebStorm 不需要插件，WebStorm 安装的时候会自带 50 多个插件，其中包括 git 支持、Markdown 支持等等最基本的东西。这些插件的稳定性都是有买许可证的钱在背后推动的，而 VSCode 的话，插件基本上都是社区插件。
我们已经说了这么多，那可能有 VSCode 用户会说了，启动一次 VSCode，几秒钟过去了，启动一次 WebStorm，一分钟过去了。那你也可以试试看如果给 VSCode 装插件装到 WebStorm 的水平，启动一下 VSCode 得要几分钟。

所以说，何时选择 VSCode 呢？

我这里总结了几条经验。

  • 当你只需要一个 nodepad.exe 的时候
  • 当你没有钱的时候。哎，我的 WebStorm 订阅都断了 6 个月了。
  • 当你觉得 30 亿设备在运行 Java 非常蠢并且觉得 Java 是某种病毒时
    20200519113602
  • 当你想要写个插件放进简历的时候。因为 WebStorm 是 Java 的，VSCode 是 Electron 的，所以对于前端程序员来说当然是开发 VSCode 插件更轻松一些。
  • 当你很需要远程开发的时候。不得不说，VSCode 的远程开发功能是一大特色，包括 我死了2 远程开发体验是非常好的，相比之下，WebStorm 不建议用户进行远程开发，因为它要做实时代码分析等等非常需要磁盘 I/O 性能的东西。如果你一定要远程开发，你可以用 WebStorm 的 Deployment 插件，自动将更改上传到 SFTP，然后在远端编译。
  • 或者你是一个忠实 vim 用户喜欢折腾 IDE 的那种感觉。那你确实会在挑选插件的过程中得到快乐，这种情况下我建议你使用 ArchLinux，你会更开心的。
    20200519113620

    稍微跑个题，ArchLinux 是一个十分模块化的操作系统，安装完毕之后你会发现你连 shell 都没有，只有包管理器和有线网络驱动，然后你就可以想怎么装就怎么装，然后你就可以天天滚更新滚挂，对，ArchLinux 只有一个 release 通道，而且不提供版本回滚选项。相比之下天天滚更新滚炸的第二名，Windows，还是可以单独卸载补丁的。

开始使用 WebStorm

  • Search everywhere：Shift Shift
  • 切换到文件面板：Alt + 1
    • 相当多功能面板都可以通过 Alt + 数字打开。
    • 把 Terminal 改成你喜欢的 Shell 吧~
  • 备份你的设置
    • 同步到 JetBrains 账号
    • 导出为配置文件
  • 远程开发
    • 由于 WebStorm 会高密度地分析代码，我们不建议使用远程文件系统等魔法进行远程开发。如果你实在需要，你可以用 tools > deployment 进行产物自动上传。
    • 同时也是因为这个，WebStorm 会自动建议你将其加入反病毒软件的排除列表中以提高性能
  • 编辑器自带快捷键
    • Alt + Enter 使用修复建议
    • Ctrl + D 制作代码的替身
    • Alt + Shift + 鼠标拖动 拉出一排光标
    • Alt + Shift + ArrowKeys 移动代码

我的快捷键方案

不一定适合每个人。

  • 向左移动光标 Ctrl + Left
    • 向左移动到下一个单词 Left
    • 向左移动光标并选择 Ctrl + Shift + Left
    • 向左移动光标到下一个单词并选择 Shift + Left
  • 向右移动同理。
  • 关闭窗口 Ctrl + W
    • 扩展选区 Ctrl + Alt + W，这是一个我几乎不用的功能
  • 切换窗口 Ctrl + 数字键, Alt + 方向键
  • 移动窗口 Alt + .
  • 垂直分割窗口 Alt + \, Alt + F24
  • 在分割窗口间切换 Alt + [, Alt + ]
  • 重构代码 Alt + ;, Alt + F24
  • 使用 ESLint 重构代码 Alt + '

我的插件方案

WebStorm 真的不需要装很多插件。
我只装了 5 个插件，其中有 3 个是主题和外观插件。

20200519114909

  • Nyan Progress Bar
    20200519114926
  • Rainbow Brackets
    20200519114947
  • GitToolBox
    • 自动 Fetch，Inline Blame， Git 状态
  • Git Branch Cleaner
    • 自动删除没有 Tracking Branch 且已经完全合并的 Branch
avatar
文章
阅读
粉丝

友情链接：