`npm` 包 @wertarbyte/i18next-checker 使用教程

i18next-checker是一个可以在应用程序中轻松检测翻译字符串的工具。当在应用程序中使用i18n框架时,翻译字符串很容易出现错别字或语法错误。因此,i18next-checker工具基于规则检查器,可以方便的检测这些错误。

安装

安装可以在命令行中运行下面的命令:

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

使用

  1. 首先,在package.json文件的scripts中添加一行命令:

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

    该命令将在代码变动时执行,并对i18n文件使用linter校验规则。

  2. 创建一个名为i18next.config.js的配置文件,并将以下内容添加到该文件中:

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

    这个文件定义了i18n检查器要检查的文件,并定义了三种检查器规则。

    • matcher规则检查需要匹配的字符串,这里的字符串是指翻译用到的字符串。matcher接受一个正则表达式作为参数。
    • message规则检查错误后给出的错误提示信息。
  3. 接下来,在命令行中执行:

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

    这个命令将会检查所有在配置文件中规定的文件,并返回错误或者警告信息。

  4. 可以将其自动化。通过huskylint-staged可以让 i18next-check 在提交代码之前运行。 修改 husky pre-commit 提交钩子, 修改 package.json 文件:

    -
      -------- -
          -------- -
              ------------- -------------
          -
      --
      -------------- -
              -------------------- -
                  -------------- -------- ----------------- ---------
                  --------- --------
              -
          -
      -
    -
  5. 将以下配置放到IDE中,以便产生错误时使用eslint错误突出显示

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

]

};

-- ----

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

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

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

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

如此,当提交代码并在预提交钩子中使用了i18n错误时,将会在 IDE 中出现i18next/no-literal-string的编译错误显示。这可以让开发者及时发现问题,从而减少代码中的错误引入。

结论

通过使用 i18next-checker 模块,我们在预提交钩子上自动地发现了语言问题,代码的可靠性和可维护性更高。此外,通常情况下,前端JS大部分代码由预处理器或库生成,因此用于预处理器或库的基于规则的检测器将是非常有用的。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60065f70238a385564ab66b6


