In this post, I will list down few tools that I use personally which have improved my coding skills and development experience. These tools are easy to set up and learn and will help you in the long run.
Git
Git allows you to version control your code, you can easily go back to your code which you wrote months ago just using a few clicks. Learning git has saved me huge amounts of time. You don't have to maintain separate copies of your code. Just create a branch when working on a new feature, previously i used to create a copy of my code if I wanted to try something. Also with online repository hosting like Github, you can have a copy of your code which you can then download on another machine. This also helps a lot when multiple people are working on the same project, changes will be merged automatically if there are no conflicts. Github even has a nice collection of posts and tutorials.
VS Code
VS code is nice looking, does not get in your way when you are coding yet provides all the features that you might need. It has a feature called Intellisense where it will suggest autocomplete options for variables and functions. If you hover over built-in methods you can see what arguments it requires, documentation at times which saves me a trip to the browser. Also if you have a hard time remembering too many shortcuts at once then it has got you covered, just remember one shortcut. Command palette, it is a searchable list of all the options you can perform. Once you find the action you were looking for just hit enter and you are done. On top of these features, it has great git support. It will help you resolve conflicts with ease. VS code also comes with a great number of extensions to help you code.
I will list a few of my favourite ones here.
- Auto close tag & Auto rename tag: Things that help when writing HTML.
- Bracket Pair Colorizer: Different color coding for each nested bracket, you can easily spot where a bracket is closed
- Better comments: You can have Todo, Info comments with different colors so that you can spot them easily.
- Debugger for Chrome: Allows you to debug client side JS using VS code.
- Git History & GitLens: Extra Git superpowers inside VS code.
- Live server: Serves the files you are working on, you can view the app in the browser, refreshes as you make changes in code.
Linters
Linters allow you to enforce coding guidelines throughout your codebase. This way if you will improve your coding skills, if a new person starts working on the same project there won't be multiple code styles throughout the project. For Javascript take a look at ESLint, there are many rules which you can enforce on your codebase.
Prettier
A neat looking code is not less than work of art. A clean looking code does not only look good to the eyes but will help you debug it quickly.
Formatting your code manually can be a bit irritating though, Prettier comes to the rescue. You can either install the prettier plugin for your ide or run the node package and it will format the code. If you are working on a project with many people this works even great as the styling will remain the same even after someone has changed the code. It allows you to have your own config file just in case you don't like the default rules.
Git hooks
Wouldn't it be nice if you could format your code or run the tests before you commit, push anything? It will save you time and effort wouldn't it?
You could run linter on your code and if it fails the changes would not be committed. Well, git hooks let you do exactly the same. Check out this site to learn more. If you are using node you can use this awesome package: husky. Just add what you want to do before commit, push in pacakge.json and let husky handle the rest for you.
Nodemon
If you were developing API using Node you would often have to restart the node process manually once you make changes. This is frustrating when you are coding, with nodemon you won't face this issue. Just run the script using nodemon and it will restart once you make any changes to the script or files in the same folder.
Top comments (6)
I'm a newbie here but I'm looking for some online tools that will correct simple code mistakes. I can't describe it more specifically but it needs to look like this essaytoolbox.com/ . Just online simple tools to check the code for common mistakes and lines that are not useful or simply harmful
Great article!
Thank you.
Great Article !
I installed some of the vs code extensions you listed there :)
I'd love to implement git hooks everywhere, in order to make sure everyone commits proper code, but my teammates tend not to like these kind of added "rules" ... :(
I personally love Sonar(sonarqube.org/), you can get it as standalone server as well as an extension for your favourite IDE,
it is a little heavy on your machine, however It's well worth it for me!
For the VS Code fans out here, have a look at VSCodium - github.com/VSCodium/vscodium
Githooks is definitely the gem! You should definitely list some small calculators like tip-calculator.org/. They help millions of users every day, don't they?