5 Time Saving VS Code Setting You Need To Do Right Now

Introduction 

This article is meant for absolute beginners of Visual Studio Code and web development, Others may not find this article useful. Developing a website in the most popular programming environment, Visual Studio Code, requires a developer to do some repetitive tasks such as saving, refreshing the web page and typing the same code, etc… 

In this article, I would like to introduce you to some technique which will help you to do it more easily.

How to edit your setting

Your VS Code settings are conveniently stored in a JSON file called settings.json.

To edit your settings in settings.json, start by opening the Command Palette with CMD/CTRL + SHIFT + P.

From the Command Palette, you have a choice between two commands that edit your settings:

  • The Open Settings (JSON) command will let you directly edit the settings JSON file.
  • The Open Settings (UI) command will open a user friendly Ul to edit the settings JSON file indirectly.

SAVE TIME BY AUTOMATICALLY FORMATTING PASTED CODE

If you use a formatter, such as Prettier or Beautify, you can force VS Code to format text whenever its pasted into a file by changing the editor’s format on paste setting to true:

"editor.formatOnPaste": true

By automatically formatting, you can save yourself an extra click with every paste.

SAVE EVEN MORE TIME BY AUTOMATICALLY FORMATTING ON SAVE

In addition to being able to format on paste, VS Code lets you format each time you save a file. Similar to formatting pasted text, formatting on save requires a formatter, such as Prettier or Beautify.

"editor. formatOnSave": true

Saving on format also ensures consistent styling across your files. Worry less about properly formatting your code.

CLEAN UP YOUR FILES AND TRIM EXTRA NEWLINES

When a file is saved, VS Code will trim any extra newlines at the end of the file.

"files.trimFinalNewlines": true

I’m guilty of accumulating empty lines at the end of files, so it’s great to have things automatically cleaned up.

SUPERCHARGE THE FILE EXPLORER BY SORTING YOUR FILES BY TYPE OR RECENT CHANGES

By default, VS Code will sort files in the file explorer alphabetically, but there are other options available as well.

"explorer.sortOrder": "type"

Changing the sorting order to type will group files with similar extensions together, while changing the sorting order to modified will put your most recently modified files at the top. (Another option is filesFirst)

ENTER A NEW LINE WITHOUT ACCEPTING A SUGGESTION

By default, VS Code allows you to accept suggestions using either the Enter or Tab key.

Accepting suggestions with Enter can be turned off (or changed to smart which accepts a suggestion with Enter when it makes a textual change).

"editor.acceptSuggestionOnEnter": "off"

The switch can help avoid ambiguity between inserting new lines and accepting suggestions.

Do you use the time saving technique…

Let’s us know in the comments section.

Happy Coding…

About us: Codelivly is a platform designed to help newbie developer to find the proper guide and connect to training from basics to advance .

Leave a Comment