VSCode Getting Started Tutorial (Introduction)

Which front-end development tool is the best? Of course it’s Visual Studio Code! She is from Microsoft, what do you think? And she's free!

Extensible and customizable. (Extensible and customizable, that’s why I like it)

Want even more features? Install extensions to add new languages, themes, debuggers, and to connect to additional services. Extensions run in separate processes, ensuring they won't slow down your editor.

Why use VS Code

Represented by JavaScript, when we debugged JS in the past, we needed to use the browser F12, and the code needed to use console.log or alert to output the process. Developers who are used to the VS compiler, for example, will not be used to it. Now you can use VS Code for development. It is open source and free. By installing development language-related plug-ins, VS Code can realize corresponding syntax recognition and code prompts. Currently, the expansion store has provided plug-ins for most programming languages, which can be downloaded at will. Commonly used scripts include JScript, EScript, and other languages including PHP, Python, etc.

VS Code installation

Visual Studio Code (herein referred to as VS Code) Download address: https://code .visualstudio.com/

launch.json Introduction

launch.json is a configuration file automatically generated by VSCode in the current development directory. During development, according to the type of project, configure the path to start the program and the running environment, as shown in the figure below, which describes the path of the file that currently needs to be debugged as "${workspaceFolder}/scripts/debug.js", and the program uses node for debugging.

Click the Add Configuration button to see more configuration options. The option list is related to the currently installed extensions, such as after installing Chrome.

The specific meanings of some predetermined variables in launch.json are as follows

${workspaceRoot} The path of the folder opened in VSCode

Original text: the path of the folder opened in VS Code

${workspaceRootFolderName} The path to the folder opened in VSCode, but does not contain "/"

Original text: the name of the folder opened in VS Code without any solidus (/)

${file} The currently opened file

Original text: the current opened file

${relativeFile} The currently opened file (relative to workspaceRoot)

Original text: the current opened file relative to workspaceRoot

${fileBasename} The file name of the currently opened file, without extension

Original text: the current opened file's basename

$ {fileDirname} The directory name of the currently opened file

Original text: the current opened file's dirname

${fileExtname} The extension of the currently opened file

Original text: the current opened file's extension

${cwd} The working directory of the currently running task (startup directory)

Original text: the task runner's current working directory on startup

Developed using VS Code Javascript

##Install Script plug-in

Use ECMAScript to develop, install ESLint

Use TypeScript to develop, install TSLint

Use Javascript development, install jshint

Debug Script

1. Debug environment, use node compilation environment.

　 2. Configure launch.json

　{

　　"type": "node",

　　"request": "launch",

"name": "Launch Program",

"program": "${workspaceFolder}/scripts/debug.js" ?//Reference the js file that needs to be tested to debug.js through require By calling, you can simulate the button click effect or test the algorithm

　}

3. Switch to the debug page and start debugging, as shown in the figure:

How to set it to Chinese

Press the shortcut key Ctrl shift p on the keyboard, and a command box will appear, as shown in the figure:

Input configure language

Finally, in the newly opened language configuration file, change locale: "en-us" to locale: "zh-cn" and restart , the configuration is completed, as shown in the figure:

Recommended tutorial:vscode introductory tutorial

The above is the detailed content of VSCode Getting Started Tutorial (Introduction). For more information, please follow other related articles on the PHP Chinese website!