🥷 Tip of The Day: NTL - Node Task List

Renan Ferro - Apr 24 - - Dev Community

Hi guys how are you?!

I'm taking some courses and trying out some new things and this week I saw something very interesting that I didn't know about!

Have you already forgotten which scripts you have in package.json?! This usually happens to me (unfortunately) because I work on different projects during the day, and as a result I end up forgetting what each project has :(

Buuut

While studying this week I saw something interesting and powerful to solve and help me with the problem of remembering the scripts available in the project.

And even cooler, it was created by a Brazilian, specifically this monster called Ruy Adorno 🤟🏽

Image description


📌 NTL: Node Task List

NTL in a few words is basically and like the name says: A Node Task List, an interactive cli tool that lists and run package.json scripts. And it's really cool and useful!

Let's see how we can configure it in your machine!


🛠 Installing the NTL:

First, open your preferred terminal and run the command bellow to install the ntl globally:

npm i -g ntl
Enter fullscreen mode Exit fullscreen mode

💃🕺 Just use it!

We now have ntl available in our workspace. So basically in your project folder you can simply run the command below and see all the scripts available in your project, have a look:

Execute command:

~ ntl
Enter fullscreen mode Exit fullscreen mode

🎉 Output

As you can see, we have all our scripts available quickly and easily:

Image description

NTL also has some other really cool possibilities, one of which is that we can add a structure block to our package.json with descriptions about the scripts, and thus never forget what each one does, as below:

Description structure:

Inside in your package.json, just add the code block below ntl like you can see in the code example below:

{
  "name": "dev-tab",
  "version": "3.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "test:prod": "ng test --browsers=ChromeHeadless --watch=false --code-coverage --include=src/app/services/controller-storage.service.spec.ts",
    "dev:ssr": "ng run dev-tab:serve-ssr",
    "serve:ssr": "node dist/dev-tab/server/main.js",
    "build:ssr": "ng build && ng run dev-tab:server",
    "prerender": "ng run dev-tab:prerender",
    "format": "prettier --write .",
    "serve:ssr:dev-tab": "node dist/dev-tab/server/server.mjs"
  },
  "private": true,
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "ntl": {
    "descriptions": {
      "format": "Execute prettier formater"
    }
  }
}

Enter fullscreen mode Exit fullscreen mode

And now, we can see the CLI with more informations:

Image description

Image description


This is really something really cool and interesting for us to use in our daily lives!

If it's something new for you, like it was for me, share it with your friends or the community!

Maybe you can help like you helped me!

That's all guys, see you soon 🖖🏽🖖🏽🖖🏽

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .