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. Find "Toggle Line Comment" and click on the pencil icon to edit it.In my last post, I mentioned a tip to using the Format on Save option in VS Code. Type in "keyboard" and select "Preferences: Open Keyboard Shortcuts"ģ. If for some reason you want to change the default key binds for commenting and uncommenting in VS Code, you can follow these steps: 1. Changing the comment key binds in VS Code unless of course you rebound the slash shortcut to do something else. Like I said, I think these commands are a lot less handy, and I don't think there's ever a good reason to them over the slash one. So, if you keep executing (CTRL + K + C), the comments will keep piling up, as shown in the screenshot below. They do not toggle code like the slash shortcut. The main difference with these commands is that they each only have a single purpose. There's one other way to comment and un-comment, but it's not as handy.Ĭomment out code (): To toggle a VSCode comment block, you can use : If you want to comment out multiple lines of code within the same comment, this is what you're looking for. These are comments which span multiple lines of code (a block). Some programming languages support block comments. I use this command constantly and can't imagine not having it. Once you do it a few times it will become muscle memory and boost your productivity. Select the code that is currently commented-out and execute the shortcut. You can also uncomment using the same command. Execute the shortcut that corresponds to your platform.Select the text or code that you want to comment out.This is probably the most useful shortcut in here. This is the other main usage of comments. The VSCode comment shortcut Mac is very similar to the Windows version. Then, use the VS Code comment shortcut that corresponds to your platform below. You'll use this mainly to add information to the flow of your program that will help your future-self and your colleagues understand what's going on.įirst, place your cursor where you'd like to add the comment. Here's how to do both in VS Code: Create a Comment in VSCode, the easy way. Add information that gives context to your code. This comes in handy when debugging your program. The other great use-case of comments is quickly disabling one or multiple lines of code. Every comment you write could save you and your colleagues some back and forth on slack. This is especially useful if you work on a large team with lots of people. When building out complex functionality, sometimes I'll even write out the whole function in pseudo-code comments before writing any code.Ĭomments make code more readable and understandable. I don't know of a programming language that does not support comments.Ĭode-comments are incredibly useful.
0 Comments
Leave a Reply. |