Thi's avatar
HomeAboutNotesBlogTopicsToolsReading
About|My sketches |Cooking |Cafe icon Support Thi
💌 [email protected]

VSCode

Anh-Thi Dinh
SkillsTools
To disabled font weight bold in the terminal of vscode/cursor
Add below settings to settings.json
Custom class name to show the autocompletion (default to className)
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:
Enable preview (nhấn file in the left sidebar → show file as preview)
Search trong settings, “Workbench → Editor: Enable Preview”
Files to exclude list
Change style of active tab
Fixed tab size
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.
reStructuredText
preview engine sphinx is not installed → in Ubuntu 20.04+
Add extra path to auto complete (python)
Open settings.json and add,
Fix Pylint unable to import
Open settings.json and add,
Enable font ligatures
For example, you type > + =, it becomes ≥.
  1. Download Fira Code Font.
  1. Extract and then install the font after that.
  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).
Note: In order for snippets working with markdown file, you have to add below settings (VSCode's settings.json)
Show the verticle line for blocks (indentation guides)
"editor.guides.indentation": false,
Pylint
Disable tslint
Ignore some pylint for jupyter notebook
👉 Note: Jupyter notebook.
Just place before the line like this,
Change font for internal terminal
Make a good corresponding to zsh.
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.
 
About|My sketches |Cooking |Cafe icon Support Thi
💌 [email protected]
1"terminal.integrated.fontWeightBold": "normal"
2# re-enable
3"terminal.integrated.fontWeightBold": "bold"
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.
1# to check the locations
2dotnet --info
3# to remove completely
4sudo rm -rf /usr/local/share/dotnet
1node_modules, .next, .git, yarn.lock, .yarn*, .j.map, .js, .d.ts, .mjs, .cjs, .map, .md, .cts, .mts
For web projects.
1"workbench.colorCustomizations": {
2	"tab.activeBorder": "#0A84FF",
3	"tab.unfocusedActiveBorder": "#000000",
4	"tab.activeBackground": "#7ecd6821"
5}
1{
2	"workbench.editor.tabSizing": "fixed",
3	"workbench.editor.tabSizingFixedMaxWidth": 350,
4	"workbench.editor.tabSizingFixedMinWidth": 250,
5}
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
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
1{
2	"python.autoComplete.extraPaths": [
3		"C:\\\\Users\\\\dinha\\\\Documents\\\\GitHub\\\\dataswati\\\\python-dataswati"
4	],
5}
1"python.linting.pylintArgs": [
2	"--init-hook",
3	"import sys; sys.path.append('C:\\\\Users\\\\dinha\\\\Documents\\\\GitHub\\\\dataswati\\\\python-dataswati')"
4]
1{
2	"editor.fontFamily": "'Fira Code', 'Consolas', 'Courier New', monospace",
3	"editor.fontLigatures": true
4}
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},
1"[markdown]": {
2  "editor.quickSuggestions": true
3}
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}
1{
2  "settings": {
3    "typescript.validate.enable": false,
4    "javascript.validate.enable": false
5  }
6}
1# pyright: reportMissingImports=false, reportUnusedVariable=warning, reportUntypedBaseClass=error
2import frontmatter
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