DEV Community

Quy Luong
Quy Luong

Posted on

I write a console tool for edit multiple language files at the same time

You know, one of the problems when you do web is multilingual. After working with these stuff for a while, I realized it was quite time consuming and boring because I had to copy and paste values ​​from requirements.

The projects I've worked on used React, Angular with a multi-language library i18next. Its common point is that they all use JSON format files.

Therefore, I was looking for a tool to make it easier for me to manipulate in the process of working. But most will be tools with interfaces, it is quite time consuming to manipulate. For a console fanatic like me, that's unacceptable πŸ˜‚. So I decided to write a tool for myself and for my colleagues 😁, It must meet criteria such as light, fast, uncomplicated.

After using it for a while (almost 2 years) I found it to be quite good, I also have a few updates for it. Now I just want to share it with you. Hope it helps in everyone's working process 😁.

SuperLangEditor (SLE)

npm: https://www.npmjs.com/package/super-lang-editor
git: https://github.com/lnquy065/super-lang-editor

Screenshot:

  ____                                  _                             
 / ___|   _   _   _ __     ___   _ __  | |       __ _   _ __     __ _ 
 \___ \  | | | | | '_ \   / _ \ | '__| | |      / _` | | '_ \   / _` |
  ___) | | |_| | | |_) | |  __/ | |    | |___  | (_| | | | | | | (_| |
 |____/   \__,_| | .__/   \___| |_|    |_____|  \__,_| |_| |_|  \__, |
                 |_|                                            |___/ 
  Version: 1.5.0 by lnquy065
  JSON Format: nesting
======================================================================
? Select action:  (Use arrow keys)
❯ [πŸ”] Search by key 
  [βž•] Add new key/values 
  [πŸ”§] Edit values 
  [πŸ”¨] Rename/move key 
  [πŸ’₯] Remove key 
  [πŸ”ƒ] Sort by key 
  [πŸ” ] Key naming convention converter 
(Move up and down to reveal more choices)
Enter fullscreen mode Exit fullscreen mode

There are features:

  • Search by key
  • Edit values
  • Rename/move key
  • Remove key
  • Add new key/values
  • Sort by key
  • Key naming convention converter

About the details of the features, I have created gifs for you to follow easily

[πŸ”] Search by key

Search by key

[βž•] Add new key/values

Add new key and values

[πŸ”§] Edit values

Edit values

[πŸ”¨] Rename key

Rename key

[πŸ”¨] Move key

Move a key

Move a key

Move whole object

Move whole object

[πŸ’₯] Remove key

You can use this feature for remove value of a key or remove an object.

Input name of key that you want to remove:
? Select action:  Remove key [Press 'ESC' to back to main menu]
? Input language key name to remove: 
❯ pageComponents.news
  pageComponents.home.title
  pageComponents.about.title

Enter fullscreen mode Exit fullscreen mode

Note: If you input "pageComponents.about.title", nested key is "title" will be remove. But if you input "pageComponents.about", "pageComponents.about" object will flies away.

  • When remove "pageComponents.about.title"
{
    "pageComponents": {
        "news": "news",
        "home": {
            "title": "Home Page"
        },
        "about": {}
    }
}
Enter fullscreen mode Exit fullscreen mode
  • When remove "pageComponents.about"
{
    "pageComponents": {
        "news": "news",
        "home": {
            "title": "Home Page"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

[πŸ”ƒ] Sort by key

Sort by key

[πŸ” ] Key naming convention converter

Key naming convention converter

SLE support 3 of naming conventions: Camel case, Kebab case and Snake case.

Installation

Sounds good πŸ˜…?. If you like it and find it useful, you can install it by following the instructions below 😁.

npm install super-lang-editor -g
Enter fullscreen mode Exit fullscreen mode

Usage

At the root folder of your project. Start it from terminal

super-lang

  • At start screen, please choose i18next format that you are using first.
? Select JSON format:  (Use arrow keys)
❯ Nesting (The parent key and the child key are nested) 
  Inline (The parent key and the child key are separated by a ".") 
Enter fullscreen mode Exit fullscreen mode

Nesting format

{
    "home": {
        "hello": "Hello",
        "world": "World"
        }
}
Enter fullscreen mode Exit fullscreen mode

Inline format

{
    "home.hello": "Hello",
    "home.world": "World"
}
Enter fullscreen mode Exit fullscreen mode
  • SLE will scans all language files. Please choose files that you want to modify.
  ? Select language files:  (Press <space> to select, <a> to toggle all, <i> to invert selection)
  ❯◉ dist/locales/en.json - (English)
   β—‰ dist/locales/vi.json - (Vietnamese)
   β—‰ public/locales/en.json - (English)
   β—‰ public/locales/vi.json - (Vietnamese)
Enter fullscreen mode Exit fullscreen mode
  • Now we can select action like the list of features above.

Thanks for reading this article. I look forward to receiving your comments to make it better. If it really helps your work, please give me a star, I really appreciate it 😁😁.

Top comments (0)