🎼 前言

JetBrains（以下简称 JB）旗下各领域的 IDE 无疑是目前业界最强大的。

作为前端，我的主开发工具就是 WebStorm，也常常用 IntellijIDEA 写 Java 和 Groovy。

JB 的性能也是一直饱受诟病没错，但「那只能怪电脑」。Windows 机器我不知道，我之前 17 版的 13" MacBook Pro，打开文件树一个目录就能卡半天，但 21 版的 14" MacBook Pro M1 毫无压力。

我曾经隔三差五地就去搜有什么办法解决 WebStorm 的文件树卡在 Loading 的问题，也因此用了一段时间的 VsCode。但最终，我还是回到了 WebStorm 的怀抱。

JB 旗下所有 IDE 的底层架构一致，配置项、插件大多都是通用的，没有例外就不单独介绍了（没有特殊情况，本文中有关截图均为 WebStorm，版本 2023.2）。

主要内容

适合读者

认为没有必要用 WebStorm 的用户
WebStorm 小白和对设置有疑问的用户
WebStorm 高手，切磋交流

编辑历史

日期	版本说明
2023/08/24	第一版

🧲 Why WebStorm

让我对 WebStorm 保持热爱，有以下几点：

优雅的 UI
强大的专业性
智能的编辑器
全面的开发者工具
极致的安全性

优雅的 UI

最初我从 Eclipse 转到 WebStorm 的两大原因之一就是，Eclipse 实在是太丑了，尤其当时它还没有适配 Retina 屏幕。

不过早期的 WebStorm 也好看不到哪去，从它最早那个土里土气的图标就可见一斑。然而，不像 Eclipse 那样，这么多年了，仅仅完成了适配了 Retina，UI 设计上一点都没有起色，不仅仅是审美疲劳的问题，连界面都不变，实在没法指望在用户体验上能有多大的提升。这些年 JB 统一了产品线所有的图标风格，给人一种「We are Family」的感觉。在其背后，更是底层框架、配置体系、插件体系的大融合。

WebStorm 每一年的大版本升级，在 UI 和功能上都能够给用户带来一些惊喜，尤其是 2023 版的「New UI」，令人耳目一新，感觉清爽、高效、优雅。

强大的专业性

我一直说 IDE 是学习技术最好的老师，最大的原因就是在于它在语言、框架层面的专业性。

WebStorm 一直走在前端技术的最前沿，不论语言层面的 JS、TS、Node.js、JSON、CSS、LESS、SCSS、HTML，还是各种流行框架和库 React、Vue、Angular，它们的特性都被吃得透透的。

智能的编辑器

虽说广告法严谨使用「第一」、「最」这样的字眼，但 JB 还是这么做了，它说 WebStorm 是「The smartest JavaScript IDE」，因为它有「The smartest editor」。

除语言和框架层面的专业性之外，WebStorm 可以深度理解你的项目架构，同时在各个方面对你的编程进行辅助，智能提示、快速补全、发现并提供问题解决方案、探查冗余和无效代码、重构辅助等等。

全面的开发者工具

作为 IDE，WebStorm 内置了很多开发者需要的工具：

你可以用 WebStorm 的 Debug 工具很方便地调试 Node.js
它拥有目前 IDE 里最安全、最方便、最好用的 Git 冲突解决方案
WebStorm 内置全面的代码质量检查工具，能够帮你找出隐藏很深的代码问题，且完美支持 Eslint、Stylelint 等三方工具，从而保证我们的代码质量
还有很多：内置 Termial、内置 HTTP 服务器

极致的安全性

无论你什么时候退出编辑，你都可以再次打开文件后通过 ⌘Z 和 ⇧⌘Z 快捷键导航到当前文件的任何一个历史状态。WebStorm 提供的本地历史记录能够帮我们误删的尚未进入 Git 的代码，这有时候真的可以救命。

⚙️ 常用设置

玩软件么，就两点：设置和插件，先来说说设置。

