入坑 WebStorm，看这一篇就够了跟着本文章节，一步一步操作（设置、插件、快捷键、技巧），以你自己的喜好修正，一定可

文章的 TOC 太多了，看起来不方便？PC 端可以看看我的《两个 TamperMonkey 脚本，解决掘金阅读体验的三点不爽》，可以解决一些掘金阅读体验问题。

我写的「入坑」系列文章：

《入坑 Mac，看这一篇就够了》
《入坑 iTerm + OMZ，看这一篇就够了》
《入坑 Firefox Developer Edition 及 Mobile 版，看这一篇就够了》
《入坑 WebStorm，看这一篇就够了》← 本文
《入坑 VSCode，看这一篇就够了》
《入坑 Vim，看这一篇就够了》
《入坑 Git，看这一篇就够了》
《入坑 Docusaurus，看这一篇就够了》

🎼 前言

跟着本文章节，一步一步操作（设置、插件、快捷键、技巧），一定能把 WebStorm 打造成作者我喜欢的样式和行为，加上读者你自己的一些喜好，一定可以把 WebStorm 打造成你自己趁手的前端开发利器。

入坑 WebStorm，看这一篇就够了。

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 高手，切磋交流

编辑历史

日期	版本说明
2024/04/17	V4，新增「后缀补全」等
2024/03/15	V3，颜色设置 `!important`，以及很多细碎更新
2023/09/02	V2，由《玩转...》重命名为《入坑...》
2023/08/24	V1

💋 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 冲突解决方案（这也是我弃 Eclipse 从 WebStorm 的两大原因之二）
WebStorm 内置全面的代码质量检查工具，能够帮你找出隐藏很深的代码问题，且完美支持 Eslint、Stylelint 等三方工具，从而保证我们的代码质量
还有很多：内置 Terminal、内置 HTTP 服务器

极致的安全性

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

⚙️ 常用设置

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

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

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

🚦 启动 / 退出

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

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

如果你勾选了「Don't ask again」，后面又想调整，可以在 Appearance & Behavior → System Settings → Project 处调整：

💅 UI 设置

主题

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

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

关键词：「theme」
设置路径：Appearance & Behavior → Appearance
设置：勾选「Sync with OS」（系统也是白的），选择「Preferred Theme」中的「Light with Light Header」

不得不说，JB 的 UI 是越来越符合我的个人审美了，以前还需要「Material Theme」插件的加持，2023 版 New UI 素颜就已经妙不可言了。

设置路径：Appearance & Behavior → New UI
设置：勾选「Enable new UI」和「Compact mode」

旧版 UI	New UI

UI 字体

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

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

默认	修改后

状态栏

在状态栏显示 Git 分支和内存使用情况。

菜单 → View → Status Bar Widgets → 勾选「Git Branch」+「Memory Indicator」：

效果：

🌲 文件树设置

减少干扰，提高效率。

那些外来物种

文件树里的东西并非都是源代码，系统、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」
设置路径：Editor → File Types → Ignored Files and Folders
设置：添加相关目录和文件

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

📍 Setting per Project

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，否则会不小心打开一堆文件。

🍄 编辑器设置

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

编辑器字体

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

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

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

默认	修改后

渲染空白字符

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

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

编辑器不准随意修改代码

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

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

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

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

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

关闭文档阅读模式

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

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

关键词：「documentation」
设置路径：Editor → Appearance
设置：取消勾选「Render documentation comments」

关闭自动折叠

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

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

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

🎨 必要的颜色设置

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

高亮有变更的目录 📍

📍 Setting per Project

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

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

效果：

高亮未使用代码

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

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

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」
设置路径：Editor → Color Scheme → General → Unused code
设置：为「Unused symbol」添加一个令人懊恼的背景色，比如 #FFFF00

效果：

默认	修改后

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

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

高亮问题代码

有的时候，我们会犯一些低级错误，比如把某对象的属性拼写错了，或者某个模块忘记 import 了。虽然有些时候编译器会帮我们找到问题，但时机就晚了。

未使用，只不过不明显，需要做一下调整。

关键词：「unknown」
设置路径：Editor → Color Scheme → General → Unknown symbol
设置：为「Unused symbol」添加一个令人惊恐的背景色，比如 #FFB3B3

