How to use it

Search vscode-intl-javascript in vscode Market, then install it

Simple start (react)

create config file in project dir

intl.config.js

install package

npm install vscode-intl-javascript react-intl-universal --save-dev

write config content

const ReactBabel = require('vscode-intl-javascript/out/plugins/react');
const ReactIntlUniversal = require('vscode-intl-javascript/out/plugins/react-intl-universal');
module.exports = (parser) => {
    return {
        langs: [
            {
                key: 'zh_CN',
                name: '中文简体'
            },
            {
                key: 'en_US',
                name: '英文'
            }
        ],
        plugins: [
            new ReactIntlUniversal({
                defaultLang: 'zh_CN',
                defaultFuncNameReg: /d/,
                getFuncNameReg: /get|getHTML/
            }),
            new ReactBabel()
        ]
    }
}

Example

example

Usage display

basic usage

replace already key

replace no right key

replace no right value

batch check dir

Framework

Config

langs [array]

{
    key: LangKey, // International file name
    name: string, // Prompt text
    color: string, // Prompt color when conditions are not met
    check: boolean, // Whether to skip batch detection
}[]
type LangKey = 'zh_CN' | 'en_US' | 'zh_TW';

localeDir

International file storage location

plugins

plug in mode 1

class ReactIntlUniversal {
    apply(parser) {
        // ...
    }
}
new ReactIntlUniversal({
    defaultLang: 'zh_CN',
    defaultFuncNameReg: /d/,
    getFuncNameReg: /get|getHTML/
})

plug in mode 2

// npm package : vscode-intl-javascript-plugin-XXX
export default class ReactIntlUniversal {
    apply(parser) {
        // ...
    }
}

[require.resolve('vscode-intl-javascript-plugin-XXX'), {
    optionA: 'XXX',
}]

How to write a plugin

clone plugin template from github vscode-intl-javascript-plugin-template

// just reference the code in src/plugins
export default class {
    apply(parser) {
        //...
    }
}

Parser API

filepath

current parse file path

babelHooks

babelPresetHook [SyncWaterfallHook]

export default class {
    apply(parser) {
        parser.babelHooks.babelPresetHook.tap((presets) => {
            return presets.concat([...]);
        })
    }
}

babelPluginHook [SyncWaterfallHook]

webViewHooks

public webViewHooks: {
    htmlHook: AsyncSeriesWaterfallHook<[string]>, // webview html content
    titleHook: AsyncSeriesWaterfallHook<[string]>, // webview title
    headHook: AsyncSeriesWaterfallHook<[string[]]>, // webview head tag list
    jsHook: AsyncSeriesWaterfallHook<[string[]]>, // webview head javascript tag list
    metaHook: AsyncSeriesWaterfallHook<[string[]]>, // webview head meta tag list
    cssHook: AsyncSeriesWaterfallHook<[string[]]>, // webview css tag list
    bodyHtmlHook: AsyncSeriesWaterfallHook<[string[]]>, // webview body html list
    btnHook: AsyncSeriesWaterfallHook<[string[]]>, // webview button list
    bodyHeaderJsHook: AsyncSeriesWaterfallHook<[string[]]>,// webview body jsvascript list, before </body>
    bodyFooterJsHook: AsyncSeriesWaterfallHook<[string[]]>, // webview body jsvascript list, after <body>
    listenerHook: AsyncSeriesWaterfallHook<[WebviewListenerParams[]]>, // webview listener callback list
    sendLangInfoHook: AsyncSeriesWaterfallHook<[MessageInfoSendParams, BaseErrorNode, Parser?]>, // webview postmessage params
    vueHooks: {
        createdHook: AsyncSeriesWaterfallHook<[string[][]]>, // webview vue create event callbacks
        methodsHook: AsyncSeriesWaterfallHook<[WebviewListenerParams[]]>, // webview vue methods property
    }
}

intlStorage

updateKeyInLang(param: UpdateParam): void;
checkKeyInLang(key: string, lang: LangKey, text?: string): {
    exist: boolean;
    ananimous: boolean;
};
getValueKeyInLang(value: string, lang: LangKey): string | null;
checkKey(key: string, text?: string): CheckResult;
getValueKey(value: string): CheckResult;
storeKeyAndValues(addParams: StorageAddParams[]): Promise<void>;
writeLangKeysToFile(langLey: LangKey, keys: {
    [key: string]: string;
}, isWhoile?: boolean): void;
storeKeyAndValue(addParam: StorageAddParams): void;
getKeyInLang(key: string, lang: LangKey): string;

config

localeDir: string
getFirstLangKey(): LangKey;
getTempDir(configFile: string | null): Promise<string>; // temp file dir

register new service

registerService(serviceName: keyof ParserService, serviceObj: any): void;
getService<T extends keyof ParserService>(serviceName: T): ParserService[T];

Plugin list

built-in plugins

react babel parser plugin

const ReactBabel = require('vscode-intl-javascript/out/plugins/react');
// file: intl.config.js
plugins: [
    new ReactIntlUniversal({
        defaultLang: 'zh_CN',
        defaultFuncNameReg: /d/,
        getFuncNameReg: /get|getHTML/
    }),
    new ReactBabel(),
]

react-intl-universal

const ReactIntlUniversal = require('vscode-intl-javascript/out/plugins/react-intl-universal');
// file: intl.config.js
plugins: [
    new ReactIntlUniversal({
        defaultLang: 'zh_CN',
        defaultFuncNameReg: /d/,
        getFuncNameReg: /get|getHTML/
    }),
    new ReactBabel(),
]

other plugins

alibaba(It can only be used inside the company)

@ali/vscode-intl-javascript-plugin-mds

plan

[ ] vue plugin
[ ] angular plugin
[ ] more hooks

communication

group dingding(钉钉群): 32965438

vscode-intl-javascript

rongpingli