目标

• 了解trae编辑器
• 学会trae编辑器的基本使用

什么是Trae编辑器？

Trae是一款现代化的轻量级代码编辑器，专为前端开发者和全栈开发者设计。它结合了现代编辑器的强大功能和轻量级工具的快速响应，为开发者提供高效、舒适的编码体验。

• Trae编辑器采用Electron框架构建，支持跨平台使用
• 内置对JavaScript、TypeScript、React、Vue等前端技术的原生支持
• 具有高度可定制性，可以通过插件系统扩展功能
• 界面简洁美观，注重开发者的视觉舒适度

为什么选择Trae编辑器？

• 轻量快速：启动速度快，内存占用低
• 智能提示：基于AI的代码补全和智能提示
• 高度集成：内置终端、Git集成、调试工具
• 主题丰富：多种颜色主题和图标主题可选
• 免费开源：完全免费，社区驱动持续改进

安装与配置

1. 下载

• 官网：https://www.trae.cn/

2. 安装

• 将程序到自己需要的磁盘目录

3. 基础配置

• 选择自己喜欢的主题

• 其他配置我们选择跳过，不导入vscode等的设置，重新适应新的国产编辑器，然后登录自己的账号，进入编辑软件，打开项目、安装必要的插件、如图所示，插件已经生效，感觉相当流畅。

配置文件位置：

• 电脑路径可能会有差异，自己在用户里面找一下，我的如下图，settings.json里面一开始是{}。自己可以根据及自己情况设置。

基础配置示例：

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Cascadia Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "editor.minimap.enabled": true,
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons"
}

核心功能详解

1. 智能代码编辑

语法高亮和语义着色： 这里是一个vue3项目，并且主题为深色默认。

智能代码补全： 速度挺快的，试了一下，挺好的。

2. 集成终端

终端配置： 可以根据自己的的喜好进行配置。

{
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "terminal.integrated.shell.linux": "/bin/bash",
  "terminal.integrated.shell.osx": "/bin/zsh",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.cursorBlinking": true
}

3. Git版本控制集成

Git功能可视化：

• 侧边栏Git面板显示文件状态
• 行内差异显示
• 分支管理界面
• 提交历史查看

Git配置示例：

{
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "git.autofetch": true,
  "git.openRepositoryInParentFolders": "always"
}

插件生态系统

1. 必备插件推荐

前端开发插件：

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",          // Tailwind CSS智能提示
    "ms-vscode.vscode-typescript-next",   // TypeScript最新功能
    "esbenp.prettier-vscode",            // 代码格式化
    "formulahendry.auto-rename-tag",     // 自动重命名标签
    "christian-kohler.path-intellisense", // 路径智能提示
    "pkief.material-icon-theme"          // 文件图标主题
  ]
}

** productivity插件：**

{
  "recommendations": [
    "ms-vscode.live-server",             // 实时服务器
    "ritwickdey.liveserver",             // Live Server
    "ms-vscode.vscode-json",             // JSON工具
    "ms-vscode.remote-repositories",     // 远程仓库
    "github.copilot"                     // GitHub Copilot
  ]
}

2. 自定义插件开发

简单的Trae插件示例：

// package.json
{
  "name": "trae-sample-extension",
  "version": "1.0.0",
  "engines": {
    "trae": "^1.60.0"
  },
  "activationEvents": [
    "onCommand:sample.helloWorld"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "sample.helloWorld",
        "title": "Hello World"
      }
    ],
    "keybindings": [
      {
        "command": "sample.helloWorld",
        "key": "ctrl+shift+h",
        "mac": "cmd+shift+h"
      }
    ]
  }
}

插件主逻辑：

// src/extension.ts
import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  console.log('扩展已被激活');
  
  let disposable = vscode.commands.registerCommand('sample.helloWorld', () => {
    vscode.window.showInformationMessage('Hello World from Sample Extension!');
  });
  
  context.subscriptions.push(disposable);
}

export function deactivate() {}

工作区与项目管理

1. 多项目工作区

工作区配置文件：

