使用 IDEA 提升开发效率

date
Aug 31, 2022
slug
dev-with-idea
status
Published
tags
IDEA
开发工具
type
Post
lang
summary
我习惯使用 IDEA(WebStorm 也一样) 进行开发,因为它确实帮我省去了很多时间,本文简单整理我在 IDEA 中常用的功能。
我习惯使用 IDEA(WebStorm 也一样) 进行开发,因为它确实帮我省去了很多时间,本文简单整理我在 IDEA 中常用的功能。
Tips:作为程序员,工作中的很大一部分内容就是编码,所以想办法尽可能提升我们的研发效率是一件很值得投入的事情。
这篇文章是我很久之前在组内分享的部分内容,整理成文章后在公司内的反响不错,所以把关于 IDEA 的一些操作单独提出分享,希望对你有所帮助。
注意:IDEA 的 UI 已经更新了,这部分内容因为是两年前写的,所以样式有点丑,现在长这样:
notion image
文章内容有点多,加个索引可以直接看感兴趣的内容(很多 GIF 丢了,推荐大家自己上手操作)。

代码重构功能

这是 IDEA 中我认为最强大的功能,也是我编码中最最常用的功能,所以我放在最前面。
如果你有阅读过《代码整洁之道》(没读过也推荐抽时间读一下),或者有过被屎山坑过的经历,那么你应该知道重构对于代码可维护性的重要程度。
《代码整洁之道》中提到的几个概念
  • 没有人能一次把代码写的非常完美
  • 稍后等于永不
  • 必须时时保持代码整洁
我们没有办法在最开始的时候就把代码写的非常完美,每完成一部分代码,我们都应该停下来思考怎么把这段代码优化的更完美,而不是下次再说。随时随地重构代码是我们应该学会并进行实践的事情。
既然重构是我们日常开发中每时每刻都需要关注的事情,那么思考如何高效的进行重构就非常有必要。
通过使用 IDEA 的重构功能来快速、高效的进行重构是我们必须要学会的事情。

对函数进行重构

《代码整洁之道》中提到,一个好的函数需要符合以下几点:
  • 函数尽量短小,这样的函数更利于阅读和理解
  • 只做一件事,只做一件事的函数更便于理解和测试
  • 使用描述性的名称
  • 单一权责原则
  • 尽量少的参数

如何写出这样的函数

先按照感觉写,然后不停的优化你的函数,打磨这些代码,分解函数、修改名称、消除重复。没有人能够开始就按照规则写函数。
这一点很重要,先把要实现的功能写出来,再去思考如何优化函数。使用 IDE 的重构功能可以很方便的完成这件事。

使用 Refactor 功能进行重构

选中我们需要重构的代码,使用快捷键 ⌘ + T 就可以呼出重构工具,帮助我们快速进行重构。
notion image
  • Extract Method 可以让我们快速将复杂函数拆分成无数的功能单一的短小函数。
  • Introduce Constant 帮我们解决代码中的魔法数字。
  • Extract Interface 帮助我们重构 TS 类型。
  • 等等等其他非常好用的重构功能,需要你自己去尝试。
说实话我没有办法想象失去了这些功能我还怎么写代码,IDEA 已经把我拿捏死了。

通过 Option + 回车 快速修改函数

notion image
Option + 回车 呼出的工具,也非常好用。可以将参数转为对象参数,转为箭头函数,甚至可以直接帮你把 TS 类型提出来。

快速检索函数、变量等等的引用

可以帮助你找到被影响的代码,通过 Option + F7 可以快速查找当前的方法、变量等被谁引用,这样在重构代码时,心里更有底气。
notion image

重命名

使用描述性的名称进行编码非常重要。
但是有时就是想不起用什么好名字,所以就临时取了一个差不多的。但是过了会或某天再看代码时,又想到了更好的命名,就可以方便的使用 Rename 功能进行替换命名。
notion image
IDEA 的 Rename 会帮我们自动将其他所有引用这个变量的地方都进行重命名,很方便,让我们可以放心大胆的对变量进行重命名。
notion image

代码位置调整

有的时候会发现自己代码的组织非常混乱,或者单行文件代码量非常非常多,这时候想对位置进行快速调整,就可以使用 Move 功能
 
和调整名称一样,其他所有引用这个变量/方法的地方都会更新到最新的目录地址。

最后

IDEA 的重构功能我其实只讲了个皮毛,它的其他重构功能基本上都非常好用(毕竟要花钱),如果你在使用 IDEA,但是从来没有使用过这些功能的朋友,推荐都试一试。
但其实最重要的还是那颗对整洁代码追求的心,如果你根本不 care 整洁代码,以及它的重要性,那么就算有再好的工具,也没有什么用。

Exclude 掉不需要关心的代码

大部分人不习惯使用 IDEA / WS 是因为太卡(另一个原因是太贵),这个方法可以帮你解决一些卡顿上的问题,尤其当你的项目是 Monorepo 时。
如果你发现现在 WebStorm 非常卡顿,那么有可能是因为它索引了太多的文件,这个时候就 Exclude 掉不需要关心的代码,让 WebStorm 不对这部分代码进行索引,减少卡顿。
notion image

