🥷 Tip of The Day: NTL - Node Task List

#webdev #tutorial #productivity #node

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 🤟🏽

📌 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

💃🕺 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

🎉 Output

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

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"
    }
  }
}

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

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 🖖🏽🖖🏽🖖🏽

Top comments (5)

Ahmed Atwa • Apr 25

Do you realize that if you load the project folder in VSCode it will automatically display all available scripts in the sidebar?

Renan Ferro • Apr 25

Wow, serious?! I didn't know that! I just use WebStorm and sometimes VSCode to open or do something specific, like: "Hmm, this will be quick to do".

Thinking now, WebStorm has a tab to show all scripts too 😅

But cool, I learned something new about NTL and something new too: VSCode also has a sidebar 🤣

Fyodor • Apr 26

The VSCode's npm helper is laggy, as many things in VSCode. WebStorm's helper runs scripts in separate runner UI, not in terminal, which is OK but has its flaws. Also IDEs fail, or need restarting sometimes, and doing that would stop the running scripts, which is not very good usually (and annoying), for complex scripts especially.

All in all, TIL about NTL and it looks fine. Has its usecases definitely. Decoupling terminal and IDE is something I personally do very often (except quick script runs probably). Though I personally don't like such helpers anyway. Autocomplete in modern terminal apps does miracles, you basically can go barebones.