WebStorm 教程

ChiLi
1,170 阅读3分钟

美化界面

  1. 将用不到的界面隐藏起来，操作方法：View => Appearance => 勾选如下

  2. 安装 Material Theme UI 主题，操作方法：File => Settings => Plugins => Marketplace => 搜索 Material Theme UI 并安装，安装完成后进入 File => Settings => Appearance & Behavior => Material Theme 勾选如下

  1. 配置 UI Options 勾选如下

美化代码

  1. 代码配色，操作方法：打开设置 => Editor => Color Scheme，选择一个你喜欢的配色，点击 OK，就可以预览这个配色了。我个人喜欢 Molokai 配色。

  2. 字体设置，可设置为 JetBrains Mono、Source Code Pro 或者 Fira Code 打开设置 => Editor => Font 勾选如下

  3. 统一字体

  • 进入 Editor => Color Scheme => Color Scheme Font，取消勾选 Use color scheme font instead of ...
  • 进入 Editor => Color Scheme => Console Font，取消勾选 Use color scheme font instead of ...

配合 Cmder 或者 Git Bash

如果你是 Mac 用户或者 Linux 可以，则不需要看此章节。

配置终端

  1. 打开设置，进入 Tools => Terminal
  2. 将 Shell Path 改为你的 bash.exe 的绝对路径，

Cmder："cmd.exe" /k "D:\自己找路径\cmder\vendor\init.bat"

Git Bash：D:\自己找路径\cmder\vendor\git-for-windows\bin\bash.exe

  1. 建议 cmder 用户将提示符从 λ 改为 $
  • （Git bash 用户请跳过此步骤），用 VSCode 打开文件 D:\自己找路径\cmder\vendor\git-for-windows\etc\profile.d\git-prompt.sh，改其中第 36 行，将 λ 改为 $

配置 git

  1. 打开设置，进入 Version Control => Git
  2. 将 Path to Git 改为 git.exe 的绝对路径 Cmder： D:\自己找路径\cmder\vendor\git-for-windows\bin\git.exe

Git Bash： D:\自己找路径\cmder\vendor\git-for-windows\bin\bash.exe

快捷键配置

查看快捷键

  1. 按两下 Shift
  • 按两下 Shift，你会得到一个搜索框，这个搜索框可以搜索任何东西
  • 在搜索框里输入你想要的功能名称，比如 reformat （代码格式化），然后你就看到对应的操作（Action）
  • Action 后面跟着对应的快捷键

不过这个方式的缺点是只能搜英文，所以可以看第二个方式 2. 查看菜单栏

  • 查看菜单栏，快捷键就写在菜单栏每一项 Action 的后面

修改快捷键

在 Settings 里的 keymap 里的搜索栏搜索即可，见下图

常见设置

  1. 终端窗口，设置为 Alt + 2，这样你任何时候都可以打开终端输入命令行
  2. Git 窗口，设置为 Alt + 3（当然你可以改），前提是你的项目已经在终端里运行过 git init，这个窗口操作 git 非常方便

也可以 使用 ctrl+K 来操作 git （我比较喜欢这种方式 ~ ）

  1. 关闭当前窗口，设置为 Ctrl + W，这是一个常用快捷键，设置完之后提示冲突，此时请点击 Remove

  2. 在 Keymap 里将 Main Menu => Edit => Extend Selection 设为 Alt + W，将 Main Menu => Edit => Shrink Selection 设为 Alt + Shift + W，这两个快捷键自己试试，非常有用。

  3. 加强 Emmet

格式化代码

  • 使用 Show Reformat File Dialog 功能（快捷键 Ctrl+Alt+Shift+L），会弹出一个对话框

我们一般选择 Whole file 来格式化整个文件，但如果当前文件是别人的代码，你可能就要选择 Only VCS changed text，以防修改别的人代码，只格式化刚写的代码。

快捷键

  • 使用 Reformat Code 功能（快捷键你要自己用 Shift Shift 搜索一下），就会立即格式化当前文件。
  • 若对格式化后的文件不满意，则：
  1. 在设置里选中 Editor => Code Style => TypeScript进行自定义（JavaScript同理），如下设置

  1. 可选：个人建议把 JS、CSS、SCSS、TypeScript、HTML 代码缩进全改成 2、2、2，这样代码更紧凑。建议 JS 不加分号，TS 加分号。

其它选项

直接在 Shift Shift 后输入对应的英文即可找到对应项

可开启

  • Show tree indent guides，这个功能会在编辑器里添加竖线，方便代码对齐。
  • Show method separators，这个功能会在每个方法上面添加横线，便于阅读代码。
  • Breadcrumbs，搜索这个选项，然后选择 Dont't Show，用于隐藏面包屑。
  • Show CSS color preview as background

可关闭

  • Show gutter icons，关闭此功能可能让编辑器更简洁
avatar
文章
阅读
粉丝