关于使用WebStorm两年所总结的一些常用插件和功能

心如止水_自在如风
1,293 阅读8分钟

我正在参与掘金创作者训练营第5期， 点击了解活动详情

WebStorm不愧是Jetbrains旗下IDE，在编写体验上十分丝滑。在平时开发过程中总会去想如何可以在WebStorm上进一步提高开发的效率，互联网上各处搜集的时候比较零散，想着可以写下来沉淀一下，本文主要是谈一下使用Webstorm的总结，如果大家如果有好的点子或者想法也可以留言或者评论文章，谢谢。

本文主要是讲以下几个部分

  • 常用插件
  • 常用快捷键
  • 常用配置和常用功能
  • Mac下软件启动方式(右键打开、命令行打开)

常用插件

由于WebStorm功能已经足够强大，所以功能性插件其实并不需要额外安装太多，很多内置的插件已经很不错了，下面的都是一些拓展性的插件，装了可能体验更好。

外观

  • Atom Material Icons 一个美化文件图标的插件

  • Material Theme UI 主题软件，个人比较喜欢Dracula的配色

  • Nyan Progress Bar 一只在加载文件或者进行一些操作读条的彩虹猫，纯属只是比较可爱哈哈

效率

  • Comments Highlighter 用于高亮注释，在一些复杂的代码中，不同的高亮注释会助于分离逻辑

    可以在设置→编辑器→Comments Highlighter 中配置高亮，默认是三种

  • Key Promoter X 因为WebStorm功能还是比较复杂的，快捷键也特别多，当你进行一些可以用快捷键代替的操作时，这个插件可以在右下侧提示你对应快捷键。

  • GitToolBox 在项目中可以看到具体到某一行的提交信息和提交人

  • Rainbow Brackets 自动用多种颜色的括号可以方便看括号的对应关系

  • Translation 翻译插件 command + control + O 快捷键进行替换翻译，还可以针对中文选择大驼峰小驼峰用来做英文变量命名

  • Import Cost 显示引入的包体积大小

常用快捷键

