" }4.
PrettierPrettier is an opinionated code-formatter.
It prescribes a certain formatting style as the correct one, but its popularity is making its rules something of an established standard for JavaScript, CSS, and increasing numbers of other languages.
There is overlap between Prettier and ESLint, but ultimately ESLint is more focused on spotting errors and Prettier is more focused on correcting formatting.
They work great together, and there’s an integration to help make this as smooth as possible.
The extension we want is “Prettier — Code formatter” by Esben Peterson.
To enable the ESLint integration, add the following code to settings.
json :{ "prettier.
eslintIntegration": true }Format on SaveOnce it’s installed, we can press Shift + Alt + F or Shift + Option + F and Prettier will immediately shift our JavaScript (or CSS) into place.
I prefer to format automatically every time I save.
To make that the default, add this code to settings.
json :{ "editor.
formatOnSave": true }Other LanguagesAnd you can also use Prettier for more languages than just JavaScript or CSS.
It has a growing list of community plugins, which support languages including Java, Ruby, and — WordPress developers rejoice — PHP.
(These don’t come out-of-the-box, so you’ll have to install them separately.
)5.
Multi-Cursor ShortcutsThe ability to edit with multiple cursors can be a huge time saver.
To use this most effectively requires memorisation of a handful of commands, but they’ll soon become second nature.
The BasicsTo manually add new cursors, hold Alt or Option and then click wherever you want a new cursor.
You can go back to a single cursor by pressing Escape .
With those two commands, you can save a lot of time.
But there’s more!Column SelectionBy holding down Shift + Alt or Shift + Option while you drag your mouse, a new cursor will be added to the end of each selected line.
Immediately Above or BelowTo add new cursors immediately above or below the current cursor, you can use CTRL + Alt or CMD + Option and then add the up or down arrow keys.
Select All Identical CodeBy highlighting a section of code and pressing CTRL + Shift + L or CMD + Shift + L , you can immediately add a new cursor at the end of every identical section of code.
Select Identical Code One-by-OneIn cases where you don’t want all identical code, you can use CTRL + D or CMD + D to highlight identical text one-by-one.
Note: Keymap ExtensionsIf you’ve got accustomed to another text editor’s set of keybindings, chances are there’s an extension for that.
Instead of losing time learning a new set of keybindings, go to Preferences > Keymaps to see a list of the relevant extensions.
Note that many of the shortcuts described in this article will change when you install a different keymap.
If you ever want to go back to the default, simply find the relevant extension(s) and disable them.
6.
Text WrapThere aren’t many cases where I’d prefer my text to run off the screen, forcing me to use the dreaded horizontal scroll.
To toggle wrapping on or off on a per-file basis, simply press ALT + Z .
Or, if you’re like me and almost never want to turn text-wrapping off, you can make it the default.
Inside settings.
json, simply paste in the following code, and your text will wrap by default:{ "editor.
wordWrap": "on" }7.
Execute and Debug JavaScriptThere are several great options for executing and debugging JavaScript within Visual Code studio.
Quokka.
jsQuokka is a freemium tool that helps you see what’s going on in your JavaScript in real time.
It describes itself as a “live scratchpad”, and it gives you a quick visual aid to check that your code is doing what it’s supposed to.
Once it’s been installed, press CNTRL + K, Q or CMD + K, Q to start (or restart) Quokka on an existing JavaScript file.
Debugger for ChromeThe best choice for debugging JavaScript within VS Code is Microsoft’s own “Debugger for Chrome” extension.
How it works can be a little complex, so I recommend you take a look at the official documentation if you want to learn more.
Suffice to say that this is a powerful tool, and it was a real eye-opener for me when I discovered it — it will take you a lot further than console.
log() !Code RunnerIf the above options seem a little involved and you’d prefer a simple way to run code snippets or files, I recommend the Code Runner extension by Jun Han.
It covers a large number of languages, and with a simple command ( CTRL + Alt + N or CMD + Option + N) you can get see the output of your code at the bottom of the screen.
For JavaScript, it’s like having a browser console integrated into VS Code.
ConclusionThe features discussed in this article are extremely useful for any web development set-up, and I hope they’ve helped you make your VS Code workflow as fast as possible — or, if you’re new to VS Code, get a strong set-up from the start.
Other ResourcesIt is a credit to VS Code’s developers that it has so much to offer, and there are countless other ways to augment and customise your experience even further.
If you’d like to find out more cool features, I recommend reading:Visual Studio Code’s official tips and tricksThe VS Code Can Do That?.websitesettings.
jsonLastly, if you’ve followed this article and want to check that your settings.
json file looks the same as mine, you should end up with something like this.
(I’ve also included the theme from the cover photo: Ayu One Dark Pro | Mirage, by smeagolem.
){ "emmet.
syntaxProfiles": { "javascript": "jsx", "xml": { "attr_quotes": "single" } }, "terminal.
integrated.
shell.
windows": "C:Program FilesGitbinbash.
exe", "eslint.
autoFixOnSave": true, "files.
eol": ".", "prettier.
eslintIntegration": true, "editor.
formatOnSave": true, "editor.
wordWrap": "on", "workbench.
colorTheme": "Ayu One Dark Pro | Mirage",}If you have any questions, I’d be very happy to answer them in the comments.
.