效果：

默认	修改后

修改一些默认颜色设置

让不同的语言组成更彰显个性。

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

WebStorm 专门设置了「Unused code」和「Unknown symbol」的样式设置，可以让问题代码无处遁形，绝对是代码洁癖患者的福音。

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

⛱️ 代码格式规范设置

我从来不是 EditorConfig 或 Prettier 的粉丝，宁可被编辑器说代码写的有问题，从而督促自己纠正，也不愿意编辑器悄咪咪地改了我写的代码。

我从来不对自己的代码做格式化，也不会配置编辑器在保存的时候自动格式化，但必要的代码格式设置可以帮助编辑器自动生成符合项目设定的代码。所以这一步还是很重要的。

关键词：「style」
设置路径：Editor → Code Style
设置：建议使用 Default Scheme；然后针对常用的文件类型根据自己或团队偏好进行设置

根据个人及团队喜好和 Eslint、Stylelint、Markdownlint 规则，我的主要调整如下：

位置	语言	原值	调整值	特殊说明
Tabs and Indents → Indent	所有	4	2	内心永远是 Tab 党
Tabs and Indents → Continuation Indent	所有	8	4
Tabs and Indents → Keep indents on empty lines	所有	-	✅
Spaces → Before parentheses → In function expression	JavaScript / TypeScript	✅	-
Spaces → Within → Object literal braces	JavaScript	-	✅
Spaces → Within → ES6 import/export braces	JavaScript / TypeScript	-	✅	-
Wrapping and Braces → Function declaration parameters（Do not wrap） → Align when multiple	JavaScript / TypeScript	✅	-
Wrapping and Braces → Objects	JavaScript / TypeScript	Chop down if long	Wrap always
Blank lines → Keep maximum blank lines → In Code	所有	2	1	JSON 下保持为 0
Punctuation	JavaScript / TypeScript	Use semicolon in code generated by IDE	Use semicolon always
Punctuation	JavaScript / TypeScript	Use double quotes in code generated by IDE	Use single quotes always	内心永远的双引号党
Punctuation	JavaScript / TypeScript	Trailing comma: keep	Trailing comma: remove
Code generation → Comments → Add spaces around block comments	JavaScript / TypeScript	-	✅
Other → Spaces → In empty tag	HTML	-	✅	`<input/>` → `<input />`，将影响 Vue（Vue 下没有相关的设置）

🧩 插件推荐

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

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

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

Atom Material Icons ★★★★☆

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

使文件和目录更有辨识度，有助于规范编程；细节很到位，比如空心的文件夹表示其内部有文件被打开；设置丰富，可自定义目录样式。

URL：plugins.jetbrains.com/plugin/1004…
推荐指数：★★★★☆

原生效果	插件效果

不过...它有些过于细了，以至于有些文件看起来很奇怪，以下是我做一些调整，Atom Material Icons → Associations：

