Code Refactoring / Clean Code
Tags: programming, webdev, readablecode, managingcode
Published: 2020-09-22 13:46:22

#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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c2mx23v0jauwpfhbcr29.png)

##Website for Downloading Plugin
![Beautify Code](https://dev-to-uploads.s3.amazonaws.com/i/7c9zrqd294d52lizgmxi.png)


**[Beautify File](https://rb.gy/7bszh2)**

##Installing From Inside VSCode

![Installation](https://dev-to-uploads.s3.amazonaws.com/i/s4yk89rcmomt7dkc5w80.gif)

## 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.

![Usage](https://dev-to-uploads.s3.amazonaws.com/i/u0i0bwkk0158zknouutd.gif)

**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.

![Sorting](https://dev-to-uploads.s3.amazonaws.com/i/d0jkoh21qc4nrj6ko0kp.gif)

#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**

![Comments](https://dev-to-uploads.s3.amazonaws.com/i/7kbyjxca8dvemfxonokk.gif)

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