A brief analysis of the VSCode CLI tool, it turns out to be so useful!

Speaking of the vscode CLI tool, you may be unfamiliar with it because it is not necessary in daily work. But since some of its functions are quite practical, and some of my recent technical ideas can just be realized with the help of it, this article will talk about the practical functions of VSCode CLI. [Recommended study: "vscode introductory tutorial"]

The shell command of VSCode CLI is called code, and code will be used later to refer to VSCode CLI tools.

code practical function

Open the latest session

codeWithout any options or Parameter execution will open the latest session of VSCode. For example, if you recently opened projectA, no matter whether projectA is covered by other windows or you have exited VSCode, the following command can quickly open projectA:

$ code

If you are using the shell, this command should help you quickly open VSCode or locate the file you just edited.

Open a specific project

Here I would like to ask you how you usually use VSCode to open a project. Do you follow the following steps?

• Click on the VSCode icon

• Click on the menu bar File

• Click on Open

• Find and open it in Mac’s Finder

I’m not, I’m used to using the shell, and I think command line operations are faster than searching in Finder.

code . command is what I usually use the most. It can quickly open the project in the current directory in VSCode.

All my projects are placed in a fixed directory, so I only need to cd to the project directory first, and then execute code ..

Of course, you can also use code <folder> to open the project, the effect is the same.

Jump to the line of the file

##code -g ::The command can be fast Jump to a certain character in a certain line of the file. For example, the following command will open the index.ts file, and position the cursor at line 18, before the character index is 8.

$ code -g /project-path/src/index.ts:18:8

Some current dev tools such as

react-dev-inspector and vue-devtools allow developers to click on DOM elements to open and locate them in VSCode to the corresponding source code location. The principle is to obtain the location information of the source code when the dev server is running and insert it into the DOM element. Then when the developer clicks on the DOM, the location information is sent to the dev server. The dev server then calls the code ability to jump to the source code. .

File comparison

If you want to quickly compare two files, you can use the following command:

$ code -d file-path-a file-path-b

This pair is used to using VSCode to compare file differences and It may be more useful for students who resolve conflicts.

Plug-in operation

This is my favorite feature that I have discovered recently, including the following points:

• code --list -extensions --show-versions: List all installed plug-ins in the form of .@;
• code --install-extension : To install the plug-in, you can add the --force option to prevent pop-up prompts;
• code --uninstall-extension : Uninstall the plug-in.

Imagine if you were asked to develop a front-end engineering scaffolding, what would you do?

Imitate most scaffolding on the market, and of course provide users with configurations related to code formats such as editorConfig, eslint, prettier, etc. But after completing these, the scaffolding only scores 90 points. In fact, in order for eslint to take effect, users must install the corresponding VSCode plug-in and configure

settings.json.

settings.json Fortunately, you can create settings.json in the .vscode directory to share configurations among team members and overwrite local Configuration, saving team members the trouble of manual configuration and avoiding the problem of inconsistent development configurations.

As for the VSCode plug-in, generally speaking, we let users install it themselves or it is already installed by default. But for front-end novices or new colleagues, this is undoubtedly painful, and it is also intolerable to excellent scaffolding developers. At this time, the above commands come into play.

--list-extensions Check whether the user has installed a plug-in. If not, use --install-extension to install it.

It is conceivable that with the help of the above commands for operating plug-ins and .vscode, the scaffolding can help users configure the development environment completely without any sense, and can ensure that everyone in the team has the same configuration. Yes, don't worry that one day a new colleague will come over and say that his eslint does not take effect.

Note: The commands related to plug-in operations are a bit powerful, so use them with caution.

code installation

Some students may say that to make code effective, you must not manually install codeIs the command installed on the global environment variable PATH?

This is like this on Mac, but we can also call code directly through the path /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code .

For Windows and Linux systems, code will be automatically added to PATH when VSCode is installed, and code can be called directly.

Therefore, scaffolding can be encapsulated to prevent users from manually adding environment variables.

Summary

This article only introduces some functions of VSCode CLI that I think are more practical. Other functions such as switching languages ​​and performance monitoring are not introduced. You can jump to the official website through the link in the information at the end of the article to view it.

Recently, I have been simply encapsulating code related commands, hoping to provide a set of basic capabilities for direct calls to other node projects. The project address is: github.com/avennn/vsc -…, everyone is welcome to use and PR. If you think it is good, you are welcome to give it a star.

For more knowledge about VSCode, please visit: vscode tutorial!

The above is the detailed content of A brief analysis of the VSCode CLI tool, it turns out to be so useful!. For more information, please follow other related articles on the PHP Chinese website!