VSCode

Anh-Thi Dinh
Skills

Install

Download and install here.

Using VSCode in terminal

Open VSCode > cmd + shift + p > Type "shell command" > Select "Install code command in path" > Navigate to any project on terminal and type code . top open it.

Extensions

1# list the installed extensions
2# unix
3code --list-extensions | xargs -L 1 echo code --install-extension
4# windows
5code --list-extensions | % { "code --install-extension $_" }
6
7# To re-install on a new machine
8# just copy-paste the results and run on terminal

reStructuredText

preview engine sphinx is not installed → in Ubuntu 20.04+
1sudo apt install python-is-python3
2# prevent Python 2 from being installed as a dependency of something
3sudo apt-mark hold python2 python2-minimal python2.7 python2.7-minimal libpython2-stdlib libpython2.7-minimal libpython2.7-stdlib

Add extra path to auto complete

Open settings.json and add,
1{
2	"python.autoComplete.extraPaths": [
3		"C:\\\\Users\\\\dinha\\\\Documents\\\\GitHub\\\\dataswati\\\\python-dataswati"
4	],
5}

Fix Pylint unable to import

Open settings.json and add,
1"python.linting.pylintArgs": [
2	"--init-hook",
3	"import sys; sys.path.append('C:\\\\Users\\\\dinha\\\\Documents\\\\GitHub\\\\dataswati\\\\python-dataswati')"
4]

Appearances

👉 Change font for internal terminal? Read this section.

Enable font ligatures

For example, you type > + =, it becomes ≥.
  1. Download Fira Code Font.
  1. Extract and then install the font after that.
      2. 1{
2"editor.fontFamily": "'Fira Code', 'Consolas', 'Courier New', monospace",
3"editor.fontLigatures": true
4}
  1. Reload VSC.
💡 If you only wanna apply this setting for some file format, you can click on the language at the bottom right of VSC, then click Configure 'Markdown' language based setting.

Regular Expression

