Lecture 1: VS Code and LaTeX Workshop

1. Basics on VS Code
2. LaTeX Workshop (extension)
3. User Snippets

1 Basics on VS Code

1.1 Overview

VS Code is a free source-code editor made by Microsoft.
It was released in 2015.
According to Developer Survey Results 2019, VS Code is the most popular development environment.

1.2 Installation

Download here: https://code.visualstudio.com/

1.3 Workspaces

A workspace in VS Code is a collection of folders.
For simplicity, we will have only one folder in a workspace.
So for us, a workspace is just a single folder (which of course may contain many files and subfolders).
I recommend you to have one folder for one project (i.e., your paper).
Always open a folder not a single file!

1.4 Open folders

Before you open a folder for the first time, make sure that you close everything using "File $\to$ Close Folder" in the menu bar.
By drag-and-drop you can open a folder.
It will create a workspace having all the contents in that folder.
You can open recent workspaces (i.e., folders for us) or files using CTRL+R, which means "File: Open Recent".

1.4.1 Exercise

Download this file and extract it in your computer.
Close everything in your VS Code.
Open the folder "tex-exercise" in VS Code.
Close everything in your VS Code.
Open the folder "bib-exercise" in VS Code.
Close everything in your VS Code.
Open the folder "git-exercise" in VS Code.
Open recent folders using CTRL+R.

1.5 How to install extensions

Click the icon "Extensions" on the left.
Search the extension you want to install.
Click "Install".
Exercise: Install Latex Workshop.
Exercise: Install Code Spell Checker.
Using Code Spell Checker you can do "Quick fix": CMD + .

1.6 Command Palette

CMD + SHIFT + P opens a command line showing all commands.
Note: CMD means Command Key for Mac and Control Key for Windows.
We will call this command line CP.
Probably the most important keyboard shortcut!
Very helpful when you forgot keyboard shortcuts.
You can also discover many things using CP.
Quiz: How can you make the minimap disappear?

Hint: Search "minimap" at CP, and you will get the answer.

1.7 How to change settings

CP $\rightarrow$ "Preferences: Open Settings (UI)" (or type CMD+,)
Search "Editor: Font Size".
Enter 14 (or any font size you want) in the box.
Exercise: Disable the line number.

1.8 How to change themes

Search "theme" at CP, and choose "Preferences: Color Theme".
You can check out more themes from extensions.
1. Install "Community Material Theme" extension.
2. Select "Community Material Theme Palenight (Higher Contrast)" from "Preferences: Color Theme" as we did above.

2 LaTeX Workshop (extension)

2.1 Installation

First you need to install LaTeX Workshop using "Extensions" icon as before.

2.2 Basic commands

TeX Compile
- To build a pdf type CMD + OPTION + B.
- If you forgot this, search "latex build" at CP.
- Alternatively, you can simply save the tex file.
- What's the shortcut for "Save"? (Hint: CP)
View PDF
- To view a pdf, type CMD + OPTION + V.
- If you forgot this, search "latex pdf" at CP.
Inverse Search (find source code from pdf)
- CMD + left click on the pdf
SyncTeX from cursor (Forward Search)
- CMD + OPTION + J

2.2.1 Exercises

Find the shortcuts for "Copy" and "Paste".
Discover what "Copy Line Up" and "Copy Line Down" mean.
Find the shortcut for "Find".
Find a way to comment a line.
Experiment with your finding in 4 by using its shortcut after selecting a region.

2.3 Move between sections or labels

Click the icon $\mathrm{\TeX}$ on the left.
This will show the sidebar with sections and labels.
By clicking a section here you can move to that section in your tex file.
You can toggle the sidebar with CMD + B. If you forgot this, you know what to do.

2.4 Some interesting features

Auto Completion: Try to type \begin{theorem}
Collapsing environments
- Click the down arrow appearing at the left of an environment.
Preview
- Place your mouse pointer at an equation.
Latex Snippet Panel
- CP $\rightarrow$ "Latex Workshop: Show Snippet Panel"
Typing "\ref{" shows all labels.
- By clicking the arrow at the right corner, you can see the content of the label.

2.5 Snippets

A snippet means a block of re-usable code, somewhat similar to macro.
If you type the "prefix" of a snippet and press TAB or ENTER, then it will insert the "body" of the snippet.
@a: \alpha
@(: \left( \right)
@/: \frac{}{}
bit: \begin{itemize} ... \end{itemize}
fem: \emph{}
mbf: \mathbf{}
Typing a letter and CTRL+SPC will show all snippets whose prefix contains that letter.

2.6 More Snippets

See the links below for more snippets. https://github.com/James-Yu/LaTeX-Workshop/wiki/Snippets#Handy-mathematical-snippets

https://cheatography.com/jcwinkler/cheat-sheets/latex-workshop-visual-studio-code/#downloads

2.7 Add Keyboard shortcuts

CP $\rightarrow$ Preferences: Open Keyboard Shortcuts
Search "Latex Workshop: Select the current environment content."
Double click this line and enter your desired key combination (e.g. CMD+').

2.7.1 Exercise

Setup a keyboard shortcut for "Latex Workshop: Select the current section".

2.8 Finding errors

If there are some errors in your tex file, VS Code will show a message box when you build LaTeX.
Click "Open compiler log" in the message box.
Click "Problems" in the small window at the bottom. You can make it bigger by dragging its top.
Clicking a line in this window will send you to the precise location in your tex file where the error occurs.

3 User Snippets

3.1 latex.json

To write user snippets we need to open the "latex.json" file.
CP $\rightarrow$ Preferences: Configure User Snippets
Find "latex (latex)" or "latex.json (latex)".
It will open the file latex.json.

3.2 Write user snippets (without arguments)

In the latex.json file everything is enclosed by a pair of curly braces {...}.
You can write your own snippets inside this braces.

Each snippet has the following structure.

"snippet name": {
    "prefix": "snippet key",
     "body": "snippet body"
}

3.2.1 Example

Consider the following snippet.

"vandermonde determinant": {
    "prefix": "vdm", 
    "body": "\\prod_{1\\le i<j\\le n} (x_i - x_j)" 
}

This snippet will insert the following when you press TAP after typing vdm:
```
\prod_{1\le i<j\le n} (x_i - x_j)
```
Notice that we must write two slashes \\ to insert a single slash \.

3.2.2 Example

If you have more than one snippets, you must put a comma , after each snippet.

So, for example, your latex.jason file should look something like this (notice the outermost pair of curly braces):

{
   "vandermonde determinant": {
       "prefix": "vdm", 
       "body": "\\prod_{1\\le i<j\\le n} (x_i - x_j)" 
   },
   "vandermonde determinant2": {
       "prefix": "vdm2", 
       "body": "\\prod_{1\\le i<j\\le n} (y_i - y_j)" 
   }
}

3.3 Write user snippets (with arguments)

Using arguments you can create more flexible snippets.
Arguments are of this form $1, $2, etc., and $0.
$1, $2, etc. mean the first argument and the second argument etc.
You will be asked to type these variables when you use the snippet.
$0 means the final location of the cursor when all the arguments have been typed.

3.3.1 Example

Consider the following snippet.

"vandermonde det": {
	"prefix": "vdm",
	"body": "\\prod_{1\\le i<j\\le $1} ($2_i - $2_j)"
}

If you use this snippet, it will ask you to fill $1 and then $2. You can move to the next argument by pressing TAB.
If you type m TAB z TAB, then the snippet will insert this:
```
\prod_{1\le i<j\le m} (z_i - z_j)
```
Note that you need to type $2 only once and it will be inserted twice as designed.

3.3.2 Example (default arguments)

You can also set default arguments using ${n:default}.

For example, the following snippet has default values n and x for the arguments $1 and $2 respectively.

"vandermonde det": {
	"prefix": "vdm",
	"body": "\\prod_{1\\le i<j\\le ${1:n} (${2:x}_i - $2_j)"
}

3.4 Exercises

Write a snippet that inserts the following and place the cursor in the middle.
```
\langle  \rangle
```
Write a snippet that inserts the following and place the cursor in the middle. (Hint: a new line can be created using \n.)
```
\[

\]
```
Write a snippet that inserts the following, where x and n are given as default but can be changed to anything.
```
(x_1,x_2,\dots,x_n) 
```

3.5 More Exercises

LaTeX Workshop has the snippet BCAS that inserts the following.
```
\begin{cases}

\end{cases}
```
Write your own snippet with the same prefix BCAS that inserts
```
\begin{cases}
  A  &  \mbox{if $B$},\\
  C  &  \mbox{D}.
\end{cases}
```
and asks you to fill A, B, C, D in this order, where D is set to be otherwise by default, and locate the cursor below the line containing \end{cases}.
See what happens if you type BCAS.

Lecture 1: VS Code and LaTeX Workshop

Table of Contents

1 Basics on VS Code

1.1 Overview

1.2 Installation

1.3 Workspaces

1.4 Open folders

1.4.1 Exercise

1.5 How to install extensions

1.6 Command Palette

1.7 How to change settings

1.8 How to change themes

2 LaTeX Workshop (extension)

2.1 Installation

2.2 Basic commands

2.2.1 Exercises

2.3 Move between sections or labels

2.4 Some interesting features

2.5 Snippets

2.6 More Snippets

2.7 Add Keyboard shortcuts

2.7.1 Exercise

2.8 Finding errors

3 User Snippets

3.1 latex.json

3.2 Write user snippets (without arguments)

3.2.1 Example

3.2.2 Example

3.3 Write user snippets (with arguments)

3.3.1 Example

3.3.2 Example (default arguments)

3.4 Exercises

3.5 More Exercises