Name	作用	问题	调整
i18n Languages	国际化文案	只要两个字符就会显示为文案图标	修改 Pattern `\^\[a-zA-Z]{2}(-\[a-zA-Z]{2})\.(\[cm]?js\|ts\|json\|ya?ml)\$`为`\^\[a-zA-Z]{2}(-\[a-zA-Z]{2})\.(json\|ya?ml)$\`
NextJS Error	NextJS 专属	文件显示成一个红色的叹号让人看着很慌	去掉勾选
NextJS Page	NextJS 专属	文件显示成一个看起来很怪的框	去掉勾选

Material Theme UI ★★★

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

在没有 New UI 之前，确实美观很多，但收费，不交钱很多不能设置（基本够用）。

URL：plugins.jetbrains.com/plugin/8006…
推荐指数：★★★

Tabnine ★★★★☆

AI 这么火，怎么能不装呢。

URL：plugins.jetbrains.com/plugin/1279…
推荐指数：★★★★☆

.ignore ★★★★☆

支持几乎所有的 .xxignore 文件，具有语法高亮、提示等功能。曾经的必备，但最新的 JB 默认已经支持了基本的 ignore 文件格式，但我还是装了。

URL：plugins.jetbrains.com/plugin/7495…
推荐指数：★★★★☆

原生效果	插件效果

Rainbow Bracket ★★★☆

看起来确实会舒服一些。

URL：plugins.jetbrains.com/plugin/1008…
推荐指数：★★★☆

原生效果	插件效果

Code Glance Pro ★★★

MiniMap，好多个类似的插件，作者都不是一个人，在我不是刚需，最终选择不装。

URL：plugins.jetbrains.com/plugin/1882…
推荐指数：★★★

String Manipulation ★★★★★

相当有用，记住它的菜单呼出快捷键：⌥⇧M。

URL：plugins.jetbrains.com/plugin/2162…
推荐指数：★★★★★

Regex Rename Files ★★★★★

个人认为是一个 Missing Feature。

URL：plugins.jetbrains.com/plugin/1706…
推荐指数：★★★★★

甚至可以利用正则给文件批量添加添加前后缀。假设我们已经写了一堆 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…
推荐指数：★★☆

Draw.io ★★★★★

这不得惊呼「啊这..也太强大了点吧」。

URL：plugins.jetbrains.com/plugin/1563…
推荐指数：★★★★★

⌨️ 快捷键

预设和自定义

WebStorm 内置了多套快捷键预设，默认预设「macOS」，还有 Eclipse、Eclipse (macOS)、Sublime Text、Sublime Text (macOS)、VSCode、VSCode (macOS)、Emacs 等。

除非你是刚出道，一张白纸，否则你一定需要自定义快捷键。预设是不能改的，任何在预设上做的修改，都会自动生一个副本。

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

关键词：「keymap」
设置路径：Keymap
设置：新建一个自定义预设

💡 快捷键小贴士（⌃⌥⇧⌘）：

⌘ Command：最常用的快捷键组成，可配合任何键以及鼠标点击合并；很多 Windows 下以 ⌃ 作为快捷键主键的，在 Mac 下用 ⌘

⇧ Shift：一般不会单独在快捷键组合中出现，它的作用主要由两个：「反向」和「圈选」（记住这点非常重要）

反向：改变行为的方向，比如 ⇥ 的行为是「下一个」，而 ⇧⇥ 是「上一个」

圈选：产生圈效果，比如普通的点击只是切换了焦点，但配上 ⇧ 再点，则会圈选前后点击包含的所有元素，再比如编辑文本的时候按方向键只是改变了光标，配上 ⇧ 则会选中光标经过的地方的文本

⌥ Option：当 ⌘ 组合被用完后，可以用它作为主键

⌃ Control：和 ⌘、⌥ 差不多，唯一的区别是 ⌃Click 被系统默认用作打开右键菜单的方式

以下，我以 Eclipse（macOs）预设为基础，根据多年来沿袭的习惯，记录了常用的快捷键，带 🌈 标记表示根据习惯自定义过的。

高频快捷键 - 快速编辑

快捷键	预设值	功能	设置路径	说明
⇧⇥	⇧⇥	取消缩进（反向 Tab）	Main Menu → Edit → Edit Code Actions → Unindent Line or Selection	无法理解居然有人不知道...
⌘D	⌘D	删除光标所在行（所选行）	Editor Actions → Delete Line	很多在线编辑器，如 ACE、CodeMirror 等也都是 ⌘D
⌥↑	⌥↑	光标所在处的语句上移一行	Main Menu → Code → Move Statement Up	注意是语句，比单纯的移动行更智能
⌥↓	⌥↓	光标所在处的语句下移一行	Main Menu → Code → Move Statement Down	同上
⌘/	⌘/	单行注释	Main Menu → Code → Comment Actions → Comment with Line Comment
🌈 ⇧⌘/	⌃⇧/	多行注释	Main Menu → Code → Comment Actions → Comment with Block Comment	需要改系统快捷键，对应系统快捷键是呼出帮助
⇧⌘F	⇧⌘F	格式化代码	Main Menu → Code → Code Formatting Actions → Format Code	不要养成习惯
🌈 ⇧⌘J	⌃⇧J	合并所选行	Editor Actions → Join Lines
⇧⌘X	⇧⌘X	切换大小写	Editor Actions → Toggle Case
⌥⌘↓	⌥⌘↓	向下复制一行	Editor Actions → Duplicate Entire Lines	我找不到向上复制行的命令了 😭
⌘⌫	⌘⌫	从光标处删除到整个词首	Editor Actions → Delete to Word Start
⌘⌦	⌘⌦	从光标处删除到整个词尾	Editor Actions → Delete to Word End
⌥⌫	⌥⌫	从光标处删除到分词的词首	Editor Actions → Delete to Word Start in Different "CamelHumps" Mode
⌥⌦	⌥⌦	从光标处删除到分词的词尾	Editor Actions → Delete to Word End in Different "CamelHumps" Mode

高频快捷键 - 移动光标

快捷键	预设值	功能	设置路径	说明
⌘←	⌘←	移动光标至行首	Editor Actions → Move Caret to Line Start	忽略行首空白
⌘→	⌘→	移动光标至行尾	Editor Actions → Move Caret to Line End	忽略行尾空白
🌈 ⌘↑	⌘↖	移动光标至文首	Editor Actions → Move Caret to Text Start
🌈 ⌘↓	⌘↘	移动光标至文尾	Editor Actions → Move Caret to Text End
⌥←	⌥←	移动光标到上一个词	Editor Actions → Move Caret to Previous Word	功能描述不是很全面，最好自己试一下
⌥→	⌥→	移动光标到下一个词	Editor Actions → Move Caret to Next Word	功能描述不是很全面，最好自己试一下
⇧⌘\	⇧⌘\	移动光标到对应的括号处	Editor Actions → Move Caret to Matching Brace	吸收自 VSCode

高频快捷键 - 选择文本

💡 ⇧ 的「圈选」Buff。

快捷键	预设值	功能	设置路径
🌈 ⇧⌘↑	⇧⌘↖	移动光标至文首，选中经过的文本	Editor Actions → Move Caret to Text Start with Selection
🌈 ⇧⌘↓	⇧⌘↘	移动光标至文末，选中经过的文本	Editor Actions → Move Caret to Text End with Selection
⇧⌘←	⇧⌘←	移动光标至行首，选中经过的文本	Editor Actions → Move Caret to Line Start with Selection
⇧⌘→	⇧⌘→	移动光标至行尾，选中经过的文本	Editor Actions → Move Caret to Line End with Selection
⌥⇧←	⌥⇧←	移动光标到上一个词，选中经过的文本	Editor Actions → Move Caret to Previous Word with Selection
⌥⇧→	⌥⇧→	移动光标到下一个词，选中经过的文本	Editor Actions → Move Caret to Next Word with Selection

高频快捷键 - 快速导航

快捷键	预设值	功能	设置路径	说明
⇧⌘R	⇧⌘R	根据名字查找文件	Main Menu → Navigate → Goto by Name Actions → Go to File...	R 表示 Resource
⇧⌘T	⇧⌘T	根据名字查找类	Main Menu → Navigate → Goto by Name Actions → Go to Class...	T 表示 Type
🌈 ⌘Click	F3 / ⌃Click	跳到定义或使用处	Main Menu → Navigate → Goto by Reference Actions → Go to Declaration or Usages
⌘E	⌘E	最近文件	Main Menu → View → View Recent Actions Group → Recent Files	按两次可过滤最近编辑
⇧⌘E	⇧⌘E	最近代码位置	Main Menu → View → View Recent Actions Group → Recent Locations	跟上边的命令相比，可以看到代码，同样按两次可过滤最近编辑

高频快捷键 - 查找替换

快捷键	预设值	功能	设置路径
🌈 ⌘F	-	当前文件内搜索	Main Menu → Edit → Find → Find...
🌈 ⌘R	-	当前文件内替换	Main Menu → Edit → Find → Replace...
⌘G	⌘G	查找并将光标移动到下一个搜索命中文本	Main Menu → Edit → Find → Find Next / Move to Next Occurrence
⇧⌘G	⇧⌘G	查找并将光标移动到上一个搜索命中文本	Main Menu → Edit → Find → Find Previous / Move to Previous Occurrence
⌃H	⌃H	全局内容搜索	Main Menu → Edit → Find → Find in Files...
🌈 ⌃⇧H	-	全局内容替换	Main Menu → Edit → Find → Replace in Files...
🌈 ⌥⌘G	⇧⌘G	查找引用（文件、Symbol）	Main Menu → Edit → Find Usages → Find Usages

高频快捷键 - 多点编辑

Sublime 创新了多点编辑以来，几乎所有的 IDE、编辑器，甚至 Web 端的 Ace、CodeMirror 等都在一夜之间都实现了该功能。

在创建多个光标后，结合箭头、移动光标快捷键等，绝对是炫技提效必备。

快捷键	预设值	功能	设置路径	说明
⌥Click	⌥Click	增加光标	Editor Actions → Add or Remove Caret	基础
⌃⌘G	⌃⌘G	选中所有选中的文本，或光标所在的词	Main Menu → Edit → Find → Select All Occurrences	选择后，每个词的光标位置一致
🌈 ⇧⌘L	⌥⌘G	所有选中行末添加光标	Main Menu → Edit → Editor Select Actions → Add Carets to Ends of Selected Lines
🌈 ⌥⇧↑	-	向上复制光标	Editor Actions → Clone Caret Above
🌈 ⌥⇧↓	-	向下复制光标	Editor Actions → Clone Caret Below
⌥⇧鼠标拖拽	⌥⇧鼠标拖拽	纵向拖出一条光标	-	类似连续多次向上或向下复制光标的效果，但附加带选中效果

高频快捷键 - 通用

快捷键	预设值	功能	设置路径	说明
⌘1	⌘1	展示快速修复菜单	Other → Show Quick-Fixes	有病没病都可以按
🌈 ⌃`	-	展示 / 隐藏 Terminal	~~Tool Windows → Terminal~~ 他们把这个弄丢了，可以换 Plugins → Terminal → Open in Terminal，唯独会每次打开对应的目录	VSCode 习惯
🌈 ⌘\	-	编辑器向右切屏	Main Menu → Window → Editor Tabs → Split Right
🌈 ⌥⌘\	-	编辑器向下切屏	Main Menu → Window → Editor Tabs → Split Down
🌈 F2	⇧F6	重命名（文件，变量名、类名等符号）	Main Menu → Refactor → Rename...
🌈 ⌥Z	-	开启 / 关闭代码软折行	Main Menu → View → Active Editor → Soft Wrap	习自 VSCode

