![]() ![]() However, a glance at the list of the things it fixes shines a light on the main reason I still use Prettier in addition to it. What is this? Ruby?Īt madewithlove we currently use (mainly but not only) PHP CS Fixer. So ok, Javascript and a bunch of other front-end languages (CSS, HTML, GraphQL, etc.) have this tool, but this is Serious Enterprise PHP™ we have Serious Enterprise Tools™ to take care of our code style and PSRs and RFCs and all that – we don’t just type code until it’s pretty. Once you go without them though, you will realise how much time they take up. These distractions take up much more of your day than people realise because those are micro interruptions that are scattered and as such feel inconsequential. You stop thinking about indentation, manually adding commas, or placing things for maximum readability and such. You can type code in one disgusting line, press save, and the result is nicely formatted code. The more you trust Prettier, the more you can stop worrying about formatting altogether. This may sound counter-intuitive but it tremendously reduces friction when writing code. You can pass a few basic options to Prettier (indentation, max width, the basics) but other than that it takes your whole code and reformats it from scratch, disregarding any formatting decision you may have previously taken. ![]() Prettier, however, is currently one of the most popular code formatters out there, and it has spread to a lot of different languages already for one simple reason: it gives zero fucks about how you think your code should be formatted. There are code formatters for many languages even Javascript has quite a few of them. Originally from the Javascript ecosystem, Prettier is a code formatter which means it takes your code and makes it – as its name suggests – prettier. Iowa Code Camp 2023 – 10 Things I Do On Every.Iowa Code Camp 2023 – Creating a Healthy, High Performing Engineering Organization.If you’d like to learn more about how to enforce Prettier via git commit hooks, checkout my blog post on Husky and Lint Staged with Prettier that even works with nested folders.ĭirector of Engineering at Lean TECHniques Inc I end up with consistent formatting across my entire project instead of just doing whatever I felt was best at the time. I don’t ever wonder “oh should I put this on multiple lines or keep it all in one line?” Instead, I focus on solving my problem, hit Save and let Prettier do the rest. I find when using Prettier, along with the Format On Save option in VS Code, I don’t think about how to format my code anymore. Formatting is something I never worry about anymore The rest of the Prettier configuration options can be found here. That way anytime you or someone else works on that codebase, everyone is using the same settings. prettierrc file, especially when you’re on a team. Note: you can configure these settings directly in VS Code as well without a config file, but I think it’s better to use a. Now start saving your files and watch Prettier in action.Note how VS Code gives autocompletion for the different settings within Prettier.Add a new object with a tabWidth property and a value of 4.prettierrc file in the root of your project next to your package.json You can increase that to the VS Code default of 4 if you want extremely easily. Search for Format On Save and check the boxīy default Prettier uses 2 spaces for your tab width for indenting your code.Note: Make sure you have prettier installed in the project you’re working in or globally via npm install prettier -g Format on Save in VS Code It also respects the Format on Save option I mentioned in my last blog post. The Prettier -JavaScript Formatter plugin for VS Code simply shells out to Prettier. It can do CSS, LESS, SASS, TypeScript, JSX, Markdown, and more as well. While I only mentioned JavaScript so far, technically Prettier can do more than just JavaScript. For instance, Prettier will make a short const array declaration a one liner, but a declaration with a bunch of items in the array, it will split out into multiple lines to avoid horizontal scrolling (see demo GIF at the end). ![]() It makes some “logical” choices that I would make myself. One of the things I love about it is it’s not completely rigid with its rules. Prettier takes JavaScript code in, runs some of its formatting rules against it, and then spits out that JavaScript code with its formatting rules applied. Prettier is an open source project (originally started by James Long) that is an opinionated JavaScript formatter. ![]() I’d like to take that one step further and mention how you can combine that with the Prettier – Javascript Formatter plugin for VS Code to make a really nice editing experience. In my last post, I mentioned a tip to using the Format on Save option in VS Code. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |