Visual Studio Code (VSCode): The Dump

Markdown Tips in VSCode

Interlinking Markdown Documents

Anchors from headings are automaticaly created. Just type ###### Some subhead
In the same file, we can link with just [go to](#some-subhead). Notice that we lowercased and replaces spaces with dashes.

To link to other files, easiest way is to drag-drop file and hold Shift key. That will produce something [like this](Some%20Filename.md#anchor). We can also link to line numbers like [file](file#L60)

Link to folder [like this](Folder) possible also and it would open folder in Explorer bar, something like “Reveal In SideBar” but for folders.

Also try Find File References option on mouse right-click that will find us any mention of that file. Amazing!

Mostly from this source and here

Remote editing

This is common Visual Studio Code problem for Remote SSH editing.

Warning: inotify watchers?

This is a part of inotify filesystem options. A sensible setting is typically 100000 or more on a development machine and Ubuntu’s default of 8K is way too little.

Retrieve the current amount:

sysctl fs.inotify
# or: cat /proc/sys/fs/inotify/max_user_watches

Retrieve a number of opened files for the user:

lsof | grep inotify | wc -l

We can increase the values like this

sysctl -n -w fs.inotify.max_user_watches=1048576
sysctl -n -w fs.inotify.max_user_instances=512

But to make it permanent, it must being added to /etc/sysctl.conf:

echo fs.inotify.max_user_watches=1048576 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Sources:

Increasing the amount of inotify watchers
How to get the number of inotify watches in use
How do I find out what inotify watches have been registered?
Lists all the owners of inotify watchers and their watcher count: fatso83/dotfiles

PHP in VSCode

Setup VS Code for Efficient PHP development 🚀 | Theodo Getting VSCode ready for PHP development - North Creation Agency

Annoyances

Annoyance Fix: Remove Extra Space on Top When Searching With CTRL+F

search inside file scroll to top space; ctrl-f; find in file space

The annoyance is that editor has an extra space on the top, that is possible to scroll to, when opening find/replace panel, for example using Ctrl+F.

Discussion and a solution is here: Editor area has an extra space on the top when opening find/replace panel

There is a settings option now:

"editor.find.addExtraSpaceOnTop": false,

Markdown Footnotes Preview

Extension: Markdown Footnotes

Here’s a simple footnote,¹ and here’s a longer one.²

Visual Studio Code - YouTube

Images in VSCode

WOOW Luna Paint is an image editor inside VS Code that supports png, bmp, jpg, and newly added ico support.

It uses WebGL, so is very performant and

VS Code native, built on WebGL for perfmance,
Formats supported: .bmp, .ico, .jpg, .png, .tga, .webp.
Import from clipboard,
supports Hot Exit, which means if you close VS Code without saving it will restore unsaved changes, but for small images only
Remote support: Edit images remotely in a GitHub Codespace or via the Remote WSL, SSH and Containers extensions.
Web support: The extension works in vscode.dev and github.

Renaming files inside VSCode

Inline renaming files in Expolorer View inside VSCode is easily done with F2 shortcut.

Ja sam čest korisnik fenomenalnog Total Commander-a, pa sam navikao na shortcut Shift-F6 za tu istu funkciju Inline file rename. Da bi sa tim istim shortcutom nastavio i u VSCode, treba podešavatiPreferences: Keyboard Shortcuts.

Default F6 Shift-F6 are actions “View: Focus Next Part” and “View: Focus Previous Part”, što znači navigate across the workbench parts, u redosledu focusa Editor > Status Bar > Side Bar > Panela ako neki od njih is not visible neće ga ni prikazati. Meni to za sada nije nimalo korisno, pa ću ga za zadovoljstvom remapirati.

Renaming files within VSCode

You can always easily rename files within the Explorer View in VSCode using the F2 shortcut, but as a frequent user of the phenomenal Total Commander, I am accustomed to the Shift-F6 shortcut for inline file renaming. To continue using that same shortcut in VSCode, I must adjust the Preferences: Keyboard Shortcuts.

The default F6 and Shift-F6 actions are “View: Focus Next Part” and “View: Focus Previous Part”, which means navigating across the workbench parts in the focus order of Editor > Status Bar > Side Bar > Panel. If any of these parts are not visible, it will not be displayed. For now, this is not particularly useful for me, so I’ll happily remap it.

On Keyboard Shortcuts

VSCode Extensions

VSCode Extension: Markdown Improvements

Markdown Preview Enhanced je sve u jednom za preview sa 3.8M korisnika. Markdown All in One - Visual Studio Marketplace sa 5.6M usera

Markdown Preview Github Styling

GitHub Markdown Preview je takođe GitHub a ustvari komplet potrebnih extenzija.

Marp for VS Code - Visual Studio Marketplace

Markdown Editing Helpers

VSCode Extension: PDF Viewer

Both run the latest pdf.js underneath.

vscode-pdf with 2.8M users, 3.1M size
PDF Viewer, 100K users, 3.2M size

VSCode Extension: Convert Markdown to HTML and PDF

Markdown Exporter

Markdown Converter - Visual Studio Marketplace Markdown Extended - Visual Studio Marketplace Export to Self Contained HTML / PDF / PNG / JPEG Markdown PDF has 1.4M users, zato što povlači ceo Chromium download, zaboravi na ovu extensiju.

Mermaid | Diagramming and charting tool je ludilo za dijagrame, a open-source je Marp: Markdown Presentation Ecosystem za slajdove, open-source

Grammarly - Visual Studio Marketplace LTeX – LanguageTool grammar/spell checking - Visual Studio Marketplace jer je fork od onoga

Customizations I did in Visual Studio Code

I can’t remember the exact occasion, but I applied this in VSCode, probably to switch focus from editor to terminal on non-US layouts.

AI Fuzzy Find in Files

phonetic search across files, fuzzy full-text search, fuzzy find in files, phonetic matching, artificial-intelligence-based heuristic searching, ai powered document search, neural search, ai full-text search engines, natural language processing, ai powered document search

If you’re looking for better text search than literal or even phonetic (aka “fuzzy”), there may be hope on the horizon in the form of AI-driven search. People have been asking for it, such as Fuzzy find in files.

There are libraries such as jamesturk/jellyfish for doing approximate and phonetic matching of strings and even Emacs has something like Ivy/Swiper: abo-abo/swiper. But nothing for VSCode, unfortunately.

But it turns out that there are some solutions out there – most of them just not applied yet.

I’ve discovered spaCy, a free open-source library for Natural Language Processing in Python. It’s very robust and might be just what I’m looking for. There’s also a commercial product called Prodigy with already trained pipelines for English and Croatian.

A few people have mentioned it, but nothing material came out of it: Visual Studio Code integration?. I don’t have enough knowledge to really understand what they are talking about.

Too bad, there’s still nothing for VSCode or similar.

Go to File = Find File by name

search for files by name, quick open file, quickpick fuzzy search

Note that quick file finding by name in VSCode is fuzzy from the start, by default. Some people have complained about this and probably there is a room for improvements. People usually recommend switching to the fzf algorithm, and for that, there’s even an extension: Fuzzy Search.

It’s all good for me when it comes to quickly opening files in VSCode - but what I’m looking for is something else entirely.

Ako želim da dupliram fajlu i istom folderu, već duže vreme me nervira što moram prvo da uradim “Copy” pa zatim da idem na folder koji je obično malo scrollovanja, i tek onda radi “Paste” kako treba. Nekog lika je ista stvar nervirala: add right-click Duplicate to file explorer, pa je dobio savršen odgovor da možeš da držiš “Ctrl” i da onda draguješ fajl bilo gde, i on će biti kloniran. Savršeno!

A Smarter Way to Clone File

streamlined file duplication, effortlessly duplicate a file

To duplicate a file within the same folder, it can be frustrating to have to first perform a “Copy” action, navigate to the folder item which often requires a bit of scrolling, and then perform a “Paste” operation. Well, someone else shared the same frustration and proposed adding a right-click “Duplicate” option to the file explorer.

The solution? You can hold down “Ctrl” and then drag the file anywhere and it will be cloned. Elegant!

VSCode Slugify and Transliteration

I needed a simple Slugify-function in VSCode and in the process stumbled upon “our” transliterations.

For Serbian transliteration, I chose pixelzdesign/vscode-sertranslit simply because it’s the only one. However, its transliteration is not flawless as it was easy to spot mistakes, while its slugify function is particularly bad.

I opted for NeptuneDesign/vs-slug for the “slugify” function, which works much better.

Test for slugify:

Slugify test sadrži slova "Gefäßschädigung" Čičak ali i čudne знакове као "»", па Vladan је љубав ali to i Чоловић Владан па поново "_" са "ђш÷×÷×[]" čudnim znacima

Test for transliteration:

Пребаци са ћирилице на латиницу
I sa latinice na ćirilicu čak i kad je ljubičica i miljenik i Nemanja

I don’t understand why they don’t all work perfectly since the map for all languages is located here slugify/charmap.json.

VSCode Fast Searching

Poznat je shortcut Ctrl + D ali on dodatno ima par trikova. Za početak, napravi selekciju nekog teksta i pritisni na primer Alt + W i pogledaj u desni gornji ugao editor gde ćeš ugledati neke minijaturne indikatore. To su opcije koje možeš podešavati za našu funkcijeu select the next occurrence of the current selection (Alt + C, Alt + W and Alt + R za match case, whole words and regexp search).

Nakon pritiska Ctrl + D, kada pređeš na sledeću selekciju, možeš je preskočiti sa Ctrl + K pa nastaviti daljje.

Pokušavam da otkrijem shortcut na selektujem reč i da sa tim shortcutom odmah skočim na sledeći find. Simulaciju toga dobijam pritiskom na Ctrl + K, Ctrl + D dok je selektovana neka reč, ali siguran sam da ima jedan shortcut.

To se zove: Move Last Selection To Next Find Match

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


  {
    "key": "f3",
    "command": "editor.action.moveSelectionToNextFindMatch",
    "when": "editorFocus && editorHasSelection && !findWidgetVisible"
  },
  {
    "key": "shift+f3",
    "command": "editor.action.moveSelectionToPreviousFindMatch",
    "when": "editorTextFocus && !findWidgetVisible"
  }

Some nice VSCode TabOut

Turn Your Keyboard into a Text-Editing Rocket | by Owen Caulfield | Medium

Ako imaš jedan folder, sva setovanja su u podfolderu .vscode i tu je i fajl settings.json koji je ustvari setovanje za workspace. Međutim, ako imaš više foldera ubačenih u workspace, a oni to zovu “Multi-root” workspaces, onda

You can override the display name of your folders with the name attribute, to give more meaningful names to folders in the Explorer https://code.visualstudio.com/docs/editor/multi-root-workspaces#_workspace-file-schema

The exact location depends on the configuration of your remote development setup and the specific remote environment you’re using. By default, VSCode creates a hidden folder named “.vscode-server” in your user directory on the remote machine, where temporary files and workspace-specific settings are stored.

VSCode Plugin to pack all “untitled” folders and download

Na remote se nalazi u “.vscode-server” in your user directory on the remote machine na lokalu se nalazi “c:\Users\Common User\scoop\persist\vscode\data\user-data” pa je tu “Backups” i onda po sesijama.

To je agonija pronaći… I zato treba takva ekstenzija… da zapakuje sve

Set of extensions on every remote SSH host

“Always installed” extensions Extensions that you would like to always have installed on any SSH host

Users settings file: Library/Application Support/Code/User/settings.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


"remote.SSH.defaultExtensions": [
  "esbenp.prettier-vscode",
  "alefragnani.bookmarks",
  "stkb.rewrap",
  "shd101wyy.markdown-preview-enhanced",
  "darkriszty.markdown-table-prettify",
  "dakara.transformer",
  "hilleer.yaml-plus-json",
  "brunnerh.file-properties-viewer",
  "christian-kohler.path-intellisense",
  "bmewburn.vscode-intelephense-client",
  "funkyremi.vscode-google-translate",
  "faaydemir.openaipoweredsnippet",
  "TabNine.tabnine-vscode", 
  // "Codeium.codeium", 
  "Continue.continue", 
  // "sourcegraph.cody-ai", 
],

This is the first footnote. ↩︎
Here’s one with multiple paragraphs and code.

Indent paragraphs to include them in the footnote.

{ my code }

Add as many paragraphs as you like. ↩︎

date 06. Nov 2020 | modified 10. Jun 2024

filename: Tips » VSCode » Dump