高频快捷键 - Git

快捷键	预设值	功能	设置路径	说明
🌈 ⌘K	-	Git Commit	Version Control System → Commit...	同时把 Terminal Clear 的快捷键也改成 ⌘K，和系统保持一致
⌃V	⌃V	VCS 操作弹层	Version Control System → VCS Operations Popup...	这样很多操作就不需要去文件树上右键了
🌈 ⌥⇧⌘B	-	显示/隐藏编辑器左侧的 Git Blame	Version Control System → Annotate	看到臭代码想 Blame 谁的时候，常用

高频快捷键 - 特有功能

快捷键	预设值	功能	设置路径	说明
🌈 ⇧⌘P	⌘3	搜 Action	Main Menu → Help → Find Action	类似 Command Pallette 的能力
⌘D	⌘D	文件比较	Main Menu → Views → Actions on Pairs of Files → Compare Files	在文件树上的 ⌘D，触发文件比较，非常有用
⇧⌘N	⇧⌘N	新建草稿文件	Main Menu → File → File Open Actions → New → Scratch File
🌈 ⌃⌘P	-	切换演示模式	View → Appearance → Toggle Presentation mode	给小伙伴讲解代码的时候用
⌥⌘U	⌥⌘U	弹窗展示依赖关系图	Plugins → Diagrams → Show Diagram Popups
⌥⇧⌘U	⌥⇧⌘U	弹窗展示依赖关系图	Plugins → Diagrams → Show Diagram

