VSCode

Anh-Thi Dinh
SkillsTools
Custom class name to show the autocompletion (default to className)
1{
2	"settings": {
3		"tailwindCSS.classAttributes": ["className", "textClassName", ".*ClassName.*"]
4	}
5}
Cannot applied to .vscode/settings.json but can be used in the workspace setting. Sources: link, link.
Cannot turn off format on save?
First, try the solutions suggested here.
If the official settings don't work, consider binding "Saving without formatting" to cmd+S as described in this solution.
Run JavaScript, C#, F#, R, SQL, KQL, PowerShell in Jupyter notebook of VSCode
We will use Polyglot Notebooks. Some remarks (for macOS M1):
  1. Install .NET SDK (M1 use arm64)
  1. Install this extension
  1. Restart VSCode and maybe after restarting VSCode, we need to reload the window too
  1. We cannot choose any “Polyglot Notebook: …” from the Command Palette. Instead, create a new normal jupyter notebook, change the kernel to .NET Interactive
  1. Inside the cell, change the language to the language we want, for example, “javascript”.
  1. That’s it!
To run python and R codes, check this note.
🚨
Caution: After installing .NET, a service named dotnet may continuously run in the background, potentially slowing down your system by consuming excessive CPU. If you wish to remove it, consult Microsoft's official uninstallation guide. For a quick solution, I simply use this command:
1# to check the locations
2dotnet --info
3# to remove completely
4sudo rm -rf /usr/local/share/dotnet
Enable preview (nhấn file in the left sidebar → show file as preview)
Search trong settings, “Workbench → Editor: Enable Preview”
Files to exclude list
1node_modules, .next, .git, yarn.lock, .yarn*, .j.map, .js, .d.ts, .mjs, .cjs, .map, .md, .cts, .mts
For web projects.
Change style of active tab
1"workbench.colorCustomizations": {
2	"tab.activeBorder": "#0A84FF",
3	"tab.unfocusedActiveBorder": "#000000",
4	"tab.activeBackground": "#7ecd6821"
5}
Fixed tab size
1{
2	"workbench.editor.tabSizing": "fixed",
3	"workbench.editor.tabSizingFixedMaxWidth": 350,
4	"workbench.editor.tabSizingFixedMinWidth": 250,
5}
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
👉 I’m using these 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 (python)
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]
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.
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.
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}
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
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.