🥷 Tip of The Day: NTL - Node Task List
Tags: webdev, tutorial, productivity, node
Published: 2024-04-24 12:09:21

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](https://twitter.com/ruyadorno) 🤟🏽

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwgzki8n3urkdygdq0my.gif)
___

## 📌 NTL: Node Task List 

[NTL](https://github.com/ruyadorno/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:

```shell
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:
```shell
~ ntl
```

#### 🎉 Output

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hschvnnzwnyhw2qx99gh.png)

[NTL](https://github.com/ruyadorno/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:

```json
{
  "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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mf325d6sgfs1lmrb6s5.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ago64t3fg64vd3dk1gev.gif)

___


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