Application of vscode workspace (solve the problem of disabling and enabling vue2 plug-in vetur and vue3 plug-in volar)

Preface

Workspace? ? ? Why a workspace? ? ?

First of all, the workspace is simply understood to be the area and range when vscode works;
to expand on it, why do we need a workspace? ? ? Different environments require different plug-ins, settings, etc. How to implement this? When writing the front-end, you cannot also turn on the plug-in settings required by Java and C++ (although it should be possible and maybe these languages ​​​​will not be used) vscode development, this is just an analogy), if you open them all, vscode will appear to be very heavy, and what about the lightness that vscode promised?

As far as the front-end is concerned, the development speed is very fast now. Some time ago vue2, it is almost the same now vue3+TS, but the company still vue2has projects, vue2and the plug-ins vue3used vueare different. vue2 needs vue plug-ins vetur, vue3 needs vue plug-ins volar, and Required 禁用vue2 插件 vetur;
 
so how to deal with it? You can't open the vue2 project and then turn off the vue3 plug-in volar. When developing a vue3 project, turn off the vue2 plug-in vetur. It's so troublesome. You can turn it off if you don't mind it. But if you need to develop at the same time How do you handle vue2 and vue3 projects? ? ?

At this time, the workspace comes out, which perfectly solves this problem. Below is a step-by-step solution to this problem.
This is just for the front-end vue.

Create workspace

• Click on the file in the workbar at the top of vscode and choose to save workspace as
  
• Then enter the file name of the workspace in the pop-up window (note that the path to save the workspace file is selected, here is a customized save path)
  
• After clicking Save, the workspace is successfully created.

After the workspace is successfully created, how to put the corresponding project files into the workspace? ? ?

Add folder to workspace

After creating the workspace, the newly created workspace will be opened by default. The

left navigation will show it 尚未将文件夹添加到工作区. Click directly to open the folder, select the project folder you want to add to this workspace and you are done.

How to continue adding? ? ?

Click File - Add Folder to Workspace. The same operation as before. Just select the project folder you want to add to this workspace.

Specify a specific environment for the currently open workspace

For example:
vue2 requires the vue plug-in vetur
vue3 requires the vue plug-in volar, and the vue plug-in vetur needs to be disabled

How to set it up? ? ?

It's also very simple. After opening the corresponding workspace, click on the extension on the left, find the corresponding plug-in, click on the gear setting button of the plug-in, click on the corresponding, and you can achieve 禁用(工作区)it 启用(工作区)!

Note:
禁用(工作区), 启用(工作区)you need to see clearly which workspace you are currently opening.

For example:

• vue2 workspace
  
• vue3 workspace
  

In the screenshot, the highlighted plug-ins are enabled in the workspace, while the dimmed plug-ins are disabled in the workspace; this
avoids the need to disable and enable back and forth, and directly set the environment of the workspace, perfectly solving the problem.

Delete folder from workspace

It is also very simple. Just right-click and select the project folder-delete the folder from the workspace to solve the problem.

How to switch workspaces

Two methods:

• File - Open a workspace from a file and select the workspace you want to open
  

• File - Open recent files and select the workspace you want to open (it must be followed by the word "workspace")