前语

跟着本文章节，一步一步操作（设置、插件、快捷键、技巧），必定能把 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 高手，切磋沟通

修正前史

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

默许	修正后

文件树设置

减少干扰，进步功率。

那些外来物种

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

• 体系文件
  • Mac 的 .DS_Store
  • Windows 的 Thumbs.db
• IDE 装备
  • JB 的 .idea 目录
  • Eclipse 的 .settings 目录
  • VSCode 的 .vscode 目录
• 下载的依靠，如 node_modules
• 构建产品（视构建脚本而定）

部分 VSCode 党以为有必要把 .vscode 上传到 VCS（版别操控，如 Git、SVN 等），我很反对这种做法，且不说极有或许形成不必要的抵触，换个视点去考虑，JB 党、Eclipse 党是不是也能够（期望）这么做？

别的，有必要把这些目录从常规的全文查找中剔除，以扫除干扰，进步查找功用。

我的做法：

1. 添加到 VCS 的疏忽列表（引荐做减法，比方把 .* 悉数疏忽，而添加部分的破例，如 !.*ignore）
2. 消除它们对全文查找的影响（二选一）
   • 躲藏文件与目录，从文件树抹除，眼不见为净，适用于体系或 IDE 生成的文件或目录
   • 加到扫除列表，适用于依靠和构建产品

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

JB 在项目下会主动生成一个 .idea 目录，用来保存项目专属的装备项。WebStorm 默许不展现它，但 IntellijIDEA 仍是会展现。

• 关键词：「ignored」
• 设置途径：Editor → Filter 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，不然会不小心翻开一堆文件。

修正器设置

以自己喜爱的办法看代码和写代码。

修正器字体

因 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」两项默许是勾选的）

必要的色彩设置

加上色彩后，许多东西一目了然，进步代码阅览功率，让代码问题主动找你，而不是你找它。

高亮有变更的目录

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

• 关键词：「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 乃至能够告诉你当时模块在项目下有没有被运用。

装备类型色彩

写 TS，为 Class、Enum、Interface、Type alias 等设定不同的色彩，有助于更快更好地了解代码逻辑（主张修正最根底的地方）。

类别	装备途径	款式	默许作用	修正作用
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 粗体

⛱️ 代码格局规范设置

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

我历来不对自己的代码做格局化，也不会装备修正器在保存的时分主动格局化，但必要的代码格局设置能够协助修正器主动生成契合项目设定的代码。所以这一步仍是很重要的。

• 关键词：「style」
• 设置途径：Editor → Code Style
• 设置：主张运用 Default Scheme；然后针对常用的文件类型依据自己或团队偏好进行设置

依据个人及团队喜爱和 Eslint、Stylelint、Markdownlint 规则，我的首要调整如下：

插件引荐

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

所谓 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…
• 引荐指数：★★★
• 引荐理由：的确美观许多，但收费，不交钱许多不能设置（根本够用）

Tabnine

• URL：plugins.jetbrains.com/plugin/1279…
• 引荐指数：★★★★☆
• 引荐理由：AI 这么火，怎么能不装呢

.ignore

• URL：plugins.jetbrains.com/plugin/7495…
• 引荐指数：★★★★☆
• 引荐理由：支撑几乎全部的 .xxignore 文件，具有语法高亮、提示等功用

从前的必备，但最新的 JB 默许现已支撑了根本的 ignore 文件格局，但我仍是装了。

原生作用	插件作用

Rainbow Bracket

• URL：plugins.jetbrains.com/plugin/1008…
• 引荐指数：★★★☆
• 引荐理由：看起来的确会舒服一些

原生作用	插件作用

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- 前缀，能够如下操作：

1. 圈选需求改名的文件
2. 右键呼出「Replace Text in File Names」
3. 勾选 Regex，From Text 为 表明词首（需求正则根底），To Text 为 use-
4. 确认，就都改好了，高效

WakaTime

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

Presentation Assistant

• URL：plugins.jetbrains.com/plugin/7345…
• 引荐指数：★★☆
• 引荐理由：录制演示视频（或直播）的时分能够用它，往常估计用不到

⌨️ 快捷键

预设和自界说

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）预设为根底，依据多年来沿袭的习气，记录了常用的快捷键，带 符号表明依据习气自界说过的。

高频快捷键 – 快速修正

高频快捷键 – 移动光标

高频快捷键 – 挑选文本

⇧ 的「圈选」Buff。

高频快捷键 – 快速导航

高频快捷键 – 查找替换

高频快捷键 – 多点修正

Sublime 立异了多点修正以来，几乎全部的 IDE、修正器，乃至 Web 端的 Ace、CodeMirror 等都在一夜之间都完成了该功用。

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

高频快捷键 – 通用

高频快捷键 – 特有功用

亮眼功用

多点修正

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 即可。

探查代码问题

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

不管是拼写错误、风格违规、未运用变量仍是潜在风险，它都能够帮咱们检测出来，能够用它作为项目健康度的一个判别依据。

依靠联系图

快捷键 ⌥⌘U 能够展现依靠联系图（拼上 SHIFT 能够单页翻开）。

演示形式

投屏解说代码的时分，这个功用很有用，主张自界说个一个快捷键，我的是 ⌃⌘P。

Code with Me

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

写在最末

WebStorm 作为前端开发 IDE，具有高雅的 UI、丰富的功用、灵敏的装备、智能的修正、关心代码质量和安全，不愧为「The smartest JavaScript IDE」。

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

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