猜你喜欢

  • npm 包 videojs-overlay-hyperlink 使用教程

    简介 videojs-overlay-hyperlink 是一个基于 video.js 播放器的插件,它可以在视频中显示带有超链接的浮层提示。 该插件开源,可以通过 npm 包管理器进行安装和使用。

    3 年前
  • npm 包 @antbat/datasource 使用教程

    介绍 @antbat/datasource 是一个轻量级的前端数据源管理库,提供了一系列的 API,方便开发者对数据源的增删改查等操作。使用 @antbat/datasource 可以帮助我们管理前端...

    3 年前
  • npm 包 oe-like-jquery 使用教程

    在前端开发中,jQuery 是非常常用的一个库。但是随着 ECMAScript 的发展,越来越多的浏览器原生支持了许多 jQuery 常用的功能。而 oe-like-jquery 是一个通过原生 Ja...

    3 年前
  • npm 包 @e2fyi/firebase-admin 使用教程

    简介 Firebase 常被用于开发移动端应用或 Web 应用的后台部分,因为其易用性和可靠性。通过 firebase-admin 库,我们可以在 Node.js 中使用 Firebase 服务。

    3 年前
  • npm 包 adonis-resource-middleware 使用教程

    简介: 本文主要介绍如何使用 adonis-resource-middleware 这个 npm 包,通过该包可以用更简单的方式来定义 RESTful API 接口,并使用 AdonisJS 实现该接...

    3 年前
  • npm 包 iprxy-telegram-node 使用教程

    前言 iprxy-telegram-node 是一个基于 Node.js 开发的 npm 包,主要用于 Telegram 机器人的开发。它可以帮助开发者简化 Telegram API 的调用流程,提高...

    3 年前
  • npm包Next-Artemis 使用教程

    简介 Next-Artemis是一个易于使用的React组件库,致力于简化前端开发的过程。Next-Artemis提供了直观的接口和漂亮的UI组件,可以节省开发时间,提高开发效率。

    3 年前
  • npm 包 ngrx-gen 使用教程

    前言 在现代 Web 开发中,组件化已经成为了一种流行的开发方式。而在 Angular 框架中,ngrx 是一种流行的状态管理库,可以帮助我们更好地掌控组件的状态。

    3 年前
  • npm 包 viewport-mq 使用教程

    viewport-mq 是一个非常方便的 npm 库,它可以帮助前端开发人员更轻松地编写响应式 CSS。本文将详细介绍如何使用 viewport-mq,包括其使用方法、示例代码和注意事项。

    3 年前
  • npm 包 vimplugin-cli 使用教程

    什么是 vimplugin-cli vimplugin-cli 是一个用于生成 vim 插件项目的命令行工具。它提供了一些常用的插件模板,以及插件开发所需要的必要配置。

    3 年前
  • npm 包 parallel-webpack-watch 使用教程

    在前端开发中,Webpack 是一个非常流行的构建工具,它可以将多个 JavaScript 文件打包成单个文件,并提供了各种插件和 loaders 来处理各种类型的文件。

    3 年前
  • npm 包 raysmith745-palindrome 使用教程

    在前端开发过程中,字符串的操作无疑是经常使用的必备技能。而实现一个字符串的回文检查器是其中一个很好的练手项目。不过,如果想要更方便、更高效地实现这个功能,我们可以使用 npm 上的 raysmith7...

    3 年前
  • npm 包 slate-text-table 使用教程

    在前端开发中,展示列表数据时,表格是一个经常使用的方式。但是通过 HTML 和 CSS 来手动创建表格往往十分繁琐。这时便可以借助第三方的 npm 包,提高开发效率。

    3 年前
  • npm 包 each.js 使用教程

    什么是 each.js each.js 是一个 JavaScript 库,它提供了一些简单的方法来帮助你在数组、对象、Map、Set 等各种数据结构中进行迭代。 each.js 具有以下特点: 独立...

    3 年前
  • 使用npm包Evalx——JS代码执行器

    简介 Evalx是一个简单易用的NPM包,用于在Node.js和浏览器中执行JavaScript代码。它可以方便地将字符串解析为可执行代码,从而实现动态代码执行。这种技术被广泛应用于Web开发、数据处...

    3 年前
  • npm 包 slate-delete-one-line 使用教程

    在前端开发中,我们经常使用各种类库和工具来提高开发效率和代码的可读性。其中,slate-delete-one-line 是一个基于 Slate 的删除插件,可以帮助我们快速删除一行文本。

    3 年前
  • npm 包 frank-test-1-1 使用教程

    frank-test-1-1 是一款基于 Node.js 平台的前端测试工具包。它提供了多种测试工具和库,用于支持前端开发的测试流程。本教程将会详细介绍如何使用 frank-test-1-1 进行前端...

    3 年前
  • npm 包 homebridge-timer-switch 使用教程

    homebridge-timer-switch 是一个开源的 npm 包,它提供了一个用于控制智能插座的插件,可以使用 homebridge 集成 Apple 的 HomeKit 平台。

    3 年前
  • npm 包 timer-switch 使用教程

    随着前端技术的不断进步,越来越多的开发者将开放包作为自己项目的重要组成部分。而 npm 是一个优秀的开源包管理工具,它让开发者可以方便地发布、安装和更新自己的 npm 包。

    3 年前
  • npm 包 xxx-videojs 使用教程

    介绍 xxx-videojs 是一个基于 video.js 的 npm 包,它可以在前端页面中便捷地嵌入视频。本文将介绍如何使用 xxx-videojs 包。 安装 在项目的根目录下,使用 npm 安...

    3 年前

相关推荐

    暂无文章