Visual Studio Code

↑

VS code is an open source AI code editor developed by Microsoft. Being open source, everyone can be a developer to the app. Hence comes what I like about it: VS code has extensive extension support, making it suitable for a wide range of programming languages and development tasks. It is highly customizable. The AI integration is done through GitHub Copilot, which is powerful and provides seamless AI assistance while coding/writing.

Useful resources:

Documentation

Layout

Activity Bar is the vertical bar on the far left side of the window. It contains extensions that can contribute to View Containers.
- Drag and drop icons to reorder them.
- Right-click on an icon to hide it from the Activity Bar.
Secondary Side Bar is located to the left of the editor region. It can be useful to see two views open at the same time. It is often used by the Copilot Chat.
Editor Groups

By default, each opened editor goes into the same editor group and open new file as a tab to the right.

You can create new editor groups in order to group similar or related files, or to allow side by side editing of the same file.

Create a new editor group by dragging an editor to the side, or using one of the Split commands in the context menu to duplicate the current editor into a new editor group to the left, right, above, or below.
Output Panel (cmd + J to toggle the panel if it is not loaded automatically) - An additional space for views below the editor region. ↩︎

By default, it contains output, debug information, errors and warnings, and an integrated terminal.

You can right click the Panel menu bar to move it to the left or right for more vertical space.

refs:

User Interface: Basic layout
Custom layout
- Refer to the webpage to learn how to reorganize the default layout.

Q: How to change Panel position?
A: Right-click on the Panel title bar > Panel Position > choose from Left | Right | Bottom | Top, default is Bottom. Or choose “View: Toggle Panel Position” from the Command Palette.

Explorer View

The Explorer view is used to browse, open, and manage the files and folders in your project.

Type cmd + P (Quick Open) to quickly search and open a file by its name.

Keyboard shortcuts

Command Palette > “Preferences: Open Keyboard Shortcuts” to open the Keyboard Shortcuts editor.

Click to open the keybindings.json file to customize your own shortcuts.