对工具的态度，必须是「把你设置成我喜欢的样子，让你以我喜欢的方式为我工作」。

注意设置中的这个小图标，有它表示项目专属配置，新起一个项目需要重新设置，没有表示全局设置，将应用到所有的项目。

🚦 启动 / 退出

当你新开一个 Project 的时候，你可能被弹窗：

我选择单窗口模式「This Window」。

如果你勾选了「Don't ask again」，但后面希望修改打开方式，可以在 Settings → Appearance & Behavior → System Settings 下调整：

👗 UI 设置

不论黑党、白党，你都应该选择自己最舒服的样式。

主题

本人白党，除了 Terminal 和少数场景用黑色外，一般都是白的，这完全是个习惯问题。

WebStorm 的默认主题是「Dark」，改成「Light with Light Header」（或者勾选「Sync with OS」后设置），配置路径 Settings → Appearance & Behavior → Appearance：

不得不说，JB 的 UI 是越来越符合我的个人审美了，以前还需要「Material Theme」插件的加持，2023 版 New UI 素颜就已经妙不可言了，Settings → Appearance & Behavior → New UI 下开启（可以选择性地开启紧致模式）：

旧版 UI	New UI

字体

默认的 UI 字体并非等宽子弟，略紧凑，且粗体看起来很明显，不符合我的个人审美，改。

关键字：「font」
设置路径：Settings → Appearance & Behavior → Appearance
设置：字体改为「Monaco」，大小 12

默认	修改后

🎞️ 编辑器设置

以自己喜欢的方式看代码和写代码。

字体

因 Eclipse 的缘故，曾经我最常用的编辑器字体是「Courier New」，但它笔画偏细；JB 的编辑器默认字体是「JetBrains Mono」，字体大小 13，行距 1.2，整体效果其实是不错的。

不过，我还是换成了这段时间最喜欢的编辑器字体是 Operator Mono，需先安装。

关键字：「font」
设置路径：Settings → Editor → Font
设置：字体改为「Operator Mono」，将主字体设为「Light」，粗体设为「Book」

默认	修改后

展示空白字符

自出道起，任何编辑器必须安排的设定就是显示空白字符。我考察一个人代码习惯好坏其中一条就是看他的编辑器是否显示空白字符。

关键字：「whitespace」
设置路径：Settings → Editor → General → Appearance
设置：勾选「Show whitespaces」

编辑器不准随意修改代码

作为肉眼 Linter，我对代码编辑器的态度是：「我告诉你这么写就对了，你不要乱改」。

因此，编辑器偷偷把空格删掉，或者随意格式化的行为我都不喜欢（非 prettier 追捧者）。默认，WebStorm 会帮你偷偷地杀空格，这有时候会很困扰我。

关键字：「trailing」
设置路径：Settings → Editor → General → On Save
设置：取消勾选「Remove trailing spaces on」

你还可以根据喜好勾选是否：

删除文件末尾多余的多个空行
保证文末有且仅有一个空行

关闭文档阅读模式

你可能发现代码中的文档默认长这样了：

如果要编辑它，还需要先点一次左边的图标，个人觉得不方便，所以把这个默认行为取消了（当然，如果你喜欢这样，可以开启）。

关键字：「documentation」
设置路径：Settings → Editor → Apperance
设置：取消勾选「Render documentation comments」

关闭自动折叠

打开一个 TS/JS 文件，你可能看到这样的展示：

跟阅读模式一样，自动折叠的目的也是便于阅读，但一来我们不应该在一个模块下写过多的 import，二来我希望一眼可以看到代码的全貌（而不是需要多点一次），所以我一般都会关掉这个设置。

关键字：「fold」
设置路径：Settings → Editor → General → Code Folding
设置：取消一切自动折叠（「File header」和「Imports」两项默认是勾选的）

🌲 文件树设置

减少干扰，提高效率。

那些外来物种

