Web Development Workflow Using Notepad++
It took a while but now I have the perfect setup for working on projects at work. It may even be the perfect setup for working on all my web projects.
I’ve got FTP in the left sidebar. Pages that are open are on the right, and the ones that need to be saved will turn red. CTRL+S saves the file I’m on, and uploads it to the web automatically. I also have the Windows CMD at the bottom with OpenSSH so I can SSH with CMD. Now I can add, commit, and tag my work easily and do other SSH stuff. Also found out how to have multiple sessions at the same time so I can work on multiple projects at the same time. No more needing multiple applications open to work on a project. Everything is in one place.
Notepad++ for the win! <3
I've been a fan of Notepad++ for the longest time. It wasn't until my first job that I started using Sublime Text. Sublime Text is very powerful and the interface is beautiful. But I have not been able to set it up the way I want it to be. Also the contrast isn't that great. Now I have a good setup that will improve my productivity. Another thing I like about Notepad++ is it's free whereas Sublime Text is pricey.
I will admit, Notepad++ is not perfect. I love the search interface for Sublime Text over Notepad++ for instance. It's also much easier to find plugins in Sublime Text than in Notepad++ as you can actually type in a search for the one you want. I believe Sublime Text has more plugins than Notepad++ as well. I think there are more options for customization with Sublime Text over Notepad++, just judging by what I've used in both text editors.
In case you're interested, here's how I set up my Notepad++ to have this workflow. Note, this is only for Windows computers. I don't think Notepad++ is available for Macs. Sorry.
Plugins required:
NppFTP
This one is in the Plugin Manager
NppConsole
This one is tricky to get as it isn’t in the Plugin Manager, so I gave you the link. Just put it in your plugins folder.
Something like this: C:Program Files (x86)Notepad++plugins
Other required software:
NppConsole opens up Windows CMD. CMD usually doesn’t come with SSH capabilities. To get them you will need something like OpenSSH.
Settings in Notepad++
Under Settings->Preferences, here are the required settings for this setup:
General
Toolbar->Hide Toolbar
Document List Panel->Show
Tab Bar->Hide
Show status bar
Multi-Instance
Multi-instance settings->Always in multi-instance mode
This is also helpful, but not required:
MISC.
Remember current session for next launch
Other settings, you can play around with depending on what standards you follow for coding, like for instance if you want all documents to open as UTF-8 without BOM.
Setting up the components
NppFTP
Go to Plugins->NppFTP and make sure to select “Show NppFTP Window”
You may dock it wherever you’d like by dragging the top bar.
To add FTP or SFTP connections, click on the gear icon and go to Profile settings. You may add multiple sessions and also specify which directory to open to on default. You can also specify the cache location. I just have it in the default location of C:UsersusernameAppDataRoamingNotepad++plugins……….. you get the point.
NppConsole
Go to Plugins->NppConsole and select “Show NppConsole Window”
Now you can type ssh [email protected] and hit enter and enter your password.
Doc Switcher
For the Doc Switcher, in my case, it was in the same sidebar as the NppFTP, so I just dragged it out of there by selecting the tab at the bottom, drag it to the right side of the document. I like my open pages in a sidebar because I often have many open all at once, and tabs at the top don’t work so well for me. Also this set up lets me know the file extension and I can order the pages alphabetically.
Customizing the CMD
If you don’t already know how you can customize the Windows CMD, for instance, if you don’t normally use it, here’s what you can do:
Type cmd in the search bar after clicking on the Start button. Hit enter and the application should pop up.
Right click on the title bar and go all the way down to Properties. From there it’s up to you how you want it.
Tip:
If you want to be able to copy and paste stuff in CMD, you will need to enable Quick Edit Mode under Edit Options.
Comments
Well that’s it. Feel free to comment about your favorite set up, tips and tricks as well. I’m interested to hear what others are doing to make their lives easier when coding a website. Or it doesn’t even have to be web related coding. Desktop and mobile app developers are welcome as well.