Translate File

hias tf translates a single file. It extracts source language text, generates keys, writes locale files, and replaces source text with internationalization calls.

By default, it works with Chinese source code projects. Configure locales: ["en-US", "zh-CN", "ja-JP"] to extract English text and translate to zh-CN and ja-JP.

Basic Command

hias tf views\demo\index.vue

Supported file types:

Type	Description
.vue	Vue SFC, including <template>, <script>, <script setup>
.js / .ts	JavaScript and TypeScript business code
.jsx / .tsx	React JSX / TSX
.json	JSON text values

Basic Options

hias tf src\views\demo\index.vue demo --dry-run
hias tf src\views\demo\index.vue demo --interactive
hias tf src\views\demo\index.vue demo --report .hias\reports\demo.json
hias tf src\views\demo\index.vue demo --show-extractions

Option	Description
--dry-run	Preview diff only, don't write files
--interactive	Preview then ask whether to apply
--report <file>	Write JSON translation report
--show-extractions	Show extracted source language text only
--verbose	Output detailed logs

Extraction Scope

Extracts user-visible or runtime-displayed text:

message.success('Save successfully')
toast('Copied')

const item = {
  label: 'User Name',
  title: 'User Detail',
  placeholder: 'Enter username',
  description: 'Please select a user'
}

Supports fallback text in logical expressions:

const text = data?.text || 'Default text'
const desc = data?.description ?? 'No description'

Also supported in Vue templates:

{{ data?.text || 'Default text' }}
{{ data?.description ?? 'No description' }}

Destructuring defaults and function parameter defaults are not extracted by default, to avoid mistaking type/data structure fallbacks for UI text:

const { propertyName = 'User name' } = objectToDestruct
function submit(label = 'Save') {}

Vue Template

Text nodes are replaced with $t:

<button>登录</button>

<button>{{ $t('demo.login') }}</button>

Chinese next to interpolation preserves expression boundaries:

<h1>留言（{{ remarkList ? remarkList.length : 0 }}）</h1>

<h1>{{ $t('demo.leave_a_message') }}（{{ remarkList ? remarkList.length : 0 }}）</h1>

Attributes

User-visible attributes are translated:

<input placeholder="请输入用户名" />

<input :placeholder="$t('demo.please_enter_username')" />

Resource path attributes are not translated, to avoid breaking file references:

<img src="@/assets/images/ssHome/供应商总数量1.png" alt="供应商总数量" />

<img src="@/assets/images/ssHome/供应商总数量1.png" :alt="$t('demo.total_number_of_suppliers')" />

Currently skipped resource attributes include src, srcset, href, poster.

Style-related content is skipped, including class, dynamic classes, inline style, and <style> blocks:

<div class="user-card" :style="{ color: 'red' }">用户详情</div>

<style lang="scss" scoped>
.user-card {}
</style>

JavaScript Strings

Source language strings in scripts are replaced with translation function calls:

const title = '登录'

const title = t('demo.login')

English source example:

{
  "translationSetting": {
    "locales": ["en-US", "zh-CN", "ja-JP"]
  }
}

<button>Login</button>

<button>{{ $t('demo.login') }}</button>

Chinese in regex is part of matching rules, not recommended for automatic translation:

const regex = /中文|English/giu

Already processed $t(...), this.$t(...), t(...) are skipped. Vue2's this.$t is still supported.

JSX

JSX text is replaced with {t(...)}:

<h1>留言（{remarkList ? remarkList.length : 0}）</h1>

<h1>{t('jsxAll.leave_a_message')}（{remarkList ? remarkList.length : 0}）</h1>

Long natural language should be processed as a complete unit, to avoid splitting into too many keys by commas or periods.

In JSX/TSX, className, style, event attributes, type, role, data-*, aria-* are skipped; custom display attributes can be extracted:

<Comp title="User Detail" label="User Name" />

Vue SFC's <script setup lang="jsx"> and <script setup lang="tsx"> are also parsed as JSX/TSX, supporting render functions and JSX text returned from defineComponent.

Ignore Comments

Use ignore comments for code you don't want processed temporarily:

// @hias-i18n-ignore-next
message.success('Keep original')

/* @hias-i18n-ignore-start */
const a = 'Keep original'
const b = 'Keep original too'
/* @hias-i18n-ignore-end */

Vue template:

<!-- @hias-i18n-ignore-next -->
<div>保持原文</div>

Ignore entire file:

// @hias-i18n-ignore-file

Output

Translation typically produces two types of changes:

1. Chinese in the original file is replaced with $t or t calls.
2. Corresponding locale files are generated in the locale directory.

Example:

src\locale\module\demo\zh-CN.json
src\locale\module\demo\en-US.json