文件树里的东西并非都是源代码，系统、IDE、初始化脚本、构建脚本都有可能生一些自己的东西出来：

系统文件
- Mac 的 .DS_Store
- Windows 的 Thumbs.db
IDE 配置
- JB 的 .idea 目录
- Eclipse 的 .settings 目录
- VsCode 的 .vscode 目录
下载的依赖，如 node_modules
构建产物（视构建脚本而定）

部分 VsCode 党认为有必要把 .vscode 上传到 VCS（版本控制，如 Git、SVN 等），我很反对这种做法，且不说极有可能造成不必要的冲突，换个角度去思考，JB 党、Eclipse 党是不是也可以（希望）这么做？

另外，有必要把这些目录从常规的全文搜素中剔除，以排除干扰，提升搜素性能。

我的做法：

添加到 VCS 的忽略列表（推荐做减法，比如把 .* 全部忽略，而添加部分的例外，如 !.*ignore）
消除它们对全文搜素的影响（二选一）
- 隐藏文件与目录，从文件树抹除，眼不见为净，适用于系统或 IDE 生成的文件或目录
- 加到排除列表，适用于依赖和构建产物

隐藏文件与目录，眼不见为净

JB 在项目下会自动生成一个 .idea 目录，用来保存项目专属的配置项。WebStorm 默认不展示它，但 IntellijIDEA 还是会展示。

关键字：「ignored」
设置路径 Settings → Editor → Filt Types → Ignored Files and Folders
设置：添加相关目录和文件

加到排除列表，可见但默认不会被搜到

WebStorm 认为 node_modules 是「library root」，并将其标记为「Excluded」，这样的好处是 不会污染全文搜素，但构建产物没有这样的福利，需要手动设置，有两种方式将其添加到排除列表：

方法 1 ：右键菜单 Mark Directory as → Excluded，适用于单个目录

方法 2：Settings → Directories → Exclude files，适用于 Project 下所有同名目录，可以使用通配符

已排除的文件，你也可以「眼不见为净」（然而不推荐这么做），在 Project 的「更多」菜单下 Tree Appearance → 取消勾选 Show Excluded Files。

开启单击打开文件

默认设置如此。

设置面板里找不到的，在 Project 的顶部的「更多」菜单下勾选 Open Files with Single Click ，记得同时勾选 Enable Preview Tab，否则会不小心打开一堆文件。

🎨 必要的颜色设置

加上颜色后，很多东西一目了然，提高代码阅读效率，让代码问题主动找你，而不是你找它。

高亮有变更的目录

为了能够在文件树收起的时候，快速具体哪些文件有改动，强烈推荐 如下设置。

关键字：「highlight」
设置路径 Settings → Version Control → Confirmation
设置：勾选「Highlight directories that contain modified files in the Project tree」

效果：

高亮未使用代码

看别人的代码，最令人恶心的事情是什么？我认为除了格式乱七八糟之外，莫过于没用的 import 和变量。

假设有这么一段很简单的代码:

ts 复制代码

import {
  useRef,
  useCallback,
  useEffect
} from 'react';

export default function useHandleClick(): () => void {
  return useCallback(() => {
    const message: string = 'clicked';
    
    // console.info(message);
    console.info('clicked');
  }, []);
}

没有 Linter 的加持，WebStorm 其实已经提示了其中的 useRef、useEffect 和变量 message 未使用，只不过不明显，需要做一下调整。

关键字：「unused」
设置路径 Settings → Editor → Color Scheme → General → Unused code
设置：为「Unused symbol」添加一个令人懊恼的背景色，比如 #FFFF00

默认	修改后

加上黄色背景，展示效果令人难过，无用代码无处遁形，绝对是代码洁癖患者的福音。

除了当前模块内部的 import 和变量外，WebStorm 甚至可以告诉你当前模块在项目下有没有被使用。

配置类型颜色

写 TS，为 Class、Enum、Interface、Type alias 等设定不同的颜色，有助于更快更好地理解代码逻辑（建议修改最基础的地方）。

