Practical lesson on Visual Studio Code for the first time

Install Visual Studio Code:

You can download Visual Studio Code from the official website: https://code.visualstudio.com/. Follow the installation instructions for your operating system.

1. Create a new project:

   Create a new directory for your project and navigate into it.

2. Initialize a new JavaScript project:

   Open Visual Studio Code and open the project directory. Open the integrated terminal by clicking on “View” > “Terminal” or by using the shortcut “Ctrl + `”. In the terminal, initialize a new JavaScript project by running the following command:

   npm init -y

1. This will create a package.json file in your project directory.

2. Create a jsconfig.json file:

   In the root of your project, create a jsconfig.json file to enable IntelliSense and type checking for your JavaScript files. Add the following code to the jsconfig.json file:

{
“compilerOptions”: {
“checkJs”: true
},
“exclude”: [“node_modules”, “**/node_modules/*”]
}

1. Create a src directory:

   Create a src directory to store your JavaScript files.

1. Create a .vscode directory:

   Create a .vscode directory in the root of your project to store your Visual Studio Code settings.

2. Create a launch.json file:

   In the .vscode directory, create a launch.json file to configure the debugger. Add the following code to the launch.json file:

{
“version”: “0.2.0”,
“configurations”: [
{
“type”: “node”,
“request”: “launch”,
“name”: “Launch Program”,
“program”: “${workspaceFolder}/src/index.js”,
}
]
}

1. This will configure Visual Studio Code to launch your JavaScript program using the index.js file in the src directory.

2. Create a tasks.json file:

   In the .vscode directory, create a tasks.json file to configure your build tasks. Add the following code to the tasks.json file:

{
“version”: “2.0.0”,
“tasks”: [
{
“label”: “build”,
“type”: “shell”,
“command”: “tsc”,
“args”: [“-w”],
“group”: {
“kind”: “build”,
“isDefault”: true
},
“presentation”: {
“reveal”: “always”
},
“problemMatcher”: “$tsc”
}
]
}

1. This will configure Visual Studio Code to build your JavaScript project using the TypeScript compiler (tsc) and watch for changes.

2. Create a src/index.js file:

   Create a src/index.js file to write your JavaScript code. Add the following code to the src/index.js file:

console.log(“Hello, world!”);

1. Run the program:

   Click on “Debug” > “Start Debugging” or use the shortcut “F5” to run the program. You should see “Hello, world!” printed in the integrated terminal.

That’s it! You’re now ready to start using Visual Studio Code for your JavaScript project. Let me know if you have

About Author

SURF

See author's posts