阅读 25573

花半天时间从Vscode转向Webstorm(Vscode在Webstorm面前就是个弟弟)

这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战

从vscode转向webstorm的原因

一个维护了一年多的Vue项目需要重构下,很多文件的目录结构需要调整,但是每个文件的交叉引用特别多,修改文件位置的话同时修改文件的相互引用。

在vscode中我把一个文件A移动位置,或者改名字,理论上来说,引用A文件的路径应该会全部改变,但是只有部分改变,摸不清它的规律。

image.png

在webstorm中移动位置就不会有这个问题,webstorm重构的功能做的太稳定了,不管是移动的是什么文件,js,vue,img,css,或者把文件名改成什么样子,只有其他文件用到了,路径都会改掉。

image.png

这是我转到webstorm的主要原因。

从vscode到webstorm的快速转换

步骤:

  1. 安装webstorm,官网下载,30天试用
  2. webstorm安装vscode的键盘快捷方式
  3. 安装主题
  4. 其他设置

下载安装试用

下载推荐从官网下载最新版本,学生可以申请一年试用,github有3个月提交项目的也可以申请试用。 下载安装就不说了,都会。

webstorm安装vscode的键盘快捷方式

我用vscode2年多了,基本上所有的快捷键都用的溜溜的,所以到了webstorm打算使用一样的快捷方式。 第一步,打开Preferences,Mac打开是 Command+, image.png

第二步,下载vscode keymap

image.png 第三步,应用

image.png

这样就设置好了。下面说一下快捷键的区别

快捷键的区别

做了以上设置之后,大部分快捷键是相同的了,还有一些细微的区别

相同的快捷键: (windows把command换成ctrl)

  • command+\ 分屏
  • command+f 查找
  • command+shift+f 全局查找
  • command+p 打开文件
  • command+shift+p 打开指令执行框
  • alt+shift+↓ 复制当前内容到下一行
  • ctrl+` 打开终端

不同的快捷键:

  • webstorm查找和替换是分开的
  • 查找和vscode相同,commad+f command+shift+f
  • 替换是单独是 当前文件替换是command+alt+f 全局替换是command+shitf+h

image.png

webstorm安装主题

我vscode用的是one dark pro主题,在webstorm中保持一致

第一步,打开Preferences,Mac打开是 Command+, image.png

第二步,在plugins中下载vscode keymap

image.png 第三步,设置主题

image.png

其他设置

代码格式化

我vscode还是webstorm都是使用的prettier格式化的,项目中依赖安装了prettier依赖,在webstorm中设置一下即可 Command + ,打开偏好设置

image.png

界面汉化

Command + ,打开偏好设置,plugins装个chinese语言包就行。

项目设置

webstorm默认双击打开文件,可以改成单击 webstorm默认侧边栏不会自动跳转至选中文件,可以修改

image.png

Webstorm比Vscode强的地方

代码重构

上面说了,修改文件名,文件移动位置,会更新引用,正确率100%

代码跳转

在组件,函数,变量上按住command,点一下,会跳转到函数定义的地方,vscode有时候跳转不过去,尤其是vue文件中的自定义组件

image.png

代码提示

webstorm会自动进行代码拼写检查以及代码错误检查,以及代码哪里写的不好,告诉你推荐的写法,

vscode需要安装插件才能进行代码拼写检查 image.png

image.png

webstorm会在git提交前进行统一的代码检查,帮你找到不容易发现的错误,例如400px 少些了个px这种错误

Vscode的优点

  • 轻量,打开快
  • 主题多
  • 多光标特性,虽然webstorm也有,但是command+shift+i 为每一行添加光标的快捷键用不了,只能用 command+d
  • 插件多
  • 不要钱

目前是webstorm和vscode都在用的,快捷键一致的话,用起来体验差不多的,只不过重构代码的时候必选webstorm.

文章分类
开发工具
文章标签