Shortcut	Function
VS Code General:
`cmd` + `J`	Toggle Output Panel
`cmd` + `P`	search file names in the current workspace or project.
`shift` + `cmd` + `P`	Bring up the Command Palette
`ctrl` + `	`ctrl` + backticks; User modified: toggle btw editor and terminal
`cmd` + `M`	Minimize current active window
`cmd` + `K`	Toggle Side Bar
`shift` + `cmd` + `E`	Focus on Explorer View
Md Editing
`cmd` + `opt` + `V`	Markdown Paste: convert rick text to Markdown, such as bold face.
GitHub Copilot:
`ctrl` + `I`	Github CoPilot: Start inline chat (default shortcut `cmd-I` collapses with italic style)
`ctrl` + `cmd` + `I`	Toggle GitHub Copilot chat
`opt` + `cmd` + `B`	Close GitHub Copilot chat in the Secondary Side Bar

Useful Extensions:

Markdown: Markdown Preview Enhanced, Markdown+Math, Markdown All in One
TeX: LaTeX-Workshop (this installs intellisense automatically)
Spell check, autocomplete: Code Spell Checker, intellisense

Extension Reload

Sometimes you need to reload an extension to apply changes.

Command Palette → “Developer: Reload Window”

This is equivalent to restarting VS Code, but it only reloads the current window and does not close the entire application.
A quick reload ensures that your environment is up-to-date and functioning as intended, preventing potential disruptions in your workflow.
- Generally, changes in settings apply immediately, but some settings require a reload to take effect.

Find and Replace in Selection

cmd + F to open Find/Replace
Select your line of text
Click the “Find in Selection” icon to the right (or using keyboard shortcut opt + cmd + L)
Enter your find and replace characters in their inputs
Click the “Replace All” icon

Close Find/Replace with esc.

Search Across Files

Press shift + cmd + F and enter your search term. VS Code will search over all files in the currently opened folder.

Command Palette approach: enter the Search: Quick Search command.

Search results are grouped into files containing the search term, with an indication of the hits in each file and its location. Expand a file to see a preview of all of the hits within that file. Then single-click on one of the hits to view it in the editor.

Language Identifiers

In Visual Studio Code, each language mode has a unique specific language identifier. That identifier is rarely seen by the user except in the settings, for example, when associating file extensions to a language:

"files.associations": {
    "*.myphp": "php"
}

Note that casing matters for exact identifier matching (‘Markdown’ != ‘markdown’)

Every language defines its id through the languages configuration point in the extension’s package.json file:

"languages": [{
    "id": "java",
    "extensions": [ ".java", ".jav" ],
    "aliases": [ "Java", "java" ]
}]

You can find a list of known identifiers in the language identifier reference.

Language	Identifier
LaTeX	`latex`
Markdown	`markdown`
R	`r`
R Markdown	`rmd`
Quarto	`quarto`

Note that all identifiers are in lower cases.

Version Control

Visual Studio Code has integrated source control management (SCM) and includes Git support out-of-the-box.

Use the Source Control icon in the activity bar to access the Source Control view.

Error: No source control providers registered.
Cause: Git built-in extension was disabled.
Fix: Go to Extensions, type: @builtin git, then Enable Git from the Git extension settings.

The Source Control view shows the details of your current repository changes: CHANGES, STAGED CHANGES and MERGE CHANGES.

When you select a file in the Source Control view, you will see the changes that you have made to that file in a diff editor.

File version control status

U - Untracked file
A - Added file
M - Modified file

Code Actions

Code Actions can provide both refactorings and Quick Fixes for detected issues (highlighted with red squiggles). When the cursor is on a squiggle or on a selected text region, VS Code shows a light bulb icon 💡 in the editor to indicate that a Code Action is available. If you select the Code Action light bulb or use the Quick Fix command ⌘., the Quick Fixes and refactorings control is presented.

If you have enabled GitHub Copilot, you can choose to fix with Copilot. This is a very convenient way to debug your code.

Q: What is refactoring?
A: Visual Studio Code supports refactoring operations (refactorings) such as Extract Method and Extract Variable to improve your codebase from within the editor. For example, a common refactoring used to avoid duplicating code (a maintenance headache) is the Extract Method refactoring, where you select source code and pull it out into its own shared method, so that can reuse the code elsewhere.

Code Snippets

Snippets files are written in JSON, support C-style comments (//), and can define an unlimited number of snippets. Snippets support most TextMate syntax for dynamic behavior, intelligently format whitespace based on the insertion context, and allow easy multiline editing.

a language snippet file

Single-language user-defined snippets are defined in a specific language’s snippet file (for example javascript.json), which you can access by language identifier through Snippets: Configure Snippets.

A snippet is only accessible when editing the language for which it is defined.
a global snippet file

Multi-language and global user-defined snippets are all defined in “global” snippet files (JSON with the file suffix .code-snippets), which is also accessible through Snippets: Configure Snippets.

File path: $HOME/Library/Application Support/Code/User/snippets

Create your own snippets: Code > Settings > Configure Snippets

Syntax

// in file 'Code/User/snippets/javascript.json'
{
  "For Loop": {
    "prefix": ["for", "for-const"],
    "body": ["for (const ${2:element} of ${1:array}) {", "\t$0", "}"],
    "description": "A for loop."
  }
}

“For Loop” is the snippet name.

prefix defines one or more trigger words that display the snippet in IntelliSense. Substring matching is performed on prefixes, so in this case, “fc” could match “for-const”.

body is one or more lines of content, which will be joined as multiple lines upon insertion. Newlines and embedded tabs will be formatted according to the context in which the snippet is inserted.

description is an optional description of the snippet displayed by IntelliSense.

scope optional property that takes one or more language identifiers, which makes the snippet available only for those specified languages. If no scope property is given, then the global snippet is available in all languages.

Rules for Body:

Enclosed in an array of strings. Each entry in the array represents one line of the inserted snippet.
Use $1, $2 to specify cursor locations. The number is the order in which tabstops will be visited, whereas $0 denotes the final cursor position.

The body of the example above has three placeholders (listed in order of traversal): ${1:array}, ${2:element}, and $0. You can quickly jump to the next placeholder with Tab.

$0 is an optional special case that always comes last.
Placeholders are tabstops with values, like ${1:foo}. The placeholder text will be inserted and selected such that it can be easily changed. Placeholders can be nested, like ${1:another ${2:placeholder}}.

The string after the colon : (if any) is the default text.
Variables: With $name or ${name:default}, you can insert the value of a variable.
- TM_SELECTED_TEXT The currently selected text or the empty string.
Escape specail characters.

With \ (backslash), you can escape $, }, \, and ".
Multilined body: simply wrap each line with double quotes.

Q: When using $TM_SELECTED_TEXT, if you type the prefix, the selected text will be overwritten. What to do with it?
A: VS code remembers the text. When you finish typing the prefix, the formatted text will show up accordingly.

// customer defined snippets
{
  "Colored Span Green": {
      "prefix": "cs-green",
      "body": [
        "<span style=\"color: #008B45;\">$TM_SELECTED_TEXT</span>$0"
      ],
      "description": "Insert a green colored span"
  },
  "Math Helper Parentheses": {
      "scope": "markdown, latex",
      "prefix": "\\(",
      "body": [
        "\\left($1\\right)$0"
      ],
      "description": "Insert parentheses with LaTeX math formatting"
  },
  "Math Helper Brackets": {
      "scope": "markdown, latex",
      "prefix": "\\[",
      "body": [
        "\\left[$1\\right]$0"
      ],
      "description": "Insert brackets with LaTeX math formatting"
  },
  "Separator":{
      "scope": "markdown, latex, quarto",
      "prefix": ["---", "dash"],
      "body": [
        "--------------------------------------------------------------------------------",
        "$0"
      ],
      "description": "Insert a horizontal separator line"
  },
  "Insert codicon": {
      "scope": "markdown, quarto",
      "prefix": "codicon",
      "body": [
        "<i class=\"codicon codicon-$1\" aria-hidden=\"true\" style=\"vertical-align: middle;\"></i>$0"
      ],
      "description": "Insert a VS Code codicon"
  },
  "Set working directory in R": {
		"scope": "r",
		"prefix": ["swd", "set-work-dir"],
		"body": [
			"setwd(dirname(rstudioapi::getSourceEditorContext()\\$path))$0"
		],
		"description": "Set working directory in R"
	},
}

"scope": "markdown, latex" set scope to "markdown, latex" such that \( works inside dollar signs.
To escape double backslashes, you have to use \\\\\\\\ (8 backslashes).
- In TextMate you can but must not escape a backslash with a backslash, so to insert 1 backslash have either \ or \\
- In JSON you must escape a backslash with another backslash, so to insert 1 backslash have either \\ or \\\\, to insert 2 \\\\\\\\
Other characters that need to escape in snippet body:
- double quotes \"
- dollar sign \\$

List of User Defined Snippets

prefix	command
`cs-green` / `cs-red`/ `cs-blue`	colored html span
`\(`	`\left(\right)`
`\[`	`\left[\right]`
`vec`	row vector
`cvec`	column vector
`mat`	variance matrix
`---` or `dash`	insert separator horizontal line Note that in `Rmd` and `qmd`, since `---` clashes with yaml, use `dash` instead.
`codicon`	insert a VS Code codicon `<i class="codicon codicon-<>" style="..."></i>`
`xref`	insert cross-reference <a href=”{{site.baseurl}}/yyyy/mm/dd/file-name.html”> Linked Text </a>
`swd` or `set-work-dir`	set working directory in R using current script location

Q: Is it possible to set max lines of a table printed in notebook?
A: The simple answer is NO. Seetings → Features → Notebook only limits the cell size of a pure text based output. It does NOT apply to outputs such as matrices, dataframes or other spreadsheet-like outputs (e.g. from the View() function in R.)

Configuration

Change settings of VS Code

Menu bar: Code → Settings (keyboard shortcut: cmd + ,)

A useful feature is to copy the json for the settings of interest in the UI.

When you hover over the title of the setting, a gear icon will appear, choose “Copy Setting as JSON” to copy the setting in json format.
Configuration file: change directly in the user settings file (settings.json)

Setting file locations:

macOS User Settings: Global settings that apply to all VS Code workspaces and projects

Located in the user’s home directory in the VS Code application data folder: $HOME/Library/Application\ Support/Code/User/settings.json

Examples: Theme, font size, editor preferences, extensions settings, etc.

Lower priority (can be overridden by workspace settings)
Workspace Settings: Project-specific settings that apply only to the current workspace/project.

Located in .vscode/settings.json inside the project folder.

Examples: Project-specific linting rules, build configurations, language settings for this project

Priority: Higher priority (overrides user settings)

❗VS Code use the root project folder to determine the workspace settings.

If you have a nested project structure, i.e., a .vscode/settings.json files in a subfolder, VS Code will NOT recognize it unless you open that subfolder as the root folder in VS Code.

You can toggle between User and Workspace Settings by choosing the tab in the UI or if you are using the json file, you can determine which settings you are working on by looking at the file path.

Run Open Config Script to open config.js (a JavaScript configuration file):

define TeX macros KatexConfig, mathjaxConfig …

Q: What is the difference between .json and .js?
A: .json is a subset of .js, which stands for JavaScript.

If you store only data, use .json;

You can think of .json as a YAML frontmatter in markdown.
if you have some sort of logic (functions, conditions, loops …), use .js.

Q: How to sync settings across devices?
A: Turn on Setttings Sync.

To use Sync settings, you need to sign in (GitHub or Microsoft account) and select which settings you want to sync. Currently, the Settings Sync supports the following settings:

Settings
Keyboard shortcuts
User snippets
User tasks
UI State
Extensions
Profiles

Q: How to view historical settings data?
A: Type Settings Sync: Show Synced Data in the Command Palette. ↩︎

You can share your settings, keybindings, extensions, snippets, and UI state with others by exporting a profile.

Q: What is a profile?
A: A profile is a collection of settings, extensions, and configurations that define your VS Code environment. Profiles allow you to switch between different setups easily, depending on your workflow or project requirements.

VS Code treats your current configuration as the Default Profile. As you modify settings, install extensions, or change UI layout by moving views, these customizations are tracked in the Default Profile.

Q: Why use profiles?
A: You can share your VS Code configuration with others or across different machines. A common user case is that you can share with students to quickly set up their VS Code environment. For example, educators can create a profile with a specific set of extensions and settings needed for a computer science class and then share that profile with students. ↩

Q: How to create a profile?
A: To create a profile, follow these steps:

Click the gear icon in the lower-left corner of the VS Code window to open the Settings menu.
Click on Profiles, this will open the Profiles editor.
Click on the New Profile button.

This opens the New Profile form, where you can enter a profile name, choose an icon, and configure the contents that are included in the new profile.

Export

You can export a profile for saving it or sharing it with others by using the Export… button in the overflow actions of the profile you want to export.

When you select Export…, you are prompted for the profile name and whether you want to export to either a GitHub gist or to your local file system.

Import

You can import an existing profile from the Profiles editor by selecting the Import Profile…button in the dropdown actions of the New Profile button.

When you select Import Profile…, you are prompted for the URL of a GitHub gist or the file location of a profile via an Import Profile dialog. Once you have selected the profile, the Profile creation form opens with the profile to import pre-selected. You can continue to modify the profile and select Create to import the profile.

ref: Share your VS Code configuration via Profiles

Q: How to customize language-specific setttings?
A: Open User Settings → Type @lang:markdown into the search widget. This will show configurable settings for that specific language. Alternatively, you can change directly in the settings JSON file.

"[markdown]": {
    "editor.formatOnSave": true,
    "editor.wordWrap": "on",
    "editor.renderWhitespace": "all",
    "editor.acceptSuggestionOnEnter": "off"
  }

Q: How to preview a markdown file?
A: Two options:

Open Preview (⇧⌘V)
Open Preview to the Side (⌘K V)

Use either the keyboard shortcuts or click the Preview button.

Double clicking an element in the Markdown preview will automatically open the editor for the file and scroll to the line nearest the clicked element.

To set html preview using external browser, you need to change setting for the two extensions:

Quarto Preview: personally I prefer to use the build-in preview as it basically provides a live preview just like Markdown Preview Enhanced.
Live Preview: set to external browser, as Live Preview is more often used to preview the whole website.

Q: How to open the User settings json file settings.json?
A: Follow the following steps:

Open the Command Palette (either with F1 or Cmd+Shift+P)
Type “open settings”
You are presented with a few options, choose Open User Settings (JSON)

You can change setting using the UI or there is a settings.json file which saves all configurations.

VS Code includes a button, , in the Settings UI gutter which can be used to switch between JSON and graphical view. See the image below:

A faster way is to use the command:

User preferences: Command Palette → “Preferences: Open User Settings (JSON)”
Workspace preferences: Command Palette → “Preferences: Open Workspace Settings (JSON)”
Keyboard shortcuts: Command Palette → “Preferences: Open Keyboard Shortcuts (JSON)”

Q: How to spell check code and document?
A: Use the extension Code Spell Checker. Put your cursor in the word, use Cmd+. to show suggestions and select.

Q: How to ignore unknown words?
A: Go to Settings (⌘,) → cSpell.diagnosticLevel → Choose Hint from the drop down menu.

Q: How to show my installed extensions?
A: By default, the Extensions view will show the extensions you currently have installed, and all extensions that are recommended for you. You can use the Extensions: Focus on Installed View command, to show the installed ones.

Q: Disable Enter to accept suggestions as this confuses inserting a new line.
A: Set Editor: Accept Suggestion On Enter to off.

Markdown

Markdown Preview Settings: https://code.visualstudio.com/docs/languages/markdown#_markdown-preview

Q: How to get a preview of Rmarkdown?
A: Open settings.json, add the following code inside the braces.

/* this adds additional file extensions to markdown */
"files.associations": {
    "*.Rmd": "markdown",
    "*.qmd": "markdown",
},

A drawback of this setting is that you cannot run codes inside the markdown files.

Q: How to get autocomplete, syntax highlighting in Markdown?
A: Install Latex Workshop by James Yu → Switch Language Mode from Markdown to markdown_latex_combined.

This will disable markdown preview! Therefore, not recommended. ❌

Use Markdown All in One extension instead. ✅

Markdown All in One

Markdown All in One provides many useful shortcuts for editing markdown files.

Shortcut	Function
`cmd` + `B`	Toggle bold
`cmd` + `I`	Toggle italic
Select text and `cmd` + `V`	Insert link to selected text

Q: How to change the language for the selected file?
A: In the status bar, click the language indicator. This will bring up the Select Language Mode dropdown where you can select another language for the current file.

Q: How to change Markdown preview security?
A: You can change what content is allowed in the Markdown preview by clicking on the popup or running the Markdown: Change preview security settings command in any Markdown file.

Visual Mode and Source Mode

Visual Mode has inline preview of eqns, and in time preview of your markdown, like in Typora.

Side-to-side preview can be slow and the previewer can crash for a large file. That’s where Visual Mode comes in handy.

I prefer Source Mode as I get full control of the markdown file.

Markdown Preview Enhanced

Q: How to define MathJax macros?
A: You can configure MathJax by running command Markdown Preview Enhanced: Open MathJax Config.

Q: How to set Math Rendering Engine?
A: Run command Markdown Preview Enhanced: Math Rendering Option.

References:

https://github.com/shd101wyy/vscode-markdown-preview-enhanced/issues/67

Q: How to enable automatic numbering for MathJax?
A: Run Open Config Script (will open config.js, a JavaScript configuration file), and add

mathjaxConfig: {
  tex: {
    tags: 'ams',
    "macros": {
        bold: ["{\\boldsymbol #1}", 1], // use \bold as a shorthand
        indep: "{\\perp \\!\\!\\! \\perp}",
        // bold face capital letter
        bA: "\\boldsymbol{A}",
    }
  }
};

to tell the TeX input processor to use the AMS numbering rules (where only certain environments produce numbered equations, as they would be in LaTeX, e.g., \begin{equation}).

You can use \notag or \nonumber to prevent individual equations from being numbered, and \tag{} can be used to override the usual equation number with your own symbol instead (or to add an equation tag even when automatic numbering is off).

You can also define your TeX macros in config.js.

File path: /Users/menghan/.local/state/crossnote/config.js

Q: How to use dark theme for Markdown Preview Enhanced (MPE)?
A: Run command Markdown Preview Enhanced: Preview Theme, choose github-dark.css.

Q: How to get separate preview for individual files?
A: MPE has one preview tab for all files by default. You can change this by going to preferences > Markdown Preview Enhanced > Preview Mode > Set to Multiple Previews. Restart VS Code to activate the setting.

Customize CSS

Q: How to add a custom CSS to MPE?
A: To customize CSS for your markdown file, press cmd-shift-p and then run the Markdown Preview Enhanced: Customize CSS (Global) or Markdown Preview Enhanced: Customize CSS (Workspace) command.

The style.less file will open, and you can override existing style like this:

.markdown-preview.markdown-preview {
  // please write your custom style here
  // eg:
  //  color: blue;          // change font color
  //  font-size: 14px;      // change font size
  // custom pdf output style
  @media print {
  }

  // custom prince pdf export style
  &.prince {
  }

  // custom presentation style
  .reveal .slides {
    // modify all slides
  }

  .slides > section:nth-child(1) {
    // this will modify `the first slide`
  }
}

.md-sidebar-toc.md-sidebar-toc {
  // sidebar TOC style
}

ref: MPE Customize CSS

Configuration

There is a global config.js script that could be used to configure the Markdown Preview Enhanced extension.

Open command palette (⇧⌘P), then run Markdown Preview Enhanced: Open Config Script (Global) command to open it.

You can add your custom macros.
You can add more configurations to this script. A list of available configurations can be found here.

Below is an example of the config.js script:

({
  katexConfig: {
    macros: {},
  },

  mathjaxConfig: {
    tex: {},
    options: {},
    loader: {},
  },

  mermaidConfig: {
    startOnLoad: false,
  },
});

Export as PDF

With MPE, you can export your markdown file as PDF.

Need to install Prince XML first.
```
brew install --cask prince
```
Open preview of your markdown file, hover over the bottom right corner, click the menu button.
Export > PDF (Prince)

This approach is fast. Drawback: no toc.

Alternatively, for best paper quality, you can use Markdown PDF (by yzane) extension to export PDF.

Right-click anywhere in the markdown file editor, then select Markdown PDF: Export (pdf) from the context menu.

It generates a PDF with support of more content format, e.g., block quotes, auto-inserting page numbers, and contents more compact, but it is significantly slower. It has no TOC.

If you want a full control of the PDF output, you can use Quarto to render the markdown file to PDF.

Markdown+Math

https://marketplace.visualstudio.com/items?itemName=goessner.mdmath

Use KaTeX, which is supposedly a fast math renderer.

Function: Simplify the process of authoring and live previewing markdown documents containing math formulas.

Use: Typeset in your markdown source window and see the preview window live updating.

Define macros for mdmath

Option 1: use user settings

opt+, open preferences, add your macros directly there.

"mdmath.macros": {
        "\\indep": "{\\perp \\!\\!\\! \\perp}",
        "\\E": "\\mathbb{E}",
},

Option 2: save macros in a file and add the file path. The file take priority. That means the defined macros in option 1 will be ignored if a definition file exists.

Issue: This does not work somehow.

"mdmath.macroFile": "/Users/menghan/Documents/mac_setup/config_files/mdmath_macros.json",

After adding the macros in preferences, need to restart VS Code to enable them.

Quarto

You can install the Quarto extension from the VS Code Extension Marketplace.

But if you have associated .qmd with Markdown previewer as follows

"files.associations": {
   "*.Rmd": "markdown",
   "*.qmd": "markdown",
}

then it won’t be recognized by the Quarto extension and will be processed as a regular markdown file.

LaTeX-Workshop

LaTeX Workshop is a popular LaTeX extension for Visual Studio Code, providing a comprehensive set of features for LaTeX editing, compiling, and previewing. In the following, I summarize some useful settings and tips for using LaTeX Workshop effectively.

Refer to LaTeX Workshop for more details.

Code Spell Checker

Words not in the dictionary files will have a squiggly underline.

Its configuration starts with cSpell in settings.json.

In text-based documents like .md and .qmd files, the spell checker checks all words. In code-based documents like .py and .R files, the spell checker only checks strings and comments.

Q: How to let cSpell ignore certain environments, such as code and math?
A: Add the following to your settings.json file:

// Configure spell checker to ignore certain patterns
"cSpell.ignoreRegExpList": [
  "/```[\\s\\S]*?```/g",  // Ignores fenced code blocks (```)
  "/`[^`\\r\\n]*`/g",     // Ignores inline code (`)
  "/@\\w+/g",             // Ignores @ mentions (like @username)
  "/\\$\\$[\\s\\S]*?\\$\\$/g", // Block LaTeX math ($$...$$)
  "/\\$[^$\\r\\n]*\\$/g"  // Inline LaTeX math ($...$)
]

