Boost Frontend Internationalization 80% Faster with fe-js-utils CLI

Preface

In the context of global collaboration, many front‑end projects need rapid internationalization. Often Chinese hard‑coded strings remain in the code, ranging from hundreds to thousands. Manual extraction is time‑consuming. To solve this, I developed fe‑js‑utils, a highly configurable CLI tool that can automatically extract Chinese text, generate common locale modules, classify them intelligently, and replace hard‑coded strings.

Compared with existing AI tools, fe‑js‑utils offers stable and controllable results, improving internationalization efficiency by 80‑90%.

fe-js-utils Usage Manual

1. Install

npm install fe-js-utils --save-dev
# or
yarn add fe-js-utils -D

2. Configure script commands

Add the following scripts to package.json:

{
  "scripts": {
    "cleanInvalidComments": "fe-js-utils cleanInvalidComments",
    "checkAny": "fe-js-utils checkAny",
    "extractChinese": "fe-js-utils extractChinese",
    "extractCommonLocaleValues": "fe-js-utils extractCommonLocaleValues",
    "findModuleInCommonLocaleValues": "fe-js-utils findModuleInCommonLocaleValues",
    "autoGenerateLocaleModules": "fe-js-utils autoGenerateLocaleModules",
    "autoReplaceChinese": "fe-js-utils autoReplaceChinese"
  }
}

3. Create configuration file

Step description

Create fe-js-utils.config.ts in the project root.

Use the following basic template (example):

// fe-js-utils.config.ts
const path = require('path');
module.exports = {
  checkAny: {
    targetDir: './src',
    outputFile: path.join(process.cwd(), 'check-any-results.js'),
    skipSet: [],
    extFiles: ['.ts', '.vue']
  },
  cleanInvalidComments: {
    targetDir: './src',
    extFiles: ['.js', '.ts', '.vue']
  },
  extractChinese: {
    targetDir: './src',
    outputFile: path.join(process.cwd(), 'extract-chinese-results.js'),
    extFiles: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.html'],
    excludeDirs: ['node_modules', 'dist', 'build', 'locales'],
    excludeFiles: ['extract-chinese-results.js', 'extract-chinese.js'],
    verbose: false
  },
  extractCommonLocaleValues: {
    inputFile: 'extract-chinese-results.js',
    outputFile: './src/locales/zh_CN/Common.ts',
    verbose: false
  },
  findModuleInCommonLocaleValues: {
    localeDir: './src/locales/zh_CN',
    localModules: [],
    commonLocaleModule: 'Common',
    annotationDefinedInCommonLocale: false,
    verbose: false
  },
  autoGenerateLocaleModules: {
    inputFile: './extract-chinese-results.js',
    outputDir: './src/locales/zh_CN',
    verbose: false,
    runExtractFirst: false,
    autoExtractCommonLocale: true,
    annotationDefinedInCommonLocale: true,
    customModuleDefinitions: {}
  },
  autoReplaceChinese: {
    localeDir: './src/locales/zh_CN',
    localModules: [],
    commonLocaleModule: 'Common',
    variableDeclarationInsertPosition: '// #region Hooks',
    verbose: false,
    customImportStatements: null,
    customVariableDeclarations: null,
    customReplaceTextFunction: null
  }
};

Notes

When using .ts configuration files, Node version must be >= v22.18.0; .js files have no version requirement.

When importing .ts files in the config, remember to add the .ts suffix.

4. Tool and option descriptions

checkAny (Any type checking)

Function: Scan the project for usage of the any type.

Scenarios: Code quality inspection, TypeScript type audit.

Options:

targetDir (string, default './src') – source directory to scan.

outputFile (string) – path of the result file.

skipSet (string[], default []) – code patterns to ignore.

extFiles (string[], default ['.ts', '.vue']) – file extensions to scan.

Usage:

# Run any‑type check
npm run checkAny
# or
yarn checkAny

cleanInvalidComments (Invalid JSDoc comment cleaning)

Function: Remove JSDoc comments that lack @param or @returns descriptions.

Options:

targetDir (string, default './src') – directory to clean.

extFiles (string[], default ['.js', '.ts', '.vue']) – file extensions to process.

Usage:

# Clean invalid comments
npm run cleanInvalidComments
# or
yarn cleanInvalidComments

extractChinese (Chinese extraction)

Function: Extract all Chinese strings from the project.

Scenarios: Fast internationalization, identify hard‑coded Chinese, provide data for later i18n.

Options:

targetDir (string, default './src')

outputFile (string) – result file.

extFiles (string[], default ['.js', '.jsx', '.ts', '.tsx', '.vue', '.html'])

excludeDirs (string[], default ['node_modules','dist','build','locales'])

excludeFiles (string[])

verbose (boolean, default false)

Usage:

# Extract Chinese
npm run extractChinese
# or
yarn extractChinese

extractCommonLocaleValues (Common locale extraction)

Function: From the output of extractChinese, find repeated Chinese strings and generate a common locale module.

Options:

inputFile (string) – path to the Chinese extraction result.

outputFile (string, default './src/locales/zh_CN/Common.ts')

verbose (boolean, default false)

Usage:

# Extract common locale values
npm run extractCommonLocaleValues
# or
yarn extractCommonLocaleValues

autoGenerateLocaleModules (Automatic locale module generation)

Function: Generate per‑module language files based on the Chinese extraction result.

Scenarios: Automated language pack creation, module‑wise resource organization, quick i18n scaffolding.

Options:

inputFile (string) – Chinese extraction result file.

outputDir (string, default './src/locales/zh_CN')

verbose (boolean, default false)

runExtractFirst (boolean) – run extractChinese before generation.

autoExtractCommonLocale (boolean, default true) – generate common locale automatically.

annotationDefinedInCommonLocale (boolean, default true) – comment out values already defined in the common file.

customModuleDefinitions (object) – map custom module names to path prefixes.

Basic usage:

# Generate modules after extracting Chinese
npm run autoGenerateLocaleModules
# or
yarn autoGenerateLocaleModules

autoReplaceChinese (Automatic Chinese replacement)

Function: Replace hard‑coded Chinese strings in source files with i18n function calls based on generated locale modules.

Scenarios: Automated i18n refactoring, unify text usage, replace literals with dynamic calls.

Options:

localeDir (string, default './src/locales/zh_CN') – directory of locale files.

localModules (string[]) – list of module file names to process.

commonLocaleModule (string, default 'Common')

variableDeclarationInsertPosition (string) – marker comment where variable declarations are inserted; defaults to the last import if not found.

verbose (boolean, default false)

customImportStatements , customVariableDeclarations , customReplaceTextFunction – optional callbacks for custom code generation.

Usage:

# Replace Chinese in source code
npm run autoReplaceChinese
# or
yarn autoReplaceChinese

Important notes

Generated language files use numeric keys (key0, key1, …). Use an AI translator to convert values to other languages.

After generating modules, remember to register the index file in your i18n system.

Back up source files before running replacement.

Test on a few modules before batch processing.

Relationship and combined usage guide

The tools form a pipeline:

extractChinese → extractCommonLocaleValues → autoGenerateLocaleModules → findModuleInCommonLocaleValues (optional) → autoReplaceChinese.</p><p>Typical workflow (recommended):</p><pre><code># 1. Extract all Chinese
npx fe-js-utils extractChinese

# 2. Auto‑generate module locale files (includes common extraction)
npx fe-js-utils autoGenerateLocaleModules

# 3. (Optional) Analyse duplicate values
npx fe-js-utils findModuleInCommonLocaleValues

# 4. Replace hard‑coded strings
npx fe-js-utils autoReplaceChinese

Step‑by‑step details

Step 1 – extractChinese

Scans the whole project and outputs extract-chinese-results.js with arrays of Chinese strings per file.

Step 2 – extractCommonLocaleValues

Creates Common.ts containing repeated strings.

Step 3 – autoGenerateLocaleModules

Produces per‑module files such as UserManagement.ts , AlarmConfig.ts , and an index.ts that exports them.

Step 4 – findModuleInCommonLocaleValues (optional)

Shows which module strings already exist in the common file.

Step 5 – autoReplaceChinese

Rewrites source files, inserting imports like useLocalLang and replacing literals with localLang('keyX') calls.

Configuration suggestions

Example fe-js-utils.config.ts snippet that enables the full pipeline:

module.exports = {
  extractChinese: {
    targetDir: './src',
    outputFile: './extract-chinese-results.js',
    extFiles: ['.js', '.ts', '.vue']
  },
  extractCommonLocaleValues: {
    outputFile: './src/locales/zh_CN/Common.ts'
  },
  autoGenerateLocaleModules: {
    outputDir: './src/locales/zh_CN',
    runExtractFirst: true,
    autoExtractCommonLocale: true
  },
  findModuleInCommonLocaleValues: {
    localeDir: './src/locales/zh_CN',
    commonLocaleModule: 'Common',
    localModules: ['UserList', 'AlarmList']
  },
  autoReplaceChinese: {
    localeDir: './src/locales/zh_CN',
    commonLocaleModule: 'Common',
    localModules: ['UserList', 'AlarmList']
  }
};

Images