从 Idea 到 Cursor，最终我选择了 VS Code + OpenCode。

要开发前端，选择合适的编码环境（不是开发环境）是一件挺纠结的事。本文大概记录 VS Code + OpenCode 的部署过程，方便下次部署查看。

版本选择

Arch Linux 用开源的 code-oss 还是官方 vscode-bin？

版本	特点
code-oss	完全开源，不含微软 proprietary 功能
vscode-bin	官方打包，含微软 proprietary 功能

我的选择：官方版。懒得折腾，code-oss 有些插件装不上。

必备插件

插件在精不在多，装太多拖慢编辑器。

代码规范与格式化

• Prettier — 代码格式化，按保存自动排版
• ESLint — 代码质量检查，语法错误画红线
• EditorConfig — 统一编辑器行为，解决换行符 CRLF/LF 问题

开发效率

• Error Lens — 错误信息直接显示在代码行尾
• Auto Rename Tag — 修改 HTML/JSX/Vue 标签自动同步闭合标签
• Path Intellisense — 路径提示，输入 ./ 自动列出文件

框架专属

• Vue – Official — Vue 官方插件，语法高亮、TypeScript 支持，Vue 3 必装
• ES7+ React snippets — React 代码片段，rafce 生成函数组件模板

体验提升

• Material Icon Theme — 文件图标，一眼区分组件、样式、配置

Dev Containers 开发容器

在 Docker 容器内运行完整开发环境，隔离、一致、随处可用。

安装 Docker

sudo pacman -S docker
sudo systemctl enable --now docker

安装插件

Dev Containers — 微软官方，支持容器内开发、调试。

使用方式

项目根目录创建 .devcontainer/devcontainer.json，VS Code 打开项目自动检测并提示在容器中打开。

前端示例配置

{
  "name": "Frontend Dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
  "customizations": {
    "vscode": {
      "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
    }
  },
  "postCreateCommand": "npm install"
}

Node 18 官方镜像，自动装 Prettier 和 ESLint，打开后执行 npm install。

Skills 部署（待续）

常用操作封装成可复用脚本，目前探索中，后续更新。

---

这套组合在 Arch Linux 上启动快、占用合理，前端效率提升明显。