类别	配置路径	样式
`Class`	Settings → Editor → Color Scheme → Language Defaults → Classes → Class name	`#AA44DD` 粗体
`Enum`	Settings → Editor → Color Scheme → TypeScript → Enum 受之前 `Class` 修改影响	`#DD6600` 粗体
`Interface`	Settings → Editor → Color Scheme → Language Defaults → Classes → Interface name	`#CC0066` 粗体
`Type alias`	Settings → Editor → Color Scheme → TypeScript → Type alias 受之前 `Interface` 修改影响	`#3399FF` 粗体

🧩 插件推荐

接下来说玩软件之二 - 插件。

所谓 IDE，说白了，其实就是编辑器 + 预设插件。作为前端最强 IDE 的 WebStorm 已经自带了很多插件，足以满足绝大部分的开发任务。

以下是我推荐的一些插件。

Atom Material Icons

现在看来，开发者把它从 Material Theme UI 抽离出来是一个非常明智的选择。

URL：plugins.jetbrains.com/plugin/1004...
推荐指数：★★★★☆
推荐理由：更有辨识度，且不仅仅是文件图标；细节很到位，比如空心的文件夹表示其内部有文件被打开；设置丰富，可自定义目录样式

原生效果	插件效果

Material Theme UI

曾经很喜欢，即使后来它改收费了，觉得基本功能也可用，但 New UI 出来后，就觉得没什么必要了。

URL：plugins.jetbrains.com/plugin/8006...
推荐指数：★★★
推荐理由：确实美观很多，但收费，不交钱很多不能设置（基本够用）

.ignore

URL：plugins.jetbrains.com/plugin/7495...
推荐指数：★★★★☆
推荐理由：支持几乎所有的 .xxignore 文件，具有语法高亮、提示等功能

曾经的必备，但最新的 JB 默认已经支持了基本的 ignore 文件格式，但我还是装了。

原生效果	插件效果

Rainbow Bracket

URL：plugins.jetbrains.com/plugin/1008...
推荐指数：★★★☆
推荐理由：括号多的时候有用，但效果没有 VsCode 上的好

Code Glance Pro

URL：plugins.jetbrains.com/plugin/1882...
推荐指数：★★★
推荐理由：MiniMap，好多个类似的插件，作者都不是一个人

String Manipulation

URL：plugins.jetbrains.com/plugin/2162...
推荐指数：★★★★★
推荐理由：相当有用啊

Regex Rename Files

URL：plugins.jetbrains.com/plugin/1706...
推荐指数：★★★★★
推荐理由：个人认为是一个 Missing Feature

甚至可以利用正则给文件批量添加添加前后缀。假设我们已经写了一堆 React hook，发现文件少了 use- 前缀，可以如下操作：

圈选需要改名的文件
右键呼出「Replace Text in File Names」
勾选 Regex，From Text 为 ^ 表示词首（需要正则基础），To Text 为 use-
确认，就都改好了，高效

WakaTime

URL：plugins.jetbrains.com/plugin/7425...
推荐指数：★★☆
推荐理由：有趣的统计，但有点慢，免费的只能看两个星期（略小气..）

Presentation Assistant

URL：plugins.jetbrains.com/plugin/7345...
推荐指数：★★☆
推荐理由：录制演示视频（或直播）的时候可以用它，平常估计用不到

⌨️ 快捷键

除非你是刚出道的新人，一张白纸，否则你一定需要自定义快捷键。

新建预设

我有很多从 Eclipse 沿袭了很多代码编辑和导航的习惯，也在 Sublime 吸收了多点编辑的快捷键，不想改，也没有必要改。

WebStorm 默认的快捷键预设「macOS」，和个人习惯还是有较大出入的，所以我以「Eclipse (macOS)」为基础，建一个新的自定义预设再进行修改。

关键字：「keymap」
设置路径 Settings → Keymap
设置：新建一个自定义预设（记得修正冲突）