The key is that the inline code config comes before the LaTeX patterns. This way, cSpell will first ignore anything in backticks, so $HOME (environment variable) inside backticks is not seen as LaTeX math.

Customization

The spell checker configuration can be controlled via VS Code preferences or cspell.json configuration file. ↩

Order of precedence:

Workspace Folder cspell.json
Workspace Folder .vscode/cspell.json
VS Code Preferences cSpell section.

Words added to the dictionary are placed in the cspell.json file in the workspace folder. Note, the settings in cspell.json will override the equivalent cSpell settings in VS Code’s settings.json.

Example cspell.json file

// cSpell Settings
{
    // Version of the setting file. Always 0.2
    "version": "0.2",
    
    // language locale - current active spelling language
    // "en", "en-US" and "en-GB" are currently supported by default.
    "language": "en-GB",
    
    // words - list of words to be always considered correct
    "words": ["mkdirp", "tsmerge", "githubusercontent", "streetsidesoftware", "vsmarketplacebadge", "visualstudio"],
    
    // flagWords - list of words to be always considered incorrect
    // This is useful for offensive words and common spelling errors.
    // For example "hte" should be "the"
    "flagWords": ["hte"]
}

VS Code settings (settings.json)

//-------- Code Spell Checker Configuration --------
// The Language locale to use when spell checking. 
// "en", "en-US" and "en-GB" are currently supported by default.
"cSpell.language": "en",

Note that when you specify language, the element names are different in cspell.json and settings.json.

language in cspell.json
cSpell.language in settings.json

The one in cspell.json has higher priority if you specified at both files.

Comments (26-01): The specification in cspell.json seems not to work as expected. The spell checker still uses the language specified in settings.json even if you have specified a different language in cspell.json.

Foreign language support

Here is an example of how to enable Norwegian Bokmål spell checking in VS Code using the Code Spell Checker extension:

Install Norwegian Bokmål – Norwegian Bokmål dictionary extension for VS Code.
Adding nb to the cSpell.language setting, will enable the Norwegian Bokmål dictionary.

Add the following to your settings.json file to enable both English and Norwegian Bokmål spell checking:
```
"cSpell.language": "en,nb",
```

British English

Install the extension Code Spell Checker - English (British)

Then, add the following to your workspace settings.json file:

"cSpell.language": "en-GB",

This would enable British English spell checking.

Verify if the language is set correctly by go to Command Palette (⇧⌘P) → Show Spell Checker Configuration Info, a side panel will open showing the current configuration.

If it does not show en-GB, make sure you have used the correct workspace settings.json file. Sometimes you may have nested project folders, VS Code only recognizes the root folder’s workspace settings.

Enable CSpell ONLY for certain file types

Q: Code Spell Checker does not check files that are in gitignore. How to fix?
A: Set "cSpell.useGitignore": false in settings.json.

Q: How to only enable spell checking for certain file types?
A: Add the following to your settings.json file:

"cSpell.enabledFileTypes": {
  "*": true,         // Enable for all file types
  "bibtex": false    // Disable for bibtex files
},

File type * means all file types.

The above configuration enables spell checking for all file types except for bibtex files.

Alternatively, you can prefix a file type with ! to disable it, as shown below:

"cSpell.enabledFileTypes": {
  *,
  !bibtex
},

A caveat is that * covers too comprehensively, but script files such as .py, .r, etc. should be excluded.

✅ Hence, it is suggested to enable spell checking individually for certain file types;

"cSpell.enabledFileTypes": {
  "rmd": true,
  "markdown": true,
  "plaintext": true,
  "text": true,
  "quarto": true,
  "qmd": true,
  "json": true,
  "bibtex": false           // Disable for bibtex files
},

If any file shows CSpell check squiggles undesirably, you can disable it by adding the file type to the list with value false.

ref: CSpell Enabled File Types

IntelliSense

IntelliSense is a general term for various code editing features including: code completion, parameter info, quick info, and member lists. IntelliSense features are sometimes called by other names such as “code completion”, “content assist”, and “code hinting.”

The inferred symbols are presented first, followed by the global identifiers (indicated by the abc word icon).

