The advantages of a quicker workflow might be great whether you’re a seasoned web developer or just starting started. In this tutorial, we’ll examine how to set up Visual Studio Code for the best workflow possible.
There are many fantastic features integrated into Visual Studio Code, but when you combine them with the sizable (and expanding) library of extensions, you end up with hundreds of options to personalise your experience.
Note: If you have trouble with your assignment, take our Visual Studio Assignment Help From Experts.
Although this is one of VS Code’s greatest assets, it may also be intimidating, especially for less experienced users. The goal of this post is to cut through the clutter. I’ll outline the most effective methods I employ on a daily basis to complete my work as quickly and efficiently as possible.
Emmet Abbreviations
These helpful built-in VS Code shortcuts speed up the creation of HTML (and CSS) considerably.
Preparing Your HTML File
There are several options to fill in the initial data required for your file when you type html in any file. You can select an option by pressing the up or down arrows; after expanding the shortcut, press tab to see something similar.
The Integrated CLI (Command Line Interface)
The integrated terminal or CLI feature in VS Code eliminates the need to switch between windows. You only need to hit CNTRL +’or CMD +’to open it and the same key combination to close it. It will open immediately in the directory that you now have open in Visual Studio Code, saving you from having to navigate like you would in a conventional terminal.
This makes it simple to install NPM or Yarn dependencies, commit files to Git, push files to Github, and do any other command-line tasks you would need to!
ESLint
ESLint is a strong and well-known linting tool that helps you find problems in your code as you write it, repair them as you go, and adhere to accepted best practises. It’s also an excellent tool for learning since I’ve learned a lot of best practises from investigating ESLint mistakes that I didn’t know before and it’s helped me realise why they are better practises.
You can use the ESLint extension in VS Code or add it as a node package for each project. The second option is quick and simple, and it won’t prevent you from later using particular ESLint configurations for specific projects. Install the Dirk Baeumer-created ESLint plugin by simply searching for it.
Prettier
An opinionated code-formatter is prettier. It recommends a specific formatting method as the proper one, but due to its popularity, JavaScript, CSS, and an increasing number of other languages are adopting its rules as a standard.
While Prettier and ESLint do have some overlap, Prettier is ultimately more concerned with formatting correction while ESLint is more concerned with identifying errors. They complement one another very well, and there is an integration to make things go as easily as possible.
Multi-Cursor Shortcuts
Multiple cursor editing can be extremely time-efficient. A few commands must be committed to memory in order to use this tool most efficiently, but they will soon come naturally.
The Basics
Holding Alt or Option while clicking the desired location will allow you to manually add new cursors. By hitting Escape, you can return to a single cursor. These two commands can help you save a tonne of time. There’s more, though!
Text Wrap
Rarely do I want my text to go over the edge of the screen, requiring me to utilise the dreadful horizontal scroll. By pressing ALT + Z, you may turn per-file wrapping on or off.
You may also set text-wrapping as the default if you’re like me and seldom ever want to turn it off. Simply enter the following code into settings.json, and your content will automatically wrap:
Execute and Debug JavaScript
Within Visual Code studio, there are several fantastic tools for running and debugging JavaScript.
A freemium application called Quokka enables you to view the activity in your JavaScript in real time. It calls itself a “live scratchpad” and provides a quick visual aid for you to verify that your code is operating as intended.
Press CNTRL + K, Q or CMD + K, Q to start (or restart) Quokka on an existing JavaScript file after installation.
Wrap Up
I hope the features covered in this article have helped you speed up your VS Code workflow or, if you’re new to VS Code, get a solid setup from the outset. They are extremely useful for any web development set-up.