我的高频快捷键列表

写代码，除了最高频的复制黏贴之外，还会用到很多很多的快捷键，以下是根据个人习惯做的记录（排名不分先后）。

注意：如果提示有冲突，务必解决掉，否则会无法如预期。

设置路径	「macOS」预设	「Eclipse (macOS)」预设	说明
Main Menu → Window → Editor Tabs → Editor Close Actions → Close All Tabs	⇧⌘W	⇧⌘W	⌘W 其实我用的不多，一般都是在开了不少 Tab 后，一击全杀
Main Menu → Code → Move Statement Down	⇧⌘↓	⌥↓	-
Main Menu → Code → Move Statement Up	⇧⌘↑	⌥↑	-
Main Menu → Code → Comment Actions → Comment with Line Comment	⇧⌘↑	⌥↑	-
Main Menu → Code → Comment Actions → Comment with Block Comment	⇧⌘/	^⇧/	习惯 ⇧⌘/，对应系统快捷键是呼出帮助，在系统设置里改成别的
Main Menu → Navigate → Goto by Name Actions → Go to File...	⇧⌘O	⇧⌘R	Eclipse 习惯，R 表示 Resource
Main Menu → Navigate → Goto by Name Actions → Go to Class...	⌘O	⇧⌘T	Eclipse 习惯，T 表示 Type
Main Menu → Edit → Editor Select Actions → Add Carets to Ends of Selected Lines	⌥⇧G	⌥⇧G	💥 自定义 ⇧⌘L，Sublime 的习惯
Main Menu → Edit → Find → Find...	⌘F	-	💥 自定义 ⌘F
Main Menu → Edit → Find → Replace...	⌘R	-	💥 自定义 ⌘R
Main Menu → Edit → Find → Find in Files...	⇧⌘F	⌃H	⇧⌘F 在「Eclipse (macOS)」下对应是格式化代码
Main Menu → Edit → Find → Select All Occurrences	⌃⌘G	⌃⌘G	-
Main Menu → Refactor → Rename...	⇧F6	⇧F6	💥 自定义 F2
Editor Actions → Clone Caret Above	-	-	💥 自定义 ⇧⌥↑，很重要的多点编辑快捷键
Editor Actions → Clone Caret Below	-	-	💥 自定义 ⇧⌥↓，很重要的多点编辑快捷键
Editor Actions → Move Caret to Line Start	⌘←	⌘←	-
Editor Actions → Move Caret to Line Start with Selection	⇧⌘←	⇧⌘←	-
Editor Actions → Move Caret to Line End	⌘→	⌘→	-
Editor Actions → Move Caret to Line End with Selection	⇧⌘→	⇧⌘→	-
Editor Actions → Move Caret to Previous Word	⌥←	⌥←	-
Editor Actions → Move Caret to Previous Word with Selection	⇧⌥←	⇧⌥←	-
Editor Actions → Move Caret to Next Word	⌥→	⌥→	-
Editor Actions → Move Caret to Next Word with Selection	⇧⌥→	⇧⌥→	-
Editor Actions → Move Caret to Matching Brace	^M	^M	-
Editor Actions → Delete to Word End	⌥⌫	⌘⌫	-
Editor Actions → Delete to Word End in Different "CamelHumps" Mode	-	⌥⌫	-
Editor Actions → Delete Line	⌘⌫	⌘D	Eclipse 带下来的习惯，很多在线编辑器，如 ACE、CodeMirror5 等也都是 ⌘D
Editor Actions → Duplicate Entire Lines	-	⌥⌘↓	我找不到向上复制行的命令了 😭
Editor Actions → Toggle Case	⇧⌘U	⌥⌘↓	-
Editor Actions → Add or Remove Caret	⌥Click	⌥Click	-
Editor Actions → Join Lines	^⇧J	^⇧J	💥 自定义 ⇧⌘J，Sublime 的习惯，和 ⇧⌘L 无缝衔接
Plugins → Git → VCS Group → Commit...	⌘K	-	💥 自定义 ⌘K

