DOCSEARCHbyAlgolia
Submit Docs

Naily's ArkTS Support

repository·next·Indexed 21 days ago

https://github.com/ohosvscode/arkts

A VSCode extension and set of libraries providing development support for the ArkTS language, a superset of TypeScript used in Huawei HarmonyOS and OpenHarmony. The ecosystem includes a Volar-based language plugin, language server, language service, and @arkts/vfs for virtual file system environments. It offers features such as syntax highlighting, code completion, diagnostics, SDK and emulator management, and specialized file icons for .ets, .hml, and .json5 files.

Tokens
34.2K
Snippets
95
Records
137
Agent score
74%

What's inside ohosvscode-arkts

  7. Key features of ArkTS Support

    next

    The extension provides a comprehensive development experience for ArkTS (1.x) including:

    • Language Intelligence: Syntax highlighting, completion, jump to definition, and diagnostics for ArkTS.
    • Formatting: Fast formatting using the oxk toolchain (Rust-based).
    • SDK & Device Management: Installation/management of OpenHarmony SDKs and emulator image management (creating/deleting devices and images).
    • Project Integration: Support for tasks.json and launch.json to run hvigor tasks and debug on emulators or real devices via hdc.
    • Resource Support: Enhanced $r function completion, module.json5 completion, and a Hvigor resource explorer panel.
    • JSON Schema: Comprehensive support for configuration files like build-profile.json5, oh-package.json5, module.json5, and more.

  8. How ArkTS VFS works

    next

    ArkTS VFS is a Map-based virtual file system designed for ArkTS environments. It allows you to run ArkTS in contexts where a physical disk is unavailable (like a browser) or where you want to simulate a virtual environment where files in memory are the source of truth rather than files on disk.

    Key differences from TypeScript VFS:

    • File Type Detection: Files ending in .ets are automatically treated as ArkTS files with ScriptKind set to 8 (ets.ScriptKind.ETS).
    • Compiler Options: The createVirtualTypeScriptEnvironment function accepts compilerOptions, which are passed directly to the underlying ets.createSourceFile call.

  9. Initialize ArkTS VFS in a Web environment using node_modules

    next

    If your web application has access to a node_modules folder (e.g., in a local development environment or a specific server-side setup), you can use createDefaultMapFromNodeModules to automatically generate a map of the required ArkTS library definition files (*.d.ts). This avoids manually maintaining a list of library files that change with different target options.

    import { createDefaultMapFromNodeModules } from '@arkts/vfs'
import ts from 'ohos-typescript'

// Generates a map containing the necessary lib files based on the target
const fsMap = createDefaultMapFromNodeModules({ target: ts.ScriptTarget.ES2015 })

// You can then add your own virtual files to the map
fsMap.set('index.ts', "const hello = 'hi'")

  11. Initialize ArkTS VFS in a Web environment using a CDN

    next

    If you do not have access to node_modules, use createDefaultMapFromCDN to fetch the library definition files from a CDN (like unpkg).

    Key Features:

    • Caching: If shouldCache is set to true, the library files are stored in localStorage. The cache automatically purges items from different ArkTS versions to save space.
    • Compression: You can pass an lz-string instance to compress/decompress the files in the cache, significantly reducing the storage footprint.

    Note: This process involves downloading approximately 1.5MB of data.

    import { createDefaultMapFromCDN } from '@arkts/vfs'
import lzstring from 'lz-string'
import ts from 'ohos-typescript'

async function start() {
  const shouldCache = true
  const arktsVersion = '3.7.3'
  
  // Standard usage with localStorage caching
  const fsMap = await createDefaultMapFromCDN({ target: ts.ScriptTarget.ES2015 }, arktsVersion, shouldCache, ts)

  // Usage with lz-string for compressed storage
  const otherMap = await createDefaultMapFromCDN({ target: ts.ScriptTarget.ES2015 }, arktsVersion, shouldCache, ts, lzstring)

  fsMap.set('index.ts', "const hello = 'hi'")
}

start()

  12. Enable ArkTS Icons file theme

    next

    The extension includes a built-in file icon theme called ArkTS Icons that provides specialized icons for .ets, .hml, and .json5 files, as well as support for common Web development files (JS, TS, React, CSS, etc.).

    To enable it:

    1. Open the Command Palette (Cmd+Shift+P or Ctrl+Shift+P).
    2. Type Preferences: File Icon Theme and press Enter.
    3. Select ArkTS Icons from the list.

    Alternatively, set it in your settings.json:

    {
  "workbench.iconTheme": "arkts-icons"
}