Code Refactoring / Clean Code

What is Code Refactoring and it's importance ?

Today, we are going to talk about one the most important in a programmer's life that is Code Refactoring.

Key to Clean Code is DRY(Do Not Repeat)

Code Refactoring simply means writing clean and managed code with appropriate comments so that when any other person look at your code he/she can understand the flow easily. By writing clean code you can ensure that other person who is reading and editing your code do not had to first invest his/her time on understanding the code. But, if our code is already refactored then it will be easy to understand and the other person can simply dive in code and can be more productive.

Code Refactoring is one of the keys to a successfull project. If we see in big companies also their code is very much clean written and where the previous developer stucked or found a solution to a problem he/she leaves comments so that if any other person or they themselves visit that code again then it's easy for them to understand what's happening.

Note: Here we will be covering code refactoring using Visual Code (VSCode).

Steps involved in refactoring code

1. Indentation
2. Sorting alphabetically(in case of CSS)
3. Comments

1. Plugin for Code Indentation

Uses - Beautify javascript, JSON, CSS, Sass, and HTML

Logo

Website for Downloading Plugin

Beautify File

Installing From Inside VSCode

How To use Beautify Plugin?

1. Open VSCode.
2. Write your code.
3. Select the part which you want to indent, in this case i am selecting whole as i want to indent whole file (Shortcuts -- (MacOS) - CMD + a || (Windows) - CTRL + a.
4. Press CMD + Shift + p on Mac and CTRL + Shift + p on Windows to show All Commands Popup.
5. Search for Beautify file in All Commands Popup.
6. Press Enter.

So, now after indentation of our code we want it to sort(only for CSS file, we don't want sorting in HTML file because it's a markup language and depends on tags used.)

2. Sorting (CSS File)

1. Open VSCode.
2. Press CMD + Shift + p on Mac and CTRL + Shift + p on Windows to show All Commands Popup.
3. In All Commands Popup search for Sort Lines Ascending/Descending as needed, i personally prefer ascending order.
4. Double Click and assign it a key combination. If key is already assigned for any other purpose it will give warning.
5. After key is assigned head over to your CSS file and select any one block which you want to sort and press that key combination( in my case i used CTRL + CMD + a ).
6. Well, your code is now sorted and will be much easier to find properties when visiting next time.

3. Last Step -- Comments

Till, now we had come a long to refactor code and now let's see how we can use comments.

Comments in HTML
<!--Content-->

Comments in CSS
/*Content*/

Comments in JavaScript
Single Line - //Content
Multiline - /*Content*/

We can use CMD + / combination to comment lines

So, it's how i write a clean code and manage my code.
Hope, it helped you. Share this if you find it useful.