🪁 亮眼功能

多点编辑

Sublime 掀起了编辑器的革命之一就是多点编辑，目前大多数的 IDE、编辑器，甚至 Web 端的编辑器都已经支持多点编辑，前述我的常用快捷键中的大部分都跟多点编辑有关。

关于多点编辑，我觉得有必要到时候写一篇新的文章来介绍，所以这里就不展开了，我要说的是：我真的很倚赖多点编辑，每天都会用到。

智能命名

WebStorm 会根据文件名和用户输入进行自动补全，使用频率非常高，十分倚赖。

比如，已有模块 compute-scroll-height.ts，由于名称的相似性，复制了 compute-scroll-width.ts：

现在 compute-scroll-width.ts 的内容和 compute-scroll-height.ts 完全一样：

ts 复制代码

import {
  FONT_LINE_HEIGHT
} from '../const';

export default function computeScrollHeight(lines: number): number {
  return Math.round(FONT_LINE_HEIGHT * lines + 8); // 单行 17px，最外层有上下 4px 的 padding
}

除了修改方法的实现之外，我们需要在 compute-scroll-width.ts 中改一下方法名（虽然这个名字实际上没有意义，但对 IDE 的自动补全有用）为 computeScrollWidth。

这个例子中，手写也不成大问提，但如果新文件名和旧文件名有较大的差异，手写不仅效率低下，还容易出错。

WebStorm 提供了很简单操作：只需要双击要改的方法名，然后写个小写的 c，然后敲 Tab，「BOOM 💥」，新名字就自动写好了，大小写、拼写都是我们需要的。

同样的，哪怕你写的是一个 React 组件 rc/xxx-yy-z/index.tsx，也可以这么操作，只要写一个大写的字母，然后 Tab 即可。

探查代码问题

小强理论，当你发现有一处臭代码的时候，就表示已经有很多臭代码了。我经常会做一些突击检查，文件树右键「InspectCode...」：

无论是拼写错误、风格违规、未使用变量还是潜在风险，它都可以帮我们检测出来，可以用它作为项目健康度的一个判断依据。

依赖关系图

快捷键 ⌥⌘U 可以展示依赖关系图（拼上 SHIFT 可以单页打开）。

Code with Me

实时的在线结对编程，更多内容可以看官方文档。我发现这个功能后立即找我同事试了一次，体验很棒。

🪭 写在最末

WebStorm 作为前端开发 IDE，具有优雅的 UI、丰富的功能、灵活的配置、智能的编辑、关心代码质量和安全，不愧为「The smartest JavaScript IDE」。

写代码最重要的一是效率，二是质量，无论哪方面，WebStorm 都能为你保驾护航。

我的常用软件 - WebStorm

🎼 前言

主要内容

适合读者

编辑历史

🧲 Why WebStorm

优雅的 UI

强大的专业性

智能的编辑器

全面的开发者工具

极致的安全性

⚙️ 常用设置

🚦 启动 / 退出

👗 UI 设置

主题

字体

🎞️ 编辑器设置

字体

展示空白字符

编辑器不准随意修改代码

关闭文档阅读模式

关闭自动折叠

🌲 文件树设置

那些外来物种

隐藏文件与目录，眼不见为净

加到排除列表，可见但默认不会被搜到

开启单击打开文件

🎨 必要的颜色设置

高亮有变更的目录

高亮未使用代码

配置类型颜色

🧩 插件推荐

Atom Material Icons

Material Theme UI

.ignore

Rainbow Bracket

Code Glance Pro

String Manipulation

Regex Rename Files

WakaTime

Presentation Assistant

⌨️ 快捷键

新建预设

我的高频快捷键列表

🪁 亮眼功能

多点编辑

智能命名

探查代码问题

依赖关系图

Code with Me

🪭 写在最末