1、创建项目

在 WSL 中用 npm 创建 vue 项目。

（不用 pnpm 是因为：用 WSL 的 pnpm 安装 node 包后，Windows 下的 PhpStorm 2023.2.1 识别不出，希望官方能早点解决。）

1
2
3

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm i

2、打开项目

用 PhpStorm/WebStorm 打开 WSL 项目。

3、配置 Node.js 和 npm

打开 Node.js 和 npm 配置，解释器选择 WSL 上的 Debian /usr/bin/node，包管理器选择 WSL 上的 npm。

4、运行开发环境

打开 PhpStorm 的终端窗口，终端自动进入 WSL 上的项目文件夹，输入 npm run dev 启动开发服务器，支持热加载。用浏览器打开 http://localhost:5173/ 浏览页面，编辑 src/components/HelloWorld.vue 文件，不需要刷新就能看到页面热更新。

一、减少索引耗时

PHPStorm 不索引被排除的目录。在项目文件/文件夹上右键可排除、取消排除目录，更方便的是在 Settings > Directories 可查看和管理以标记的目录。

两个索引大户是 vendor 和 node_modules 目录。

添加 php 库

把 vendor 目录排除，再到 Setting > PHP 把需要用到的包目录加入到 Include path。

有时候把 Setting > PHP > Include path 的很多 vendor 中的目录去掉后，重启 PHPStorm 又自己加进去了。
解决：Setting > PHP > composer 设置的 作为库添加软件包 前的勾去掉。

node_modules

PHPStorm 默认已经把 node_modules 排除掉，在 Settings > Languages & Frameworks > JavaScript > Libraries 中自动把 package.json 中依赖的库加入到名为 ${project-name}/node_modules 的库。

我们可以用 pnpm 代替 npm 管理包来减少 IDE 的卡顿。pnpm 极大优化性能，速度更快、占空间更少。pnpm 管理的 node_modules 使用树状结构而不是扁平结构，IDE 打开 node_modules 目录不卡。

Laravel 排除目录

Laravel 项目还可以把 public、storage 目录排除。

二、加大允许使用内存

可在 help > 更改内存设置 修改最大堆大小，也可在 help > Edit Custom VM Options 中设置如 -Xmx2048m。

三、可去掉一些平时用不到的插件

四、不建议的优化

禁掉一些很好用的功能达到提速的目的是来搞笑的。如有人建议禁掉 Language injection 插件，完全禁掉这个插件是不可取的，可以到 Settings > Editor > Language Injections 把一些用不到的插入语言去掉。

• 文件

  • option + command + y 同步文件/文件夹，文件夹中外部新增或删除文件时刷新有延迟，使用该快捷键同步
  • Ctrl + n 新建文件/文件夹

• 编辑

  • command + x 剪切行
  • command + c 复制行/复制选中文本
  • command + shift + c 复制文件/文件夹路径
  • command + d 复制行
  • option + ↑ 选择更多代码
  • option + ↓ 选择更少代码
  • option + → 下一个代码（令牌）位置
  • option + ← 上一个代码（令牌）位置
  • command + → 代码行尾
  • command + ← 代码行头
  • tab 增加缩进
  • shift + tab 减少缩进
  • command + shift + enter 完成代码声明

• 查找相关

  • command + f 查找当前文件
  • command + r 查找替换
  • command + shift + o 快速查询文件
  • command + shift + f 关键字查找,更强大的查询器
  • command + shift + r 高级替换
  • command + option + b 找到当前类（接口的）所有继承（实现类）
  • option + shift + c 查找最近修改的文件
  • option + f7 直接查询选中的字符
  • ctrl + f7 文件中查询选中字符
  • command + 鼠标点击 跳到类或方法或变量等声明处
  • command + shift + tab 切换tab页文件
  • command + shift + +,- 展开或缩起
  • command + . 折叠或展开选中的代码

• View

  • command + e 打开最近的文件
  • shift + command + e 最近打开文件具体代码位置

• Bookmarks

  • F3 加入/取消书签
  • option + F3 加入(可设置数字字母记号的)/取消书签
  • command + F3 弹窗显示/隐藏书签

• Code

  • shift + command + ↑ 声明段上移
  • shift + command + ↓ 声明段下移
  • shift + option + ↑ 行上移
  • shift + option + ↓ 行下移

• 自动代码

  • option + 回车 选中类名/接口名后按快捷键，导入包，自动修正
  • command + n 快速生成代码，为每个成员属性生成 getter/setter/__construct/方法、文档注释、单元测试等
  • ctrl + i 快速生成插入魔术方法
  • ctrl + o 复写父类方法
  • command + option + l 对当前文件进行格式化排版
  • command + d 复制当前行
  • command + / // 单行注释
  • command + shift + / 多行注释

• 显示窗口

  • command + 1 Project
  • command + 2 Favorites
  • command + 6 TODO
  • command + 7 Structure
  • command + 9 Version Control 版本控制
  • option + F12 Terminal 终端

• Git

  • ctrl + v 版本控制相关操作
  • option + command + a Add
  • option + command + z revert (取消Add)
  • shift + command + p pull
  • shift + command + k push
  • command + k commit

这篇文章解决：

• PhpStorm + xdebug 单步调试PHP的设置
• 远程服务器PHP源码调试
• 微信公众号接口/小程序接口服务的调试

有些应用需要部署到外网环境才能运行，我们使用 PhpStorm + Xdebug 在本地调试远程web服务器跑的代码。

安装xdebug扩展

1

pecl install xdebug

如果服务器部署的是php很新，安装xdebug不成功，可以试试 pecl install xdebug-beta

配置xdebug

在php.ini中添加如下配置