DEV Community

Cover image for Tired of Messy Code?๐Ÿฅด
Aurnab Das
Aurnab Das

Posted on

1

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.โœจ

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where youโ€™ll build it, break it, debug it, and fix it. Youโ€™ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good olโ€™ AI to find and fix issues fast.

RSVP here โ†’

Top comments (0)

Eliminate Context Switching and Maximize Productivity

Pieces.app

Pieces Copilot is your personalized workflow assistant, working alongside your favorite apps. Ask questions about entire repositories, generate contextualized code, save and reuse useful snippets, and streamline your development process.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay