跳到主要内容

WebStorm

插件​

  • Chinese (Simplified) Language Pack / 中文语言包
  • Atom Material Icons 图标

WebStorm 和 VScode对比​

  • vscode有时候经常奔溃，卡顿
  • vue项目的时候vscode有时候对类型提示不出来 【怀疑是插件问题】
  • webstrom启动会有点慢
  • webstrom很少出现卡顿奔溃
  • webstrom不需要装太多插件，内置了很多功能
  • webstrom对git管理、代码类型提示很友好
  • webstrom可以快速引入组件/包
    • 只需要输入 import 组件名再敲击回车键，就会自动帮你补全地址
    • 输入某个方法/组件名，也会自动帮你导入包

结合自身需求，WebStorm和VScode都可以按需使用，自由切换使用就好

  • 如果vscode使用过程突然有问题，可以直接切换webStorm

快捷键​

  • 缩放： shift+alt+加减号
  • Alt+Shift+c: 切换大小写 【自己定义的~】
  • Alt+Shift+Enter : 自动导入所有包
  • Ctrl+. : 导入当前包
  • Ctrl+o : 打开文件
  • Alt+Shift+F: 格式化
  • Alt+F1: 定位到当前左侧目录下
  • Ctrl+ \ : 拆分窗口

webstorm 使用 vscode 快捷键​

在WebStorm中使用VS Code的快捷键，您可以使用以下步骤：

  1. 打开WebStorm的设置（Windows：File>Settings，Mac：Preferences>Settings）
  2. 在搜索栏中搜索「Keymap」。
  3. 在左侧列表中选择「Keymap」。
  4. 在右侧的「Keymap」选项卡中，选择「VSCode」。
  5. 点击「Apply」和「OK」按钮。

配置格式化​

1、大括号问题: 统一配置空格间隔

  • settings -> editor -> Code Style -> TypeScript，找到左则的 ES6 import/export brances并打勾。
js
import { ref } from "vue";

2、html格式化问题，缩进问题

webstorm默认情况下，对HTML代码格式化，head、body下的子标签是不缩进的

依次点击 [File ——> settings ——> Editor ——> Code Style ——> HTML， 找到 [ Do not indent children of: ]， 将右侧内容修改如下：html ,thead,tbody,tfoot

3、settings -> code style 取消勾选EditorConfig支持

4、settings -> code style -> html 制表符和缩进 设置 2

5、settings -> code style -> html 其他配置项 勾选 在空的标签

配置性能优化​

  • 配置分配内存大小：帮助->更改内存设置