范围选择代码

快捷键:Option + ↑ 和 Option + ↓
可以用来快速选择代码块,效果如图(可以自行修改成更顺手的快捷键,因为很常用)
notion image

操作区域快速跳转

快捷键:
  1. Esc 快速跳转到编辑区
  1. ⌘ + 1 快速跳转到文件选择区(1234 都有对应的跳转区域,可以看 WebStorm 边上的标注)
  1. Option + F1 快速跳转文件
可以用来在不同区域快速切换,常用操作有
  1. 从任意位置择跳转到代码编辑区域
  1. 定位到代码对应的文件位置

快速跳转到编辑区

notion image

在不同区域显示当前文件

notion image

选择最近编辑文件

快捷键:⌘ + E
功能:可以用来选择最近编辑的文件
notion image
可以输入直接进行搜索(推荐)
notion image

快速打开最近项目

推荐自行配置一个快捷键,如果常用此功能的话(默认是没有快捷键的)。
notion image
 
同样可以搜索:
notion image

快速查找文件

快捷键:双击 shift
notion image

快速查找代码

快捷键:⌘ + Shift + F
可以根据一些条件进行筛选:
notion image

查看本地文件历史记录

查看本地文件的修改记录(非 commit 记录)
notion image
notion image
 

查找 WebStorm 操作(墙裂推荐)

快捷键:⌘ + Shift + A
对于一些不是很常用,但是每天基本都会用的操作(比如解决代码冲突、重启 TS 服务等),不想占用快捷键,但是怎么才能快速选中呢?
这个时候就可以使用 Actions 功能,它的功能就是用来查找 WS 的功能。
  1. 双击 shift 打开搜索框,选中 Actions(这样比较蠢,建议直接配置个快捷键)
  1. 搜索你需要使用的功能,然后直接回车即可。
notion image

使用 WebStorm 提供的 stash 功能

Git Stash 是用来存储当前文件的变更,当我们需要这些变更的时候再恢复回来。
具体的可以看: https://backlog.com/git-tutorial/cn/reference/stash.html,一般我们是通过命令行使用这个功能的,但是 WS 也提供了这个的功能。
首先打开功能搜索界面,搜索 stash,选择 Stash changes 可以保存当前内容,unStash 可以恢复之前保存的内容。
notion image

Stash Changes

notion image

UnStash Changes

notion image

快速选择相同代码

快捷键 Ctl + G
场景:批量修改代码
notion image

编辑代码时返回上一步

快捷键
  1. ⌘ + Option + ← / ⌘ + Option + →
  1. ⌘ + [ 和 ⌘ + ]
场景:
  1. 我看到一个方法,想看看里面的实现
  1. 点击这个方法进入查看完之后,想再跳转回之前的位置
notion image

WebStorm Git 工具

使用 WS 自带的 Git 工具完成常用 Git 操作。

提交代码

推荐使用快捷键 ⌘ + K 打开
notion image
notion image

快速解决 Git 冲突

合并代码后,发现我们有这些文件有代码冲突(这里的入口有点深,稍后在介绍 action 的时候会介绍更简单打开此功能的方法,非配置快捷键,毕竟配置多了我们也记不住)。
notion image
双击文件开始解冲突
notion image
双击冲突文件解决冲突即可:
notion image

查看 Git 记录

方法1:很简单的查看每行代码的变更。
notion image
左边会显示代码变更时间和修改人,点击后可以查看 commit 修改详情。
notion image
方法2:用来查询代码详细变更
可以根据分支、变更人等等条件进行筛选。
打开 Git log:底栏的 Git 查看 log 详情。
notion image
根据条件筛选 log 记录:
notion image
notion image

🍒 Cherry-pick 功能

我们可以先看一下 cherry-pick 可以用来做什么: https://www.ruanyifeng.com/blog/2020/04/git-cherry-pick.html
简单来说就是:
对于多分支的代码库,将代码从一个分支转移到另一个分支是常见需求。
这时分两种情况。一种情况是,你需要另一个分支的所有代码变动,那么就采用合并
git merge)。
另一种情况是,你只需要部分代码变动(某几个提交),这时可以采用 Cherry pick。
使用 WS 的 Cherry-Pick 功能,会让一切变得非常简单。
  1. 切换到你需要变更代码的分支
  1. 在 log 工具上选择别的分支上你需要的几次 commit 记录
  1. 右击选择 cherry pick 就可以把选中的 commit 变更移动到当前分支
    1. 如果代码没有冲突的话,那么 WS 会直接帮你提交 commit
    2. 如果代码用冲突,自行解决冲突再提交 commit 即可。
notion image
 
快速查看文件 Git 历史
选择文件或者文件夹,右击显示 Show History 即可显示你选中范围的 Git 历史变更。
notion image
 
会自动帮你区分 paths
notion image

© CC BY-SAJin 2019 - 2022

Powered by Vercel & Notion