// project.code-workspace
{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend", 
      "path": "./backend"
    },
    {
      "name": "Documentation",
      "path": "./docs"
    }
  ],
  "settings": {
    "typescript.preferences.includePackageJsonAutoImports": "auto",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "extensions": {
    "recommendations": [
      "vue.volar",
      "bradlc.vscode-tailwindcss"
    ]
  }
}

2. 任务配置

自定义任务示例：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "启动开发服务器",
      "type": "shell",
      "command": "npm run dev",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": []
    },
    {
      "label": "运行测试",
      "type": "shell", 
      "command": "npm test",
      "group": "test",
      "presentation": {
        "echo": true,
        "reveal": "always"
      }
    }
  ]
}

## 快捷键指南

### 常用快捷键

**编辑操作：**
- `Ctrl+D` - 选择下一个相同内容
- `Ctrl+Shift+L` - 选择所有相同内容
- `Alt+↑/↓` - 上下移动行
- `Ctrl+Shift+K` - 删除行
- `Ctrl+/` - 切换行注释
- `Ctrl+Shift+/` - 切换块注释

**导航操作：**
- `Ctrl+P` - 快速打开文件
- `Ctrl+Shift+O` - 符号导航
- `Ctrl+G` - 跳转到行
- `F12` - 转到定义
- `Alt+F12` - 查看定义

**窗口管理：**
- `Ctrl+B` - 切换侧边栏
- `Ctrl+J` - 切换终端
- `Ctrl+`` ` - 新建终端
- `Ctrl+Shift+E` - 显示资源管理器

### 自定义快捷键

```json
{
  "keybindings": [
    {
      "key": "ctrl+shift+t",
      "command": "workbench.action.terminal.new",
      "when": "terminalFocus"
    },
    {
      "key": "ctrl+1", 
      "command": "workbench.action.openEditorAtIndex1"
    },
    {
      "key": "ctrl+`",
      "command": "workbench.action.terminal.focus"
    }
  ]
}

主题与个性化

1. 颜色主题配置

自定义主题设置：

{
  "workbench.colorTheme": "One Dark Pro",
  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "editor.background": "#1a1b26",
      "sideBar.background": "#16161e",
      "statusBar.background": "#1f2335"
    }
  },
  "editor.tokenColorCustomizations": {
    "[One Dark Pro]": {
      "comments": "#565f89",
      "strings": "#9ece6a", 
      "keywords": "#bb9af7",
      "variables": "#c0caf5",
      "functions": "#7aa2f7"
    }
  }
}

2. 界面布局优化

{
  "workbench.startupEditor": "newUntitledFile",
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.editor.tabSizing": "shrink",
  "breadcrumbs.enabled": true,
  "editor.renderLineHighlight": "all",
  "editor.cursorBlinking": "smooth"
}

性能优化技巧

1. 编辑器性能配置

{
  "editor.renderControlCharacters": false,
  "editor.hideCursorInOverviewRuler": true,
  "editor.occurrencesHighlight": false,
  "editor.selectionHighlight": false,
  "editor.largeFileOptimizations": true,
  "files.maxMemoryForLargeFilesMB": 4096,
  "gitlens.advanced.caching.enabled": true
}

2. 排除不需要的文件

{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true,
    "**/build/**": true,
    "**/.git/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true,
    "**/build": true,
    "**/*.code-search": true
  }
}

团队协作配置

1. 共享配置

团队推荐配置：

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.preferences.includePackageJsonAutoImports": "auto",
  "files.eol": "\n",
  "files.encoding": "utf8"
}

推荐扩展列表：

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "vue.volar",
    "ms-vscode.vscode-typescript-next"
  ]
}

总结

Trae编辑器作为一款现代化的代码编辑工具，以其轻量快速、功能强大、高度可定制的特点，成为了众多开发者的首选。通过合理的配置和插件扩展，Trae能够显著提升开发效率，为各种类型的项目提供优秀的开发体验。掌握Trae编辑器的使用技巧，将帮助你在日常开发工作中更加得心应手。