`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 包 weepub 使用教程

    本文将会介绍并教授如何使用 npm 包 weepub,该包专为前端开发者设计,并提供了一些实用的工具和方法,以便更好地处理和管理您的 Web 应用程序。 简介 weepub 是一个基于 JavaScr...

    3 年前
  • npm 包 gulp-real-rebase 使用教程

    在前端开发中,我们经常会需要重新制定文件路径或者重命名文件。这时候,我们可以使用 gulp 插件 gulp-real-rebase 来实现这个功能。在本文中,我们将会介绍如何使用 gulp-real-...

    3 年前
  • npm 包 owen-react-library 使用教程

    在前端开发过程中,我们通常需要使用一些第三方库来帮助我们更快地完成项目。npm 是一个很好的工具,可以让我们方便地安装和管理这些第三方库。今天我们要介绍的是一个优秀的 npm 包:owen-react...

    3 年前
  • npm 包 damngdpr 使用教程

    在现代 web 开发中,保护用户隐私数据是必不可少的。GDPR(General Data Protection Regulation)是一项欧盟法规,对保护个人数据提供了强制性的要求。

    3 年前
  • npm 包 @bretkikehara/react-table 使用教程

    前言 在 Web 开发中,表格展示数据是非常常见的一种 UI 元素,而对于前端来说,去手写一个可复用的表格组件是颇为繁琐的一项任务。但好在现在有很多第三方的表格组件库可供使用,并且这些组件库常常非常易...

    3 年前
  • npm 包 kattvalp 使用教程

    介绍和背景 kattvalp 是一款 npm 包,它是 JavaScript 中的一个基于 Node.js 和 TypeScript 的 HTTP 客户端工具。kattvalp 借助了 axios 网...

    3 年前
  • npm 包 Rpscript-api-robotjs 使用教程

    Rpscript-api-robotjs 是一款基于 robotjs 模块封装成的 npm 包,它提供了简单的 api,方便前端开发者在编写脚本时自动化执行鼠标、键盘操作以及屏幕截图等操作。

    3 年前
  • npm 包 @libertyware/build-angular 使用教程

    简介 在前端开发中,构建工具是必不可少的环节。而 @libertyware/build-angular 是一个基于 Angular 的构建工具,帮助开发者快速搭建 Angular 环境,并帮助构建 A...

    3 年前
  • npm 包 @carlos22ivan/kscli 使用教程

    @carlos22ivan/kscli 是一个基于 Node.js 开发的命令行工具,它可以用来快速创建和管理项目,适用于前端开发。 安装 可以使用 npm 进行安装: --- ------- -- ...

    3 年前
  • npm 包 cryptolock 使用教程

    Cryptolock 是一个用于加密和解密数据的 npm 包。它使用 AES 加密算法,能够对数据进行安全加密和解密操作。在前端开发中,数据加密具有非常重要的意义,特别是在用户密码等数据安全方面,尤其...

    3 年前
  • NPM包Pug.js使用教程

    前言 Pug.js是一个流行的模板引擎,它能够轻松地将Pug代码转换为HTML。Pubsg是一个基于Pug的CSS样式库,使用者能够通过Pug的语法很容易地使用到Pubsg的样式。

    3 年前
  • npm 包 cloud-config-toolkit 使用教程

    在开发前端应用的过程中,我们经常需要管理配置数据。这些数据可能包含不同环境的数据库地址、API 地址、域名等等。手动管理这些数据很麻烦,而 cloud-config-toolkit 这款 npm 包则...

    3 年前
  • npm 包 cloud-config-toolkit-ajv 使用教程

    介绍 cloud-config-toolkit-ajv 是一个基于 AJV 的云配置工具包,可以帮助你在前端中以一种简单的方式获取和管理云配置。AJV 是一个快速的 JSON Schema 验证器,它...

    3 年前
  • npm 包 react-advanced-loader 使用教程

    简介 react-advanced-loader 是一个基于 React 和 Webpack 的 npm 包,它能够帮助开发者在 React 项目中更高效、优雅地加载组件和资源。

    3 年前
  • npm 包 sabius-manager-auth 使用教程

    在前端开发中,为了简化代码和提高开发效率,我们经常使用各种 npm 包。其中,sabius-manager-auth 是一款用于管理认证功能的 npm 包,可以帮助我们方便地实现身份认证功能。

    3 年前
  • npm 包 react-full-page-loader 使用教程

    在前端开发中,页面加载速度是非常重要的一项指标。为了提升用户体验,我们通常会考虑使用一些加载动画来提示用户页面正在加载中。在 React 中,我们可以利用第三方的 npm 包 react-full-p...

    3 年前
  • npm 包 @nearest/nearest-sdk 使用教程

    前言 @nearest/nearest-sdk 是一个针对定位和地图开发的 JavaScript SDK,该 SDK 提供了灵活可扩展的接口和工具,使我们可以轻松地开发和集成定位、导航、路径规划和地图...

    3 年前
  • npm 包 oncloud.proxy 使用教程

    简介 oncloud.proxy 是一个帮助前端开发者简单易用地实现跨域请求的 npm 包。它可以通过配置指定需要跨域的接口以及需要将请求转发到的服务器地址,进而达到解决跨域问题的目的。

    3 年前
  • npm 包 @smartnewbs/feathersjs-hook-users 使用教程

    简介 @smartnewbs/feathersjs-hook-users 是一个适用于 FeathersJS 框架的 npm 包,它可以帮助开发人员方便地管理用户账户、权限等相关逻辑,从而减少开发工作...

    3 年前
  • NPM包gulp-jason-jsdoc使用教程

    介绍 gulp-jason-jsdoc是一个用于自动生成JavaScript的文档工具,它可以使用Gulp流式处理构建出文档。JSDoc生成器是一种将Javascript源代码转换为HTML文档的工具...

    3 年前

相关推荐

    暂无文章