在 Ubuntu 上让 PhpStorm 具备 WebStorm 的前端能力
核心说明
- PhpStorm 已内置 WebStorm 的全部功能，并在此基础上增加了对 PHP 与 数据库/SQL 的增强支持。也就是说，在 Ubuntu 上直接使用 PhpStorm 即可完成前端开发（JavaScript/TypeScript、HTML、CSS、主流前端框架等）。
快速启用前端开发常用功能
- 确保已安装并启用以下内置功能（通常默认开启）：
- Node.js 运行环境：在 Settings/Preferences > Languages & Frameworks > Node.js 中配置 Node interpreter 与 npm 包管理器。
- 前端框架支持：在 Settings/Preferences > Languages & Frameworks > JavaScript > Frameworks 启用 Node.js、npm/yarn/pnpm、以及 Vue.js/React/Angular 等框架支持。
- 构建工具与调试：在 Settings/Preferences > Build, Execution, Deployment > Build Tools 配置 npm/Webpack/Vite；在 Run/Debug Configurations 中新增 npm 或 JavaScript Debug 配置，使用内置 Chrome DevTools 进行调试。
- 前端文件类型与语法高亮：确认 .js/.ts/.vue/.html/.css/.scss/.less 等文件类型已正确关联，并启用 Emmet、Prettier、ESLint 等常用工具。
- 版本控制与终端：在 Settings/Preferences > Version Control 配置 Git；使用内置 Terminal 执行前端命令（npm/yarn/pnpm）。
按需安装前端相关插件
- 打开 Settings/Preferences > Plugins，在 Marketplace 搜索并安装所需插件（示例）：
- Vue.js（Vue 3 支持、模板语法、单文件组件）
- NodeJS（若未内置）
- Prettier、ESLint
- Tailwind CSS、PostCSS
- Angular、React 等框架插件
- 安装后重启 IDE，并在项目设置中启用对应框架/工具的集成与代码风格规则。
常见问题与实用建议
- 中文输入法在 JetBrains IDE 中不可用：在启动脚本（如 phpstorm.sh）顶部加入环境变量（适用于 fcitx）
- export XMODIFIERS=@im=fcitx
- export GTK_IM_MODULE=fcitx
- export QT_IM_MODULE=fcitx
保存后重启 IDE 测试输入法。
- 创建 Ubuntu 桌面快捷方式：在 Tools > Create Desktop Entry 生成菜单项；或手动创建 .desktop 文件（Exec 指向 phpstorm.sh，Icon 指向对应图标），便于启动与固定到 Dock。