The editor supports tab completion, which inserts the best matching completion when pressing Tab.

Settings

// Controls if quick suggestions should show up while typing
"editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
},

Types of completions

Icon	Name	Symbol type
	Methods and Functions	`method`, `function`, `constructor`
	Variables	`variable`
	Structures	`struct`
	Fields	`field`
	Type parameters	`typeParameter`
	Constants	`constant`
	Classes	`class`
	Interfaces	`interface`
	Events	`event`
	Operators	`operator`
	Modules	`module`
	Properties and Attributes	`property`
	Enumerations	`enum`
	Enumeration members	`enumMember`
	References	`reference`
	Keywords	`keyword`
	Files	`file`
	Folders	`folder`
	Colors	`color`
	Unit	`unit`
	Snippet prefixes	`snippet`
	Words	`text`

ref:

Customizing IntelliSense

Terminal Autocomplete

Enable autocompletion

Q: How to enable code autocomplettion in the terminal?
A: Set "terminal.integrated.suggest.enabled": true in settings.json. It supports suggestions for files, folders, commands, command arguments and options in the terminal.

// Enable command autocompletion, path, command help in Terminal
"terminal.integrated.suggest.enabled": true,
"terminal.integrated.shellIntegration.enabled": true,

"terminal.integrated.shellIntegration.enabled": true,: the shell integration script should automatically activate on supported shells launched from VS Code. This is done by injecting arguments and/or environment variables when the shell session launches.

Remap keybindings for triggering suggestions

Manually trigger the code suggestions: defaults to ⌃Space. But it conflicts with other keyboard shortcuts at the OS level, such as default Input Method Editor (IME).

If so, you can rebind the workbench.action.terminal.triggerSuggest command with a custom keybinding (go to the Command Palette (⇧⌘P), and type “Preferences: Open Keyboard Shortcuts”).

// keybindings.json
{
  "key": "tab",
  "command": "workbench.action.terminal.triggerSuggest",
  "when": "config.terminal.integrated.suggest.enabled && terminalFocus && terminalProcessSupported && !terminalSuggestWidgetVisible"
}

This sets the Terminal inline autocomplete trigger to Tab. Use arrow keys to navigate through suggestions, and press Enter to accept.

You have to make sure that you delete the original keybinding for "workbench.action.terminal.triggerSuggest" in keybindings.json to avoid conflict.

My experience is that if both exist, when I presee ⌃Space (intended to change input method), the input method struggles to switch, sometimes it works, sometimes it does NOT. I had to switch to another app and then switch back to VS Code to make it work again.

VS Code terminal autocomplete supported by IntelliSense.

Suggest as you type

The default behavior in VS Code is that you need to manually trigger the code suggestions by pressing Ctrl + Space or Tab (if you have modified the keybindings as above).

If you want to enable automatic suggestions as you type, you can add the following to setting.json:

// show automatically depending on the content of the command line
"terminal.integrated.suggest.quickSuggestions": true

Read HERE for more settings about IntelliSense support in the terminal.

Terminal Appearance

The look of Visual Studio Code’s terminal can be customized extensively.

Settings to customize terminal appearance start with terminal.integrated..

Color customizations can be done via workbench.colorCustomizations setting.

Here is a useful theme generator for VS Code Terminal. It modifies your "workbench.colorCustomizations" in settings.json.

For example, the following code customizes the background and text color of the terminal:

"workbench.colorCustomizations" : {
  "terminal.background":"#181818",
  "terminal.foreground":"#D8D8D8",
}

GitHub Copilot

GitHub Copilot is the AI assistant in VS Code that helps you write code faster and with less effort. It provides code suggestions, autocompletes lines or entire functions, and even generates code based on comments or function names. ** Commonly used keyboard shortcuts:

