一分钟搞定VSCode搭建ArkTS开发环境

原创于 2025-11-18 09:02:45 发布 · 282 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙

环境搭建

安装最新版本的 VSCode，确保系统满足以下要求：

操作系统：Windows 10/11 或 macOS 10.14 及以上
Node.js 版本 14.x 或更高（推荐 16.x LTS）
OpenHarmony SDK 或 HarmonyOS SDK（根据开发需求选择）

下载并安装 DevEco Studio 作为辅助工具（可选），用于管理 ArkTS 项目的依赖和模拟器。

在 VSCode 中安装以下扩展：

ArkTS 语言支持插件（官方或社区版本）
OpenHarmony/HarmonyOS 开发工具包
代码调试工具（如 Debugger for HarmonyOS）

配置环境变量：

将 Node.js 和 OpenHarmony SDK 的路径添加到系统 PATH
确保 ohpm（OpenHarmony 包管理器）可通过命令行调用

初始化项目

通过命令行创建项目模板：

ohpm init @ohos/arkts-app my_arkts_project
cd my_arkts_project

在 VSCode 中打开项目文件夹，检查项目结构：

entry/src/main/ets 为主代码目录
entry/src/main/resources 为资源文件
oh-package.json5 为依赖管理文件

安装必要依赖：

ohpm install

示例代码

实现一个简单的计数器应用，编辑 entry/src/main/ets/pages/index.ets：

@Entry
@Component
struct Index {
  @State count: number = 0

  build() {
    Column() {
      Text('Count: ' + this.count)
        .fontSize(30)
        .margin(20)

      Button('Increase')
        .onClick(() => {
          this.count++
        })
        .width(150)
        .height(50)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

调试运行

配置调试环境：

在 VSCode 中创建 .vscode/launch.json
添加 OpenHarmony 调试配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "ohos",
      "request": "launch",
      "name": "ArkTS Debug",
      "preLaunchTask": "ohos-build"
    }
  ]
}

启动模拟器或连接真机：

ohpm run emulator

运行项目：

ohpm run build
ohpm run install

功能扩展示例

添加列表渲染功能，修改 index.ets：

@Entry
@Component
struct Index {
  @State count: number = 0
  @State items: string[] = ['Item 1', 'Item 2']

  build() {
    Column() {
      Text('Count: ' + this.count)
        .fontSize(30)

      Button('Add Item')
        .onClick(() => {
          this.items.push('Item ' + (this.items.length + 1))
        })

      List() {
        ForEach(this.items, (item: string) => {
          ListItem() {
            Text(item)
              .fontSize(20)
          }
        })
      }
      .layoutWeight(1)
    }
    .padding(20)
  }
}