🪁 亮眼功能

那些「can't live without」的特性。

Git 集成

JB 的 Git 集成是我用过最强大的，你可以很方便直观地比较历史，可以在编辑器看当前文件未提交的改动并且可以非常方便地回滚任何一处，而最让人不能 Live Without 的就是它的 Merge 了。

每当 git merge 碰到不能 Fast-Forward 的时候，我就庆幸自己是 WebStorm 的用户。绝大多数的冲突问题，可以点击它菜单栏上的「魔术棒」一键搞定，实在需要人工确认的，也只需要动动鼠标即可。

继承与实现快速跳转

虽然函数式编程大行其道，但有的时候未免还是要面向对象编一下程。

干写 class 的话，很容易把一个类写的很大，不仅阅读困难，且非常容易出循环依赖（比如你写一个带插件系统的类，主类与插件之间绝对有相互引用）。

使用 TS，前端也可以和 Java 一样，先写接口类，再写实现类，这样可以有效地避免循环依赖的产生，同时能够极大提升代码的可读性。

以上，「可读性」指的是，我们能够快速找到一个类的某个方法及其具体实现，然而这一定需要工具的帮忙。WebStorm 可以让你非常便利地在接口定义与实现之间来回切换。

比如我写的一个图片标注库，就使用了这种方式。借助于 WebStorm 提供的小按钮，我可以很方便地在接口与实现之间来回游走，极大地提升开发效率。

