You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: VSCodeTips/README.md
+36-48Lines changed: 36 additions & 48 deletions
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,17 @@
1
1
# VSCode Tips
2
2
3
+
Although you are free to make you own choice of text/code editor to use during class and homework, we have good experiences with Microsoft's free Visual Studio Code (VSCode) editor.
4
+
5
+
From the [VSCode web site](https://code.visualstudio.com/):
6
+
7
+
> Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
8
+
3
9
Here are some tips for getting up to speed with VSCode as you progress through this course.
4
10
11
+
## Installation
12
+
13
+
Download and install the appropriate version of VSCode for your operating system from the [VSCode web site](https://code.visualstudio.com/).
14
+
5
15
## Some useful extensions
6
16
7
17
VSCode can be extended with _extensions_. There are two that we recommend you install from day 1.
@@ -21,10 +31,8 @@ VSCode can be extended with _extensions_. There are two that we recommend you in
@@ -39,6 +47,26 @@ VSCode can be extended with _extensions_. There are two that we recommend you in
39
47
40
48
9. Once the installation has finished close VSCode for now.
41
49
50
+
## Customise VSCode Settings
51
+
52
+
We recommend that you apply two changes to the default settings of VSCode to help you create well-formatted JavaScript code. Follow these steps:
53
+
54
+
1. Press the cog-wheel icon in the lower-left corner of the VSCode screen, as indicated here:
55
+
56
+
57
+
58
+
2. From the menu, select **Settings**.
59
+
3. In the `USER SETTINGS` tab in the right-hand half of the screen add the two lines indicated below between the curly braces:
60
+
```json
61
+
/// Place your settings in this file to overwrite the default settings
62
+
{
63
+
"editor.formatOnType": true,
64
+
"editor.formatOnPaste": true
65
+
}
66
+
```
67
+
68
+
4. Close the User Settings tab.
69
+
42
70
## Using VSCode for your homework
43
71
44
72
You’ll get the most out of VSCode if you organise your work in folders, say a folder for each week in the JavaScript module.
@@ -107,55 +135,15 @@ Here are some short-cut commands that you will use many times a day and that we
107
135
108
136
## Running and debugging your code with the VSCode Node debugger
109
137
110
-
If your JavaScript program is contained in a single file the easiest way to run and examine your code is the start straight in VSCode. Before you can run it you need to do a small preparation. This needs to be done only once per project folder.
111
-
112
-
1. As illustrated in the figure below, press the **Debug** button in the left margin as indicated by the red triangle.
3. Next you will prompted to select an environment. Choose `Node.js`. This produces a JSON file, displayed in a new editor tab with a contents as shown below.
121
-
122
-
```
123
-
{
124
-
// Use IntelliSense to learn about possible Node.js debug attributes.
125
-
// Hover to view descriptions of existing attributes.
126
-
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
127
-
"version": "0.2.0",
128
-
"configurations": [
129
-
{
130
-
"type": "node",
131
-
"request": "launch",
132
-
"name": "Launch Program",
133
-
"program": "${file}"
134
-
}
135
-
]
136
-
}
137
-
```
138
-
139
-
At this his time no changes are necessary to this file. You can just close the editor tab.
140
-
141
-
4. Next, press the **Explorer** button in the left margin as indicated by the red triangle in the figure below.
5. Observe that VSCode has created a `.vscode` subfolder in your project folder where it keeps the JSON file just created and potentially other VSCode settings.
146
-
6. You can now run your code in the debugger. Switch to the editor tab contains your program and press the green triangular button or, alternatively, press F5.
147
-
7. Note that when your program finishes execution the debugger is still active. You can stop it by pressing the square red button.
148
-
149
-
If you do not really need to debug your program (e.g., by placing breakpoints) etc, you may prefer to run your program in a terminal window. You can open an Integrated Terminal as explained earlier and type:
138
+
If your JavaScript program is contained in a single file the easiest way to run and examine your code is the start straight in VSCode.
150
139
151
-
```
152
-
node prog.js
153
-
```
140
+
1. Press the F5 function key to start the VSCode debugger.
154
141
155
-
Replace `prog.js` with the actual file name of your program.
142
+
2. You will prompted to select an environment. Choose `Node.js` as show below.
156
143
157
-
If you want to run your program in terminal window independent of VSCode you should make sure you are in the same directory as the program you want to run.
0 commit comments