👉 Official doc of using regex in vscode.
1# Replace
2<http://bit.ly/abc>
3# with
4[<http://bit.ly/abc>](<http://bit.ly/abc>)
5
6# Finding box
7(<http://bit.ly>.*)
8# replace box
9[$1]($1)
1# Replace
2**Course 1**
3# with
4Course 1
5
6# Finding box
7\\*\\*Course (.*)\\*\\*
8# replace box
9Course $1
1# Replace
2::: col-2-equal
3content
4:::
5
6# with
7<div class="col-2-equal">
8
9content
10</div>
11
12# In find box -> the key: [\\s\\S\\r]*?
13::: col-2-equal([\\s\\S\\r]*?):::
14
15# In replace box
16<div class="col-2-equal">\\n$1</div>

Exlude files/folders in search results

Go to Preferences > Settings > search exclude and modify inside section Search: Exclude. More patterns can be found here.

Connect ssh folders in VSC

Read this tutorial.
  1. Install extension Remote - SSH
  1. View > Command Palette... > type "SSH" and choose "Remote-SSH: Connect to Host..." > choose "+ Add New SSH Host..."
  1. Type ssh user@host > Enter > choose a file to be updated, e.g. ~/.ssh/config.
  1. Click Connect if there is any popup in VSC.
  1. Choose platform on the server, usually Linux.

Error?

Settings

👉 Check this file.
Use settings for a custom file extension,
1# the list of extension name will be showed when typing
2"[markdown]": {
3    "editor.tabSize": 4,
4},
5"[restructuredtext]": {
6    "editor.wordWrap": "on",
7}

Work with multiple workspace

💡A tip to work with different workspace in the same screen (Because it's difficult to distinguish "quickly" between opened windows) => change color scheme for each workspace!
In the current workspace > Go to "Preferences" > Settings > Click on tab "Workspace" > Workbench > Appearance > Color Theme.

Snippets

💡 Why need? Quickly add a long snippet of text (with suggestion) with several keywords. For example, I add ###Thi console.log() when debugging codes in JS. Then, I search the whole project for the line console.log() that I forgot to delete.
How? Open Preferences > User Snippets > either you create a global file or type and find a good format (for example, type "markdown" and create snippets for this format only).
1# Only available to js and typescript files
2# Usage: type "logt" to add
3# /*###Thi*/ console.log(...);
4"[JS] Print to console": {
5  "scope": "javascript,typescript",
6  "prefix": "logt",
7  "body": "/*###Thi*/ console.log('$1');",
8  "description": "Log output to console"
9},
Note: In order for snippets working with markdown file, you have to add below settings (VSCode's settings.json)
1"[markdown]": {
2  "editor.quickSuggestions": true
3}

Other settings

Show the verticle line for blocks (indentation guides): "editor.guides.indentation": false,

Pylint

1# _Unable to import_ some user-defined package
2# 1. Make sure the right env running in vscode
3# For example, popai (conda)
4# 2. Make a symblic link
5ln -s /home/thi/git/dataswati/python-dataswati/popai /home/thi/miniconda3/envs/popai/lib/python3.8/popai
1# unresolved import
2# Ctrl + Shift + P
3# Preferences: Open Workspace Settings (JSON)
4"settings": {
5    "python.pythonPath": "/usr/bin/python3",
6    "python.autoComplete.extraPaths": [
7        "/usr/lib/python3/dist-packages",
8        "/app/src/python/"
9        # or other paths you want!
10    ]
11}
Disable tslint
1{
2  "settings": {
3    "typescript.validate.enable": false,
4    "javascript.validate.enable": false
5  }
6}

Ignore some pylint for jupyter notebook

👉 Note: Jupyter notebook.
Just place before the line like this,
1# pyright: reportMissingImports=false, reportUnusedVariable=warning, reportUntypedBaseClass=error
2import frontmatter

Terminal

Change font for internal terminal

Make a good corresponding to zsh.
1# Open settings JSON
2"terminal.integrated.cursorStyle": "line",
3"terminal.integrated.fontFamily": "Source Code Pro Medium",
4"terminal.integrated.fontSize": 18
5
6# on MacOSX
7"terminal.integrated.fontFamily": "Source Code Pro for Powerline",
8"terminal.integrated.fontSize": 16

Open Terminal window in the split screen mode

If you wanna open terminal below the 2nd screen in the vertical split screen mode, you can: Cmd (or Ctrl on Windows/Linux) + Shift + P to open Command Palette > search for "Terminal: Move Terminal into Editor Area".

Hot keys

One can change the default keyboard shortcut by going to: File > Preferences > Keyboard Shortcuts.
  • Quick search file: Ctrl + P.
  • Get back to previous views: Ctrl + Alt + (Linux), Alt + < (Windows), Ctrl + (MacOS).
  • Get forward: Ctrl + Shift + (Linux), Alt + > (Windows), Ctrl + Shift + (MacOS).
  • Open Command Palette: Ctrl + Shift + P.
  • Go to line: Ctrl + Shift + P then Go to line.
  • Format document:
    • Format entire doc: (Win/Linux) Ctrl + Shift + I; (Mac) shift + option + F.
    • Format selected text: (Win/Linux) Ctrl + K then K + F; (Mac) cmd + K then cmd + F.
  • Quickly move a line up/down: Alt + up / down (Mac).
  • Quickly duplicate current line: Shift + Alt + down (Mac).
  • Fold: 👉 Using something like //#region ... //#endregion for a region.
    • Fold all: cmd + K then cmd + 0.
    • Fold level 2: cmd + K then cmd + 2.
    • Unfold all: cmd + K then cmd + J.
    • Toggle fold at the current position of the cursor: cmd + K then cmd + L.
    • Toggle all #region: cmd + K then cmd + 8 (close) / 9 (open)
  • Show all references: shift + option + F12
Loading comments...