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)