单测集成

你可以在单元测试文件左侧直接执行当前用例，也可以整体执行。

甚至连 Snapshot 也可以直接点过去看，将便利性做到了极致。

多点编辑

Sublime 掀起了编辑器的革命之一就是多点编辑，目前大多数的 IDE、编辑器，甚至 Web 端的编辑器都已经支持多点编辑，前述已经有一整篇的多点编辑快捷键介绍了。

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

智能命名

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

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

现在 compute-scroll-width.ts 的内容和 compute-scroll-height.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 即可。

后缀补全

代码自动补全都知道，但很少有人（包括我自己）知道「后缀补全」功能。

虽然你足够聪明，知道 ⌘← 可以快速将光标移到行首，从而避免连续敲 ← 的业余行为，但绝对比不上后缀补全方便：

你可以在 Settings → Editor → General → Postfix Completion 查看和自定义支持的后缀代码：

版本补全

你可能有需要手动更新 NPM 包版本，后者手动加新的依赖的时候，此时，WebStorm 这个版本自动提示的功能就会让你感觉很爽。

探查代码问题

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

无论是拼写错误、风格违规、冗余代码、无效代码还是潜在风险，都将无所遁形，可以用它作为项目健康度的一个判断依据。

依赖关系图

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

演示模式

投屏讲解代码的时候，这个功能很有用，建议自定义个一个快捷键，我的是 ⌃⌘P。

Code with Me

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

🙋🏻 FAQ

❓ 在用户主目录下生成一堆 `jcef_数字.log` 的空文件？

JCEF（Java Chromium Embedded Framework）是用于渲染 JetBrains 家族 IDE 中的 Jupyter 和 Markdown 预览的组件。

如图，不停地生，可烦了：

解决方法如下：

打开 IDE 菜单栏中的 Help -> Edit Custom VM Options
在打开的文件中添加一行 -Dide.browser.jcef.out-of-process.enabled=false
保存文件并重启 IDE

❓ 有没有 Command Pallette？

很遗憾，没有，也没有插件，但是，有类似的能力，叫「Find Action」。

我的做法是将它的快捷键设置为大家喜闻乐见的 ⇧⌘P，配置路径在 Keymap 下找 Main Menu → Help → Find Action。

效果：

但是，这个功能我碰到过几次造成软件假死，甚至无法唤起系统的强关功能，只能长按 Power 键重启系统。

❓ 一直 Loading indexes 停不下来，怎么解？

如图，进入界面就加载索引，停不了。这时，你没法重命名文件，整个 IDE 也卡得要命，几乎没法操作。

我出现这个问题的情况，一般是因为我在外部把 node_modules 杀了，然后重新安装。有的时候，WebStorm 响应很快，发现变了，暗戳戳搞了一下就好了。

但很偶尔的情况，就会出现上边的问题，就连重启大法都没用。这个问题出现的原因，（我猜）是因为它自身的缓存让它神经错乱了。缓存路径在 ~/Library/Caches/JetBrains 下，但你不需要去手动清理。

菜单 File → Invalidate Caches...，然后重启即可。

❓ Invalidate Caches 的其他作用？

缓存这个东西，一直以来是双刃剑。上述的「Invalidate Caches」功能便是为了在必要的时候，消除这双刃剑的不良影响，假如你出现以下情况，都可以试试此操作：

