npm 包 vscode-nls 使用教程

什么是 vscode-nls ？

vscode-nls 是一个用于多语言支持的工具包，它可以帮助你在开发过程中实现国际化和本地化功能。如果你需要开发一个多语言应用，那么 vscode-nls 将是不可或缺的工具之一。

如何使用 vscode-nls ？

首先，你需要在项目中安装 vscode-nls 包：

npm install vscode-nls

然后，你需要在你的项目中创建一个 messages 目录，并在其中创建一个文件夹用于存储对应语言的 .json 文件。例如，你要支持英语和法语，那么你需要在 messages 目录中创建两个文件夹：en 和 fr，分别用于存储英文和法语的本地化字符串。

接着，在项目的入口文件中，你需要引入 vscode-nls 并初始化：

const nls = require('vscode-nls');
const messages = require('./messages');

nls.config({ locale: 'en', messageFormat: nls.MessageFormat.file })
    .then(() => {
        const localize = nls.loadMessageBundle(messages.default);
        console.log(localize('greeting'));
    });

注：以上代码中，./messages 是存储本地化字符串的文件夹路径。

最后，在 .json 文件中输入本地化字符串：

{
    "greeting": "Hello, world!"
}

现在你可以在控制台中看到输出的字符串已经是被本地化了的。

vscode-nls 的更多使用方法

使用变量

假如你的字符串中需要使用变量，你可以在代码中这样写：

localize('welcome', { name: 'Jane' })

然后在 .json 中这样定义：

{
    "welcome": "Welcome, {name}!"
}

支持多个语言

你可以在项目中创建多个 .json 文件，例如：

messages/
  en/
    common.json
  fr/
    common.json

然后在代码中按需引入对应的 .json 文件：

-- -------------------- ---- -------
----- --- - ----------------------
----- -------- - -
    --- -------------------------------------
    --- ------------------------------------
--

------------ ------- ----- -------------- ---------------------- --
    -------- -- -
        ----- -------- - --------------------------------
        ------------------------------- - ----- ------ ----
    ---

使用动态语言

有时候，在运行时才能知道语言设置，在这种情况下，你需要在每个界面或应用程序的方法中包含以下代码：

const localize = nls.loadMessageBundle();

然后在需要本地化的字符串中使用 localize 函数：

console.log(localize('welcome', { name: 'Jane' }));

支持变量类型

你可以在定义本地化字符串时，指定变量类型。

例如，在 .json 中：

{
    "welcome": "Welcome, {0}! You have {1,number} unread messages."
}

然后在代码中这样写：

console.log(localize('welcome', ['Jane', 5]));

支持 RichText

你可以在 .json 中定义富文本字符串：

{
    "richText": "This is <b>bold</b> and this is <i>italic</i>."
}

然后在代码中这样写：

console.log(localize('richText'));

总结

在本文中，我们介绍了如何使用 vscode-nls 来实现多语言应用开发。同时，我们还讲解了使用 vscode-nls 的几种更高级的用法，包括变量、多语言支持、动态语言、变量类型和富文本字符串等。希望本文能对前端开发者有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/vscode-nls