0.1.7 • Published 3 years ago

vscode-intl-javascript v0.1.7

Weekly downloads
36
License
BSD-3-Clause
Repository
github
Last release
3 years ago

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

basic usage

replace already key

replace already key

replace no right key

replace no right key

replace no right value

replace no right value

batch check dir

batch check dir

Framework

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)

plan

  • vue plugin
  • angular plugin
  • more hooks

communication

group dingding(钉钉群): 32965438