How to format HTML/CSS/JS (or any other) using node.js in Notepad++ in simply easy steps.

Hey guys! Today I am going to tell you on how to use code format / pretty print your HTML / CSS / JS or any other programming language using node modules (Prettier) in notepad++.

Before.

After.

Lets get started!

Pre-requisite:

• you need to have node installed in your computer. You can download it from here. Make sure you have installed node correctly.
• install notepad++ in your computer. You can download the latest version from here.

Step 1. Install Prettier using node.

To install Prettier in your system click on Start => cmd. This will open Command prompt. Write this command in Command Prompt. 

npm install --save-dev --save-exact prettier

To check if prettier is installed correctly type.

prettier --check

for more info click here.

Step 2. Check if nppexec plugin in set in your notepad++

Mostly notepad++ comes with nppexec by default. Just in case you cannot find nppexec. Check out this amazing blog that tells you step by step how to set up nppexec in your notepad++. https://www.voti.nl/bmptk/docs/notepadpp.html

Once you setup, it should look something like this.

Step 3. Adding nppexec script to run Prettier on your code.

From the above screenshot goto Plugins=>NppExec=>Execute or press f6 on your keyboad, This will pop up a screen like this.

Write the following code inside this popup.

C:\path\to\nodeinstall\prettier.cmd --write "$(CURRENT_DIRECTORY)\$(FILE_NAME)"

NPP_OPEN $(FILE_NAME)

NPP_CONSOLE 0

Note: The path of your pretter.cmd file may be different. Check the folder where you have installed your Pretter module. It will be mostly be present inside your node folder.

Step 4. Save the code and test if it works.

Now that you have written the code inside the popup Save it and give it a name. I gave it CodeFormat as you can see from the above code. 

Now click on ok and check if the code is getting formatted or not. Congrats now all you have to do is create a shortcut and you are good to go!!

If not make sure you have given the correct directory for prettier.cmd file. 

Step 5. Adding a shortcut field using NppExec option to make it available in notepadd++ shortcut mapper.

To do this, it's really simple. click Plugins=>NppExec=>Advanced options.

This will open another screen. All you have to do it.

• Inside Item name dropdown you will find your saved code name. click.
• Now click on Add/Modify. 
• You will now see your code name appear on top Menu Item panel. Now click ok and you are good to go!

Step 6.Mapping shortcut in your notepad++.

This is the last and the final step! Click Settings=>Shortcut mapper. It will open a popup. 

Now Goto the Plugin Commands tab. Scroll down to find your Code name you have saved, in my case it was CodeFormat. Now click the modify button and select whatever keybind you want to choose to trigger this code. I have chosen Alt+~.

Close it! Thats it! Hurray!

Now you can format any code by pressing the keybind and it will automatically format your code for you.

Conclusion.

In this tutorial we learnt how to install Prettier module in node and use it to format / pretty print your programming language like HTML / CSS / JS or any other programming language in notepad++. Hope you guys enjoyed this small tutorial, Feel free to post your problems in the comment section below. Thank you!