Table of Contents
code practical function
Open the latest session
Open a specific project
Jump to the line of the file
code installation
Summary
Home Development Tools VSCode A brief analysis of the VSCode CLI tool, it turns out to be so useful!

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

Sep 08, 2022 pm 08:34 PM
vscode

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:

1

$ code

Copy after login

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.

1

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

Copy after login
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:

1

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

Copy after login
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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to view word documents in vscode How to view word documents in vscode How to view word documents in vscode How to view word documents in vscode May 09, 2024 am 09:37 AM

First, open the vscode software on the computer, click the [Extension] icon on the left, as shown in ① in the figure. Then, enter [officeviewer] in the search box of the extension interface, as shown in ② in the figure. Then, from the search Select [officeviewer] to install in the results, as shown in ③ in the figure. Finally, open the file, such as docx, pdf, etc., as shown below

How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code How to draw a flow chart with vscode_How to draw a flow chart with visual_studio code Apr 23, 2024 pm 02:13 PM

First, open visual studio code on the computer, click the four square buttons on the left, then enter draw.io in the search box to query the plug-in, click Install. After installation, create a new test.drawio file, then select the test.drawio file, enter the editing mode on the left There are various graphics on the side. You can draw the flow chart by selecting at will. After drawing, click File → Embed → svg and then select Embed. Copy the svg code. Paste the copied svg code into the html code. Open the html web page and you can see it. Click on the picture on the web page to jump to the flow chart. On this page, you can zoom in and out of the flow chart. Here, we choose to click on the pencil pattern in the lower right corner to jump to the web page.

How to write Maude in Vscode_How to write Maude in Vscode How to write Maude in Vscode_How to write Maude in Vscode Apr 23, 2024 am 10:25 AM

First, you can search for the Maude plug-in in the vscode plug-in manager. Then, create a new file with the extension maude to use maude's code snippets and syntax highlighting. Terminal -> New Terminal can open the vscode built-in terminal in the current folder to run the maude or full-maude program. In maude's official tutorial, there are also examples of http clients, which can be called and run as shown in the figure. If you want to associate files with the fm extension, open settings, search for fileassociations in user settings, and open settings.json. Just add an entry to the file association, that is, the entry from *.fm to maude. But full

Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated Caltech Chinese use AI to subvert mathematical proofs! Speed ​​up 5 times shocked Tao Zhexuan, 80% of mathematical steps are fully automated Apr 23, 2024 pm 03:01 PM

LeanCopilot, this formal mathematics tool that has been praised by many mathematicians such as Terence Tao, has evolved again? Just now, Caltech professor Anima Anandkumar announced that the team released an expanded version of the LeanCopilot paper and updated the code base. Image paper address: https://arxiv.org/pdf/2404.12534.pdf The latest experiments show that this Copilot tool can automate more than 80% of the mathematical proof steps! This record is 2.3 times better than the previous baseline aesop. And, as before, it's open source under the MIT license. In the picture, he is Song Peiyang, a Chinese boy. He is

How to enable background updates in vscode How to enable background updates in vscode How to enable background updates in vscode How to enable background updates in vscode May 09, 2024 am 09:52 AM

1. First, after opening the interface, click the file menu in the upper left corner. 2. Then, click the settings button in the preferences column. 3. Then, in the settings page that jumps, find the update section. 4. Finally, click the mouse to check and enable it. Download and install the new VSCode version button in the background on Windows and restart the program.

How to add files to vscode workspace How to add files to vscode workspace How to add files to vscode workspace How to add files to vscode workspace May 09, 2024 am 09:43 AM

1. First, open the vscode software, click the explorer icon, and find the workspace window 2. Then, click the file menu in the upper left corner and find the add folder to workspace option 3. Finally, find the folder location in the local disk , click the add button

How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode How to disable wsl configuration file in vscode May 09, 2024 am 10:30 AM

1. First, open the settings option in the settings menu. 2. Then, find the terminal column in the commonly used page. 3. Finally, uncheck the usewslprofiles button on the right side of the column.

How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion How to set animation smooth insertion in VScode VScode tutorial to set animation smooth insertion May 09, 2024 am 09:49 AM

1. First, after opening the interface, click the workspace interface 2. Then, in the open editing panel, click the File menu 3. Then, click the Settings button under the Preferences column 4. Finally, click the mouse to check the CursorSmoothCaretAnimation button and save Just set it

See all articles