DEV Community

Cover image for Tired of Messy Code?🥴
Aurnab Das
Aurnab Das

Posted on

Tired of Messy Code?🥴

Want to Make Your Code Look Pretty and Well-Organized?

Try the 𝗣𝗿𝗲𝘁𝘁𝗶𝗲𝗿 extension in VS Code!💡

𝗪𝗵𝗮𝘁 𝗶𝘀 𝗣𝗿𝗲𝘁𝘁𝗶𝗲𝗿?
↳ Prettier is a tool that makes your code look neat and consistent.

↳ It works by checking your code and fixing its style according to set rules.

↳ Prettier supports many programming languages and works with most code editors, including Visual Studio Code (VS Code).

↳ By using Prettier, your code will always be clean, easy to read, and free of style issues.

𝗛𝗼𝘄 𝘁𝗼 𝗜𝗻𝘀𝘁𝗮𝗹𝗹 𝗣𝗿𝗲𝘁𝘁𝗶𝗲𝗿 𝗶𝗻 𝗩𝗦 𝗖𝗼𝗱𝗲:

1️⃣ Open 𝗩𝗦 𝗖𝗼𝗱𝗲.

2️⃣ Go to the 𝗘𝘅𝘁𝗲𝗻𝘀𝗶𝗼𝗻𝘀 𝘃𝗶𝗲𝘄 by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing 𝗖𝘁𝗿𝗹+𝗦𝗵𝗶𝗳𝘁+𝗫.

3️⃣ Search for "𝗣𝗿𝗲𝘁𝘁𝗶𝗲𝗿 - 𝗖𝗼𝗱𝗲 𝗳𝗼𝗿𝗺𝗮𝘁𝘁𝗲𝗿" in the search bar.

4️⃣ Select the first one which appears in the search results, Click on the 𝗶𝗻𝘀𝘁𝗮𝗹𝗹 𝗯𝘂𝘁𝘁𝗼𝗻.

5️⃣ Once installed, you can 𝗰𝗹𝗼𝘀𝗲 𝘁𝗵𝗲 𝗘𝘅𝘁𝗲𝗻𝘀𝗶𝗼𝗻𝘀 𝘃𝗶𝗲𝘄.

𝗛𝗼𝘄 𝘁𝗼 𝗘𝗻𝗮𝗯𝗹𝗲 𝗔𝘂𝘁𝗼 𝗦𝗮𝘃𝗲 𝗮𝗻𝗱 𝗔𝘂𝘁𝗼 𝗙𝗼𝗿𝗺𝗮𝘁 𝘄𝗶𝘁𝗵 𝗣𝗿𝗲𝘁𝘁𝗶𝗲𝗿:

1️⃣ Open the Command Palette by pressing 𝗖𝘁𝗿𝗹+𝗦𝗵𝗶𝗳𝘁+𝗣.

2️⃣ Type and select Preferences: 𝗢𝗽𝗲𝗻 𝗦𝗲𝘁𝘁𝗶𝗻𝗴𝘀 (𝗝𝗦𝗢𝗡).

3️⃣ Add the following settings to your 𝘀𝗲𝘁𝘁𝗶𝗻𝗴𝘀.𝗷𝘀𝗼𝗻 file:

{

"editor.formatOnSave": true,
"editor.defaultFormatter":
"esbenp.prettier-vscode"

}

4️⃣ Save the 𝘀𝗲𝘁𝘁𝗶𝗻𝗴𝘀.𝗷𝘀𝗼𝗻 file.

Now, every time you save your any file in VS Code, Prettier will automatically format your code according to its rules.✨

Top comments (0)