一直加载索引（前一种情况）
明明存在，但全局搜索搜不到
有引用的模块，错误地被标识为无引用
..（有遇到再补充）

❓ 为什么 Terminal 老是提示要我 `chsh` 成 `zsh`？

每打开一次 Terminal 就会提示如下：

执行完了却又说「chsh: no changes made」，重开还是一样。

在 Settings → Tools → Terminal → Application Settings 下设置「Shell path」为 /bin/zsh 即可（全局有效）：

❓ Terminal 的 Powerline 有乱码，或者没有对齐怎么办？

在 Settings → Editor → Color Scheme → Console Font 下设字体。

❓ 文件被标记为「Excluded from compilation」怎么办？

原因不明。

有些文件会被打上「Excluded from compilation」，图标左上角会有个小 X。对于这些文件，无法启用全局搜索。

解决的办法是找到 .idea/workspace.xml 下找到 TypeScriptGeneratedFilesManager，杀之，重启。只能好一段时间。

<component name="TypeScriptGeneratedFilesManager">
  <option name="version" value="3" />
  <option name="additionalRoots">
    <list>
      <option value="$PROJECT_DIR$/src/.lego" />
      <option value="$PROJECT_DIR$/src/apis" />
    </list>
  </option>
</component>

❓ 如何在 TS 项目自动 import 时禁用 alias？

如果你的 tsconfig 设置了 paths，或者 webpack 设置了 alias，WebStorm 在自动 import 的时候会默认用这些配置。

坏就坏在 WebStorm 的默认设置是「Always」，可以看到原本短的 import 反而变长了：

修改 TS 的 Auto Import 设置：

Settings → Editor → Code Style → TypeScript → Imports，将「Use path mappings from tsconfig.json」改为「Only in files outside specieid paths」：

类似再修改 JS 的 Auto Import 设置：

注意：改完要重启 WebStorm。

❓ 如何禁用 Markdown 表格的自动格式化？

真的受不了，原本简单的表格，非要绣花一样编排得跟真表一样的宽度。我很不喜欢浪费字符，更不爽的是连个空格都敲不进去，尤其当表格文字比较多的时候，这个功能简直令人抓狂：

还是那句话：「作为编码工具，可以给意见，但绝不允许擅自改。」

Settings → Editor → Smart Keys → Markdown，将「Reformat table when typing」去掉勾选：

同时，Settings → Editor → Inspections → Markdown，去掉「Incorrect table formatting」的勾选，否则整个表格会划满波浪线（带来的后果就是 SpellCheck 的波浪线看不到）：

❓ 类型 Initial type 显示有误？

难道发现了一个 WebStorm 不如 VSCode 的地方？

比如以下代码：

type Length<T extends any[]> = T['length']; // 提取数组长度的类型，提取的数字其实是类型
type Test = Length<[string, number, boolean, Date]>;

在 WebStorm 下，看到的是这样：

而 VSCode 看到的是：

WebStorm 给人的错觉可能会让写出类型报错的代码（嗯，它能够判定类型错误）：

在这个 Issue 中，找到一个方法，就是用 Ctrl Hover，而不是普通 Hover：

❓ Promise 不写 .then 有警告？

你可能会看到这样的警告「Promise returned from xx is ignored」：

这种提示其实是好意，但，如果这是一个 Promise<void> 且一定不会 reject，这种提示就比较烦人了。

可以这么调校，搜「promise」，可以在 Settings → Editor → Inspections 下找到对应的设置，修改「Result of method call returning」的「Severity」为「Consideration」，或者直接关掉这个设置也可以。

❓ CSS Custom Properties 误报和不报的问题？

目前 WebStorm 对 CSS Custom Properties 的代码辅助尚有问题，表现如下：

在 .css 文件中会被正确解读并做出警告，而 .less 或 .scss 中未定义的属性没有警告
在 CSS-in-JS 的场景，比如 styled-components，则会误报找不到定义

可以关注这个 4 岁+ 的 BUG - Cannot resolve CSS custom property when working with a non-project file。

🪭 写在最末

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

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

本文介绍的设置、插件、快捷键技巧等仅仅是冰山一角，更多强大的能力还需要入坑后的你细细把玩了解。

入坑 WebStorm，看这一篇就够了