如果是windows用户command直接换成ctrl即可

  • 变量名后加.log +Tab 自动补全为console.log(变量) 【这部分功能是在编辑器->常规->后缀补全中设置】 或 直接log+Tab 生成console.log() 【这部分功能是在编辑器→实时模板 中配置】 这两种补全可以完全自定义。
  • /+command 根据当前文件或环境提供注释的前后缀，比如在js代码处就是// 而在JSX的模板里就是{* *}
  • 在各种括号中可以用Tab 键跳出括号比如一般输入[ 就会生成[光标] 在光标处编辑完后直接Tab就可以让光标跳出[]
  • 在项目中经常要注释中英文来回切换的时候会触发双shift误开全局搜索，因此可以根据这个链接去禁用并修改快捷键，全局搜索我设置的是command+shift+F，可以搜索设置、代码、文件名、文件夹名、改变主题等等。
  • 项目中碰到的一些函数或者变量不知道是在哪声明的，对着变量或函数command+鼠标左键 就可以跳转到声明的地方。
  • 在代码文件上下切换时可以使用command+shift+← 和command+shift+→ ，尤其是在Vue2代码编写中，经常要在template和data、methods之间切换，当你光标第一次在template修改了代码，然后鼠标滚动到methods去修改代码时想再回头看template代码就可以直接command+shift+←回到template那部分，当你看完后打算继续编写methods时可以command+shift+→再回去，来回切换非常方便。
  • command/ctrl + shift + ↑/↓：智能移动代码块，如果移动函数，可以将这个函数整体移动到上一个函数上
  • command+z 回退上一次操作，command+shift+z 撤销回退。比如你写了两行代码，感觉不应该这么写，就可以command+z回退到没写这两行代码，突然你意识到可以这么写就可以command+shift+z再出现这两行代码。
  • 格式化代码的快捷键是command+option+L ，当配置了prettier后也是一样的快捷键，谨慎执行，除非团队是统一的规范，否则可能在git协作时增加心智负担。
  • 在正则表达式上按option/alt + enter ，可以用于验证正则表达式，有时候不确定的时候不用到网页上试了= -=
  • command+D 可以复制当前行，如果选中片段则可以复制片段。
  • command+E 可以查看最近使用的文件。
  • F2 可以导航到编辑器报错或警告的位置，F2+shift 上一个警告。

项目中常用的配置和功能

实时模板(自定义快捷键模板)

实时模板，定制自己的代码模板，比如webstorm默认配置的arf+Tab 会创建一个

const <第一个光标默认位置> = () => {
    <当编写完第一个光标后Tab跳转后第二个光标位置>
}

打开设置→编辑器→实时模板→arf 会发现模板文本如下

照猫画虎我们就可以创建自己的代码模板df，一个箭头函数

这样配置好以后未来只要df+Tab 就可以直接自动生成一个箭头函数了并且默认会在NAMENAME的位置，Tab后到ENDEND的位置，非常方便。在实时模板下可以看到很多个快捷键，都是webstorm默认的一些针对不同类型文件下的快捷键，同时你也可以根据自己的需要来快速生成代码。

默认文件模板

默认文件模板，如果按上述的方式，如果去初始化一个文件的默认代码还得创建一个实时模板，再用快捷键+Tab生成代码。Webstorm已经替我们想到了，当你在创建一个文件的时候也可以去配置默认的代码。

设置→编辑器→文件和代码模板→Vue...

可以看到这是webstorm为我们配置的默认的模板，你可以在这个基础上去更改，在右下角的描述中也有一些提供的预定义变量，比如你可以在创建时自动创建一个当前时间，用户名之类的注释。

后缀补全自动生成代码

后缀补全。如在变量名后加.log +Tab 自动补全为console.log(变量) ，在编辑器→常规→后缀补全

可以看到通过在表达式后加.const 还可以补全为const的变量表达式，和实时模板类似也是高度定制化的。

收藏夹

在比较大型的项目中迭代需求时，可能只需要更改个别几个文件或是同时进行多个有文件重叠的需求，整个项目可能有几百个文件，会让人感到眼花缭乱，收藏夹可以对你需要修改的文件单独拎出来。右键文件夹或文件添加到收藏夹，然后就会显示在左下收藏夹中了，这样在开发需求时就能更聚焦于要修改的文件。

启用连写

启用连写以后代码会看起来更优雅一些

在设置→编辑器→字体→勾选启用连写

关闭设置中ESLINT里的保存时运行eslint —fix

这可能在git协作会不小心改掉其他同事代码格式，导致修改了很多格式，在git提交时会导致太多修改而不便于code review。

Mac下配置软件启动方式

软件启动分为两种右键启动和命令行启动。

Mac下右键以webstorm打开项目

打开系统自带软件【自动操作】，进入软件后选择快速操作

按ctrl + s 保存操作

这时候右键文件夹时在快速操作中就可以通过webstorm打开项目文件了，其他软件比如webstorm也是同理。

还有一个更简单粗暴的方式，就是花50买一个国产软件超级右键(他们家的其他免费软件也不错，算是补全了Mac一些痛点)，并且更好看方便，当然还有一些其他功能。

Mac下命令行打开项目或文件

官网提供的方法

如果按上述文档添加完webstorm文件调用webstorm命令时不行的话可能是权限问题

chmod 777 /usr/local/bin/webstorm

这样配置命令行打开对于其他软件也是基本同理的。

如果觉得webstorm太长也可以用linux下的alias命令来给webstorm添加别名ws

alias ws=webstorm

此时就可以通过ws [项目路径] 来打开项目或文件了。

总结

想要详细的了解各项功能，最好的文档往往就是官方文档，所以对于功能的一些更具体的使用方式可以看WebStorm官方文档对应的讲解。 温馨提示一下，Jetbrains的产品打算在2022年10月1日涨价了，打算续订的朋友最好提前一下了

avatar
文章
阅读
粉丝