Open chat view: ^⌘I
Start inline chat: ^I (modified from ⌘I to avoid conflict with italic style)

Code Completion

Code Completion Quick Start

Settings

github.copilot.enable - enable or disable inline completions for all or specific languages.
editor.inlineSuggest.fontFamily - configure the font for the inline completions.
editor.inlineSuggest.showToolbar - enable or disable the toolbar that appears for inline completions.
editor.inlineSuggest.syntaxHighlightingEnabled - enable or disable syntax highlighting for inline completions.

Q: How does inline suggestions work?
A: As you type, GitHub Copilot generates code suggestions in real-time, displaying them as ghost text directly in your editor. You can accept the suggestions by pressing Tab (accept all) or Cmd+ Right Arrow (accept next word), or you can ignore them and continue typing.

inline suggestions.gif — Git source: @Mark, https://stackoverflow.com/a/68264996. Note this is based on Windows. Use `Cmd` to replace `Alt` on Mac.

Q: How to partially accept suggestions?
A: You might not want to accept an entire suggestion from GitHub Copilot. You can use

⌘→ to accept the next word of a suggestion, and
⌘] to accept the next line.

Does NOT work; conflict with system indent.

Re-mapped to Alt+] to accept the next line.

My current keybindings.json contains:

// Accept Next Line from GitHub Copilot inline suggestion
{
  "key": "alt+]",
  "command": "editor.action.inlineSuggest.acceptNextLine",
  "when": "editorTextFocus && inlineSuggestionVisible"
}

Now you can use ⌥+] to accept the next line from GitHub Copilot inline suggestion.

Or you can hover the ghost text, a dialog (see below) will apear, click … to Accpet Line.

GitHub Copilot hover highlight — Inline Suggestion Dialog.

Q: How to see alternative suggestions?
A: For any given input, Copilot might offer multiple, alternative suggestions. You can hover over the suggestion and click < or > to navigate to any of the other suggestions. Keyboard shortcut: Option + ] to cycle through suggestions.

Q: How to make inline suggestions (ghost text) automatically disappear after a delay if you don’t accept them?
A: No native support for this feature yet.

Q: ESC which is both used for closing inline suggestions and for entering command mode in Vim, how to avoid conflict?
A: You can change the keybinding for inline suggestions.

{
  "key": "ctrl+u",
  "command": "editor.action.inlineSuggest.hide",
  "when": "editorTextFocus && inlineSuggestionVisible && vim.mode == 'Insert'"
}

This will allow you to use Ctrl + U to close inline suggestions while still using Esc for command mode in Vim.

But, you can just keep on typing to dismiss the inline suggestion. It’s not really necessary to close it manually.

Next Edit Suggestion

Copilot next edit suggestions (Copilot NES) is a feature that provides suggestions for the next edit you might want to make in your code.

Navigate to the Next suggested code changes with the Tab key.
- You can then accept a suggestion with the Tab key again.
An arrow in the gutter indicates if there is an edit suggestion available.

You can hover over the arrow to explore the edit suggestion menu, which includes keyboard shortcuts and settings configuration:

Q: How to reduce districtions by edit suggestions?
A: To disable showing the code changes in the editor, enable the editor.inlineSuggest.edits.showCollapsed setting in the Settings editor.

Prvent Enter from Submitting

Q: In chat window, set Enter to line break and Shift + Enter to submit.
A: Add the following settings to keybindings.json (Command Palette, type “Preferences: Open Keyboard Shortcuts”):

{
    "key": "shift+enter",
    "command": "workbench.action.chat.submit",
    "when": "inChatInput"
},
{
    "key": "enter",
    "command": "-workbench.action.chat.submit",
    "when": "inChatInput"
},
{
    "key": "enter",
    "command": "editor.action.insertLineAfter",
    "when": "inChatInput"
}

- before workbench.action.chat.submit means to remove the original keybinding for Enter.
The leading – means unbinding.

To summarize the Enter behavior:

Enter now creates a new line in GitHub Copilot Chat
Shift+Enter submits your message

AI Modes

Explain different modes of Github Copilot:

Agent Mode 🤖
- Complex, multi-step tasks that require planning and coordination
- Tasks that span multiple files or require understanding project structure
- When you need systematic problem-solving with multiple tool invocations
- Research and analysis tasks that require gathering information from various sources
Edit Mode ✏️
- Direct code modifications and quick fixes
- When you know exactly what needs to be changed
- Focused, single-purpose edits
- Implementing specific functionality or bug fixes
Ask Mode 💬
- Learning and understanding concepts
- No code modifications
- Educational and consultative

Choose AI Correct Model

Model type	Models
Fast coding	GPT-4o Claude Sonnet 3.5 Claude Sonnet 3.7 Gemini 2.0 Flash
Reasoning/planning	Claude Sonnet 3.7 Thinking o1 o3-mini

Auto model selection

There come limits with your subscription plan. So it’s important to optimize model selection to balance performance and cost. Auto selects the best model to ensure that you get the optimal performance and reduce the likelihood of rate limits.

When using auto model selection, VS Code uses a variable, model multiplier, e.g., 1x or 0x after model names based on the automatically selected model. If you are a paid user, auto applies a 10% request discount. For example, if auto selects Sonnet 4, it will be counted as 0.9x of a premium request; if auto selects GPT-5-mini, this counts as 0x because the model is included for paid users. You can see which model and model multiplier are used by hovering over the chat response.

If you are a paid user and run out of premium requests, auto will always choose a 0x model (for example, GPT-5 mini), so you can continue using auto without interruption.

Miscellaneous

Q: How to delete chat histories?
A: When you have a long chat, Copilot takes time to load the conversation history and might get slow. Deleting the history helps Copilot to have quick reactions. In the chat window, click the icon, it will show history chats in the command palette. You can delete any chats from there.

Chat histories are stored in /Users/menghan/Library/Application Support/Code/User/workspaceStorage/[long-serial-number...]/chatSessions

Update: Jan 2026 (version 1.108), you can now right click the chat session in the sidebar to delete it directly.

GitLens

Inline Blame

Inline blame will show a ghost text at the end of the current line indicating who make the last change and the current status of the line.

Q: How to disable inline blame?
A: Open Settings and type GitLens: Current Line, uncheck the Enabled box.

ref: Turn off git blame timeline

The following shows a GitLens Gutter Blame.

Gutter/File Blame displays blame information in the gutter (the area to the left of your code), providing a way to see who last modified a line, when, and in which commit.

Type GitLens: Toggle File Blame in the Command Palette (⇧⌘P) to enable/disable it.

Q: How to remove GitLens’ toolbar in the open editor panel?
A: Set the following in the settings.json file:

"gitlens.menus": {
    "editorGroup": {
        "blame": false,
        "compare": false
    }
},

Restore to Previous Revision

Sidebar > GitLens Inspect > File History, all previous revisions of the file will be listed.

Find the version you want to restore to. You can open them to view or compare with the current version.

Right click the version you want to restore to, you have two options:

“Restore Changes (Checkout)” is equivalent to performing a git checkout <commit-id> <file-path> or git restore --source=<commit-id> <file-path> command. It specifically targets a file and restores its content to the state it was in at a particular commit. This is useful when you want to revert a single file to an earlier version without affecting other files or your current branch.
“Restore Previous Changes” leverages VS Code’s internal file history tracking, which can be useful for recovering lost work or reverting uncommitted changes. This is distinct from Git’s version control and operates on the local file system’s history.

Ref:

SQL Server (MSSQL)

FactSet: Connect to Azure SQL with Microsoft Entra authentication and SqlClient

FactSet uses Microsoft Entra ID as the authentication type. Microsoft Entra ID is previously known as Azure Active Directory (Azure AD)

Microsoft Entra authentication uses identities in Microsoft Entra ID to access data sources such as Azure SQL Database.

Active Directory Interactive authentication supports multifactor authentication technology to connect to Azure SQL data sources. If you provide this authentication mode in the connection string, an Azure authentication screen appears and asks the user to enter valid credentials. You can’t specify the password in the connection string.

Issue: cannot run SQL notebook as in Azure Data Studio

Q: How to pad line with dashes until 80 characters long. A: No quick fix. Can use vim to do this.

Select the lines you want to pad.
Press : to enter the command-line mode and type.
```
:'<,'>normal 80A-<Esc>81|dw
```
Command breakdown:
- :'<,'>: Selects the current visual selection.
- normal : Enters normal mode for the selected lines.
- 80A-: Appends at the end of the line a dash (-) 80 times
- <Esc>: Exits insert mode.
- 81|dw: Moves the cursor to the column 81 (81|) and deletes the rest of the line (dw, delete until the beginning of next word; dashes count as one word).
Note that :norm is a shorthand for :normal, which allows you to run normal mode commands on the selected lines.
Press Enter to execute the command.

ref:

Vim: https://vi.stackexchange.com/questions/415/adding-80-column-wide-comment-header-block-with-centered-text

FAQ

Q: How to share scripts among multiple projects in one solution? For instance, mathjax config file?
A: I put them in a common folder, e.g., /Users/menghan/Library/CloudStorage/OneDrive-Norduniversitet/_shared-resources, and then use relative file path to reference them in different projects.

filters:
  - ../../_shared-resources/filters/color-text.lua
  - ../../_shared-resources/filters/unlisted-sections.lua
  - ../../_shared-resources/filters/nested-ordered-list.lua
format:
  pdf:
    include-in-header: ../../_shared-resources/latex/preamble.tex
    fontsize: 12pt

Q: The terminal shows a yellow warning as follows, how to disable it?

The following extensions want to relaunch the terminal to contribute to its environment:

Python Debugger: Enables use of no-config debugging, debugpy , in the terminal.

A: This warning appears because the Python Debugger extension wants to modify the terminal environment. Open settings.json, add the following line to disable it:

"python.terminal.activateEnvironment": false

Q: How to disable cursor from blinking?
A: Set the following in settings.json:

"editor.cursorBlinking": "solid",

"editor.cursorBlinking" controls the cursor animation style. Possible values are:

blink: The cursor blinks. Default behavior.
smooth: The cursor fades in and out smoothly.
phase: The cursor fades in and out in phases.
expand: The cursor expands and contracts.
solid: The cursor does not blink.

Layout

Keyboard shortcuts

Version Control

Code Snippets

List of User Defined Snippets

Configuration

Share configurations

Export

Import

Markdown

Markdown All in One

Markdown Preview Enhanced

Customize CSS

Configuration

Export as PDF

Markdown+Math

Quarto

LaTeX-Workshop

Code Spell Checker

Customization

Foreign language support

British English

Enable CSpell ONLY for certain file types

IntelliSense

Terminal Autocomplete

Terminal Appearance

GitHub Copilot

Code Completion

Next Edit Suggestion

Prvent Enter from Submitting

AI Modes

Miscellaneous

GitLens

Restore to Previous Revision

SQL Server (MSSQL)

FAQ