Cursor/VSCode Angular完整开发环境配置指南

Posted on Edited on Views:

本文详细介绍了我的 Cursor 编辑器配置，包括编辑器设置和扩展插件，帮助你快速搭建高效的开发环境。
ai洋洋洒洒写了一大堆，删了一半没用的，我只关注其实两个部分：编辑器设置和扩展插件。

📋 目录

🎯 编辑器设置配置

完整的 settings.json

以下是按功能分类的完整配置文件：

{
  // ========== Editor Settings ==========
  "editor.wordWrap": "on",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontLigatures": true,
  "editor.minimap.enabled": true,
  "editor.fontFamily": "'JetBrains Mono',Source Han Code JP, meirio,'Courier New', monospace,'Google Sans Code','Consolas ligaturized v3',Consolas, 'Courier New', monospace",
  "editor.fontSize": 13,
  "editor.semanticHighlighting.enabled": true,
  "editor.semanticTokenColorCustomizations": {
    "rules": {
      "*.declaration": {
        "fontStyle": "underline"
      },
      "error": {
        "underline": true
      },
      "warning": {
        "underline": true
      }
    }
  },
  "editor.language.colorizedBracketPairs": [],
  "editor.dropIntoEditor.preferences": [],
  "editor.indentSize": "tabSize",
  "editor.formatOnSave": true,

  // ========== Workbench Settings ==========
  "workbench.colorTheme": "GitHub Dark Dimmed",
  "workbench.iconTheme": "file-icons",
  "workbench.colorCustomizations": {
    "editorError.foreground": "#ff0000",
    "eslint.problemForeground": "#ff9900cc",
    "eslint.warningForeground": "#ffcc00cc",
    "eslint.infoForeground": "#00a2ffcc"
  },

  // ========== File Settings ==========
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // ========== Git Settings ==========
  "git.enableSmartCommit": true,
  "git.autoStash": true,
  "[git-commit]": {
    "editor.rulers": [50, 72],
    "editor.wordWrap": "off"
  },

  // ========== Terminal Settings ==========
  "terminal.integrated.useWslProfiles": false,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.profiles.windows": {
    "Git Bash": {
      "path": "C:\\Program Files\\Git\\bin\\bash.exe",
      "args": ["--login", "-i"]
    }
  },

  // ========== Code Formatting ==========
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "prettier.requireConfig": true,

  // ========== Code Actions on Save ==========
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit",
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit"
  },
  "notebook.codeActionsOnSave": {},

  // ========== Import Management ==========
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",

  // ========== ESLint Configuration ==========
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "typescript",
    "typescriptreact",
    "javascript",
    "javascriptreact",
    "html"
  ],

  // ========== ErrorLens Extension ==========
  "errorLens.statusBarMessageEnabled": true,
  "errorLens.gutterIconsEnabled": true,
  "errorLens.fontStyleItalic": true,
  "errorLens.errorBackground": "#ff000015",
  "errorLens.warningBackground": "#ffcc0015",
  "errorLens.infoBackground": "#00a2ff15",

  // ========== CSS & Tailwind ==========
  "css.validate": false,
  "headwind.runOnSave": true,

  // ========== Diff Editor ==========
  "diffEditor.ignoreTrimWhitespace": false,

  // ========== Outline Settings ==========
  "outline.showProperties": false,
  "outline.showVariables": false,
  "outline.showFunctions": false,

  // ========== Cursor AI Settings ==========
  "cursor.cpp.disabledLanguages": ["plaintext"]
}

配置要点说明

1. 编辑器核心设置

  • 字体: JetBrains Mono（支持连字）
  • 自动换行: 启用
  • 代码格式化: 保存时自动格式化
  • 语义高亮: 声明加下划线，错误和警告也有下划线标记

2. 代码质量保证

  • ESLint: 实时检查代码质量
  • Prettier: 统一代码风格
  • ErrorLens: 行内显示错误和警告
  • 保存时操作: 自动整理导入、修复所有问题

3. Git 工作流优化

  • Smart Commit: 智能提交
  • Auto Stash: 自动储藏
  • Commit 规则: 50/72 字符限制

4. 文件管理

  • 自动保存: 焦点改变时保存
  • 清理空白: 自动删除行尾空白
  • 文件结尾换行: 自动添加

🔌 已安装扩展列表

当前启用的扩展（30个）

Cursor 核心扩展

扩展名 版本 说明
Cursor Browser Automation 1.0.0 MCP 浏览器自动化服务器
Cursor Shadow Workspace 1.0.0 AI 代理代码优化的隐藏工作区
Cursor MCP 0.0.1 Model Context Protocol 支持
Cursor Retrieval 0.0.1 索引和检索处理

代码质量与格式化

扩展名 版本 说明
ESLint 3.0.16 JavaScript/TypeScript 代码检查
Prettier 11.0.0 代码格式化工具
Stylelint 1.5.3 CSS/SCSS 代码检查
Error Lens 3.26.0 行内显示错误和警告
Pretty TypeScript Errors 0.6.3 美化 TypeScript 错误信息

主题与图标

扩展名 版本 说明
Catppuccin for VSCode 3.18.1 🦌 柔和的粉彩主题
Catppuccin Icons 1.26.0 🦊 配套图标主题
One Dark Pro 3.19.0 Atom 经典暗色主题
Simple icons 1.16.0 简约图标主题

开发工具

扩展名 版本 说明
GitLens 17.6.2 Git 增强工具
Angular Language Service 20.3.0 Angular 模板编辑器服务
Tailwind CSS IntelliSense 0.14.28 Tailwind CSS 智能提示
Path Intellisense 2.10.0 文件路径自动完成
CSS Navigation 2.8.1 CSS 代码导航和补全

生产力工具

扩展名 版本 说明
TabOut 0.2.2 Tab 键跳出括号和引号
Color Highlight 2.8.0 高亮显示颜色代码
Indent Rainbow 8.3.1 彩虹缩进标记
Select Quotes 0.0.2 快速选择引号内内容
Export Your Extensions 2.0.0 导出/导入扩展配置
Path Autocomplete 1.25.0 路径自动补全

特殊用途

扩展名 版本 说明
Kuroshiro for VSCode 1.0.1 日语假名转换工具

已禁用的扩展（12个）

这些扩展已安装但未启用，可根据需要启用：

  • 主题类: Nord, Tokyo Night, GitHub Theme, Nord Deep
  • 功能类: HTML Snippets, PostCSS, Kotlin, Angular CLI
  • 工具类: Save All, Sequential Number, Angular Material Icon Picker
  • Cursor: File Service, NDJSON Ingest, Worktree TextMate, Cursor Themes

📝 总结

这套配置方案的核心理念：

  1. 自动化优先: 保存时自动格式化、修复、整理
  2. 视觉增强: 错误行内显示、颜色高亮、缩进彩虹
  3. 代码质量: ESLint + Prettier + Stylelint 三重保障
  4. Git 集成: GitLens 强化版本控制体验
  5. Cursor AI: 充分利用 AI 辅助编程能力

适用场景

  • ✅ TypeScript/JavaScript 全栈开发
  • ✅ React/Angular 前端开发
  • ✅ Tailwind CSS 样式开发
  • ✅ Git 团队协作
  • ✅ AI 辅助编程

📚 相关资源