10 advanced VSCode configurations worth collecting (share)

This article will share with you 10 advanced VSCode settings.json configurations. Come and collect them. I hope it will be helpful to everyone!

Soul torture: How many lines does your VS Code settings.json file have?

After checking, there are more than 60 lines. Some of them look unfamiliar, and I don’t know what they are configured for; ╮(╯▽╰)╭

This article brings 10 settings.json High (installation) level (cup) configuration items~

1. Hide the activity bar

VS Code left icon The list is the "activity bar". We can click on the icon to jump to each module. We can control the display of the activity bar by configuring workbench.activityBar.visible. [Recommended learning: "vscode tutorial"]

If you want to restore the display, you can customize the shortcut keys to display this space again;

How to set shortcut keys: keybindings

We can use Ctrl B to hide/show the file explorer, Use Ctrl Alt B to hide/show the activity bar;

Although, you can also search in the command panel Ctrl Shift P, but it is more convenient to use the shortcut keys Cup effect~

When the activity bar is hidden, we can also jump to different workspaces through shortcut keys, such as Ctrl Shift E (jump to the file explorer), Ctrl Shift An extension that can generate snippets of code when you write code; Because it is artificial intelligence and machine learning, it may produce some code you don't like, but please don't hate it, after all, AI coding is Future trend!

For privacy reasons, it is recommended not to use Copilot at work, but you can use it in personal projects, it is interesting and useful, especially for unit testing;

You can configure Copilot in

settings.json

;

3. Font and scaling

I won’t explain this much, just adjust the text size and scaling according to your own needs Configuration;

Of course, you don’t have to write this configuration in

settings.json

, you can also do it in the options and input configuration window configuration.

4. No drag/delete confirmation

If you are confident enough in your programming skills, or confident enough in VS Code’s

Ctrl Z, you can configure cancellation Delete confirmation; because drag/delete confirmation sometimes interferes with ideas~

5. Self-updating absolute path

## One of the best features of #VS Code is that its file importing is friendly, using absolute paths, for example: @/components/Button

is easier than

../../Button People are comfortable;

When moving files and reorganizing directories, do you want VS Code to automatically update the path of the file? You can configure them:

#Please note that you need to configure the path in the .tsconfig/.jsconfig file to use absolute path imports.

6. Save and execute

Anyone who has configured ESLint and saved and corrected it should know this configuration. This is very powerful. With

fixAll, you can also

addMissingImports

to add missing Imports, or other actions you want to perform after saving;

This configuration is like programming magic~7. CSS formatting

You may already be using Stylelint, if not, please set it in the configuration!

Another setting is editor.suggest.insertMode, which when set to "replace" means - when you select a prompt and press Tab or Enter, the Replaces the entire text with a hint, which is very useful.

8. Turn on Emmet

You may be familiar with Emmet - the essential toolkit for web developers, if not, please set it up; although it is built into VS Code, But it must be configured and enabled manually;

9. Tailwind CSS

Tailwind CSS is a functional-first CSS framework that integrates functions such as flex Classes like , pt-4, text-center and rotate-90 can be combined directly in the script markup language to build come up with any design.

Although it is not currently built into VS Code, it can be installed and used as a free VS Code extension, and additional settings can be configured to enhance its functionality!

10. Click to open the file

There is a strange phenomenon in the default user interface of VS Code. It needs to be double-clicked to open it from the file explorer. document.

What you get with one click is the weird "preview" mode where the first file disappears when you click on the next file. It's like there's only one label.

#This configuration is required. After closing, clicking will open the file in a new tab. Problem solved~

Use Settings Sync to synchronize the configuration. You can personalize and customize it wherever you go! cool!

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of 10 advanced VSCode configurations worth collecting (share). For more information, please follow other related articles on the PHP Chinese website!