Vscode Md

  

Use [[wiki-links]], backlinks, #tags and @bibtex-citations for fast-navigation of markdown notes.

  1. Vscode Md Pro
  2. Best Markdown Editor
  3. Markdown All In One
  4. Markdown Enhanced Preview
  5. Vscode Md Online

Vscode-elixir adds syntax highlighting and more for the Elixir programming language. Vscode-gemfile lets you hover over a gem in your Gemfile and get a link to it on RubyGems. VSCodeFirstUpper lets you convert strings of text into different styles of title casing. I use this for all of my blog. Visual Studio Code is a free, lightweight and powerful code editor for Windows, Mac and Linux, based on Electron/Chromium. It has built-in support for JavaScript, TypeScript and Node.js and a rich extension ecosystem that adds intellisense, debugging, syntax highlighting etc. For many languages (C, Python, Go, Java).

Automatically create notes from new inline [[wiki-links]].

Bring some of the awesome features from apps like Notational Velocity, nvalt, Bear, FSNotes, Obsidian to VS Code, where you also have (1) Vim key bindings and (2) excellent extensibility.

Install from the VSCode Marketplace. See more in the blog post: Suping Up VS Code as a Markdown Notebook.

For common issues / workarounds, please see TROUBLESHOOTING-FAQ.md

Also, take a look at the RECOMMENDED-SETTINGS.md

[[wiki-links]]

A popular feature in Roam Research and Bear is the ability to quickly reference other notes using 'Cross-Note Links' in the [[wiki-link]] style.

Markdown Notes provides syntax highlighting, auto-complete, Go to Definition (editor.action.revealDefinition), and Peek Definition (editor.action.peekDefinition) support for wiki-links to notes in a workspace.

By default, the extension assumes each markdown file in a workspace has a unique name, so that note.md will resolve to the file with this name, regardless of whether or not this file exists in any subdirectory path. This tends to be a bit cleaner, but if you want support for multiple files with the same name, in settings.json set 'vscodeMarkdownNotes.workspaceFilenameConvention': 'relativePaths', and you'll get completions like note1/note.md and ../note2/note.md.

You can configure piped wiki-link syntax to use either [[file description]], or [[description file]] format (to show pretty titles instead of filenames in your rendered HTML).

#tags

Syntax highlighting for #tags.

@bibtex-citations

Use pandoc-style citations in your notes (eg @author_title_year) to get syntax highlighting, autocompletion and go to definition, if you setup a global BibTeX file with your references.

New Note Command

Provides a command for quickly creating a new note.

You can bind this to a keyboard shortcut by adding to your keybindings.json:

NB: there is also a command vscodeMarkdownNotes.newNoteFromSelection which will 'cut' the selected text from the current document, prompt for a note name, create a new note with that name, and insert the new text into that note.

Screenshots

Create New Note On Missing Go To Definition

Intellisense Completion for Wiki Links, uniqueFilenames

Intellisense Completion for Wiki Links, relativePaths

Intellisense Completion for BibTeX Citations

Backlinks Explorer Panel

Syntax Highlighting for Tags and Wiki Links

Peek and Go to Definition for Wiki Links

Peek References to Wiki Links

Peek References to Tag

Peek Definition for BibTeX Citations

Find All References to Wiki Links

Find All References to Tag

Vscode Md

cmd+shift+f to Search Workspace for Notes with Tag

Piped Wiki Link Support

New Note Command

New Note from Selection Command

dev

Run npm install first.

TODO

  • Provide better support for ignore patterns, eg, don't complete file.md if it is within ignored_dir/
  • Add option to complete files without extension, to [[file]] vs file.md
  • Should we support links to headings? eg, file.md#heading-text?

Development and Release

Test

For focused jest tests,

  • install: https://marketplace.visualstudio.com/items?itemName=kortina.run-in-terminal
  • and https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

Run a focused test with ,rl on a line in a test file, eg line 8, which will make a call to:

to run only the test at that line. NB, you will also need these bindings for ,rl

To run all tests,

All tests are headless.

Release

To create a new release,

To install the vsix locally:

  1. Select Extensions (Ctrl + Shift + X)
  2. Open More Action menu (ellipsis on the top) and click Install from VSIX…
  3. Locate VSIX file and select.
  4. Reload VSCode.
Helpful Links
  • completion: https://github.com/microsoft/vscode-extension-samples/blob/master/completions-sample/src/extension.ts
  • syntax: https://flight-manual.atom.io/hacking-atom/sections/creating-a-legacy-textmate-grammar/
  • vscode syntax: https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide

Visual Studio Code is a free, lightweight and powerful code editor for Windows, Mac and Linux, based on Electron/Chromium. It has built-in support for JavaScript, TypeScript and Node.js and a rich extension ecosystem that adds intellisense, debugging, syntax highlighting etc. for many languages (C++, Python, Go, Java). It works without too much setup. Get started here.

It is NOT a full-fledged IDE like Visual Studio. The two are completely separate products. The only commonality with Visual Studio is that both are from Microsoft.

Here's what works well:

  • Editing code works well especially when you get used to the keyboard shortcuts. VS Code is very responsive and can handle even big code bases like Chromium.
  • Git integration is a blast. Built-in side-by-side view, local commit and even extensions for history and blame view.
  • Debugging works well, even though startup times can be fairly high (~40 seconds with gdb on Linux, much lower on Windows). You can step through code, inspect variables, view call stacks for multiple threads etc.
    • For more information on debugging Python code, see here.
  • Opening files and searching solution-wide works well now after having problems in earlier versions.
  • Building works well. Build tools are easy to integrate. Warnings and errors are displayed on a separate page and you can click to jump to the corresponding line of code.
  • VSCode Remote, which allows you to edit remotely-hosted code, and even run computationally expensive plugins like vscode-clangd on the remote server/workstation (see the Remote section). Great for working- from-home. (Googlers: See go/vscode-remote].)

Updating This Page

Please keep this doc up-to-date. VS Code is still in active development and subject to changes. This doc is checked into the Chromium git repo, so if you make changes, read the documentation guidelines and submit a change list.

All file paths and commands have been tested on Linux. Windows and Mac might require a slightly different setup (e.g. Ctrl -> Cmd). Please update this page accordingly.

Setup

Installation

Follow the steps on https://code.visualstudio.com/docs/setup/setup-overview. To run it on Linux, just navigate to Chromium's src folder and type code . in a terminal. The argument to code is the base directory of the workspace. VS Code does not require project or solution files. However, it does store workspace settings in a .vscode folder in your base directory.

Fixes for Known Issues

Git on Windows

If you only have the depot_tools Git installed on your machine, even though it is in your PATH, VS Code will ignore it as it seems to be looking for git.exe. You will have to add the following to your settings in order for the Git integration to work:

Useful Extensions

Up to now, you have a basic version of VS Code without much language support. Next, we will install some useful extensions. Jump to the extensions window (Ctrl+Shift+X) and install these extensions, you will most likely use them every day:

  • C/C++ - Code formatting, debugging, Intellisense. Enables the use of clang-format (via the C_Cpp.clang_format_path setting) and format-on-save (via the editor.formatOnSave setting).
  • Python - Linting, intellisense, code formatting, refactoring, debugging, snippets.
  • Toggle Header/Source - Toggles between .cc and .h with F4. The C/C++ extension supports this as well through Alt+O but sometimes chooses the wrong file when there are multiple files in the workspace that have the same name.
  • Protobuf support - Syntax highlighting for .proto files.
  • Mojom IDL support - Syntax highlighting and a language server for .mojom files. This isn't available on the VS Code marketplace for now. You need to install it manually.
  • vscode-clangd - If you do not plan to use VSCode for debugging, vscode-clangd is a great alternative to C/C++ IntelliSense. It knows about how to compile Chromium, enabling it to provide smarter autocomplete than C/C++ IntelliSense as well as allowing you to jump from functions to their definitions. See clangd.md for setup instructions. If you need to debug, enable C/C++ extension but set “C_Cpp: Intelli Sense Engine” to disabled, and restart VSCode.
  • Rewrap - Wrap lines at 80 characters with Alt+Q.
  • Remote - Remotely connect to your workstation through SSH using your laptop. See the Remote section for more information about how to set this up.

The following extensions might be useful for you as well:

  • Annotator - Git blame view.
  • Git History (git log) - Git history view.
  • chromium-codesearch - Mac and Linux only: adds ability to open the current line in Chromium Code Search. All other functionality is deprecated, so currently only of limited usefulness.
  • change-case - Quickly change the case of the current selection or current word.
  • Instant Markdown - Instant markdown (.md) preview in your browser as you type. This document was written with this extension!

Also be sure to take a look at the VS Code marketplace to check out other useful extensions.

Color Scheme

Press Ctrl+Shift+P, color, Enter to pick a color scheme for the editor. There are also tons of color schemes available for download on the marketplace.

Usage Tips

  • Ctrl+P opens a search box to find and open a file.
  • F1 or Ctrl+Shift+P opens a search box to find a command (e.g. Tasks: Run Task).
  • Ctrl+K, Ctrl+S opens the key bindings editor.
  • Ctrl+` toggles the built-in terminal.
  • Ctrl+Shift+M toggles the problems view (linter warnings, compile errors and warnings). You'll swicth a lot between terminal and problem view during compilation.
  • Alt+O switches between the source/header file.
  • Ctrl+G jumps to a line.
  • F12 jumps to the definition of the symbol at the cursor (also available on right-click context menu).
  • Shift+F12 or F1, CodeSearchReferences, Return shows all references of the symbol at the cursor.
  • F1, CodeSearchOpen, Return opens the current file in Code Search.
  • Ctrl+D selects the word at the cursor. Pressing it multiple times multi-selects the next occurrences, so typing in one types in all of them, and Ctrl+U deselects the last occurrence.
  • Ctrl+K, Z enters Zen Mode, a fullscreen editing mode with nothing but the current editor visible.
  • Ctrl+X without anything selected cuts the current line. Ctrl+V pastes the line.

Java/Android Support

To get Java support in VS Code, you‘ll need to install the ‘Java Extension Pack’ extension, but you’ll want to immediately uninstall or disable the Maven for Java extension so it stops nagging you as we won't need it.

Setting up code completion/reference finding/etc.

You‘ll need to generate a placeholder .classpath file and locate it. In order to generate it, right click on any Java source folder in the left panel and choose “Add folder to java source path”. Its location will depend on whether you’re doing local or remote development. Local path on linux will look something like:

~/.vscode/data/User/workspaceStorage/<hash>/redhat.java/jdt_ws/<project>/.classpath

You might find multiple folders when looking for <project>. Choose anything except jdt.ls-java-project. If you only see jdt.ls-java-project, try using the “Add folder to java source path” option again.

If doing remote development, the file will be under ~/.vscode-server/ on your remote machine.

You'll need to replace all of the contents of that file with the contents of tools/android/eclipse/.classpath (external) or clank/development/ide/eclipse/.classpath (generated by gclient runhooks for Chrome developers), and then replace some paths as vscode interprets some paths differently from eclipse.

  • Replace: kind='src' path=' with kind='src' path='_/
    • eg. <classpathentry kind='src' path='_/android_webview/glue/java/src'/>
  • Replace: kind='lib' path='../src with kind='lib' path='_
    • eg. <classpathentry kind='lib' path='_/out/Debug/lib.java/base/base_java.jar'/>
  • Remove all nested paths (or exclude them from their parents). At time of writing:
    • third_party/android_protobuf/src/java/src/main/java
    • third_party/junit/src/src/main/java

Also, make sure export ANDROID_HOME=/usr/local/google/home/{your_ldap}/Android/Sdk is in the remote machine's ~/.bashrc.

Then restart vscode, open a Java file, and wait for a bit.

Debugging tips:

  • Right clicking on a folder in vscode and clicking “Add folder to java source path” will error if there are syntax problems with your classpath. (Don‘t use this actually add new paths to your classpath as it won’t work correctly)
    • If there are no syntax errors, ensure the correct .classpath file is being used by seeing if the folder was actually added to the .classpath file you edited.

Setup For Chromium

VS Code is configured via JSON files. This paragraph contains JSON configuration files that are useful for Chromium development, in particular. See VS Code documentation for an introduction to VS Code customization.

Workspace Settings

Open the file //tools/vscode/settings.json5, and check out the default settings there. Feel free to commit added or removed settings to enable better team development, or change settings locally to suit personal preference. Remember to replace <full_path_to_your_home>! To use these settings wholesale, enter the following commands into your terminal while at the src directory:

Note: these settings assume that the workspace folder (the root folder displayed in the Explorer tab) is Chromium's src/ directory. If this is not the case, replace any references to ${workspaceFolder} with the path to your src/.

Tasks

Next, we'll tell VS Code how to compile our code, run tests, and to read warnings and errors from the build output. Open the file //tools/vscode/tasks.json5. This will provide tasks to do basic things. You might have to adjust the commands to your situation and needs. To use these settings wholesale, enter the following command into your terminal:

Launch Commands

Launch commands are the equivalent of F5 in Visual Studio: They launch some program or a debugger. Optionally, they can run some task defined in tasks.json. Launch commands can be run from the debug view (Ctrl+Shift+D). Open the file at //tools/vscode/launch.json5 and adjust the example launch commands to your situation and needs (e.g., the value of “type” needs adjustment for Windows). To use these settings wholesale, enter the following command into your terminal:

Key Bindings

To edit key bindings, press Ctrl+K, Ctrl+S. You‘ll see the defaults on the left and your overrides on the right stored in the file keybindings.json. To change a key binding, copy the corresponding key binding to the right. It’s fairly self-explanatory.

You can bind any command to a key, even commands specified by extensions like CodeSearchOpen. For instance, to bind CodeSearchOpen to F2 to , simply add { 'key': 'F2', 'command': 'cs.open' },. Note that the command title CodeSearchOpen won't work. You have to get the actual command name from the package.json file of the extension.

If you are used to other editors, you can also install your favorite keymap. For instance, to install eclipse keymaps, install the vscode-eclipse-keybindings extension. More keymaps can be found in the marketplace.

Some key bindings that are likely to be useful for you are available at //tools/vscode/keybindings.json5. Please take a look and adjust them to your situation and needs. To use these settings wholesale, enter the following command into your terminal:

Remote

VSCode now has a Remote framework that allows you to use VSCode on your laptop while your code is hosted elsewhere. This really shines when used in conjunction with the vscode-clangd plugin, which allows clangd to run remotely as well.

To get this to run, install the Remote pack extension, and then make sure your ssh config file has your remote connection:

~/.ssh/config:

VSCode will then list this connection in the ‘Remote Explorer’ section on the left. To launch VSCode with this connection, click on the ‘+window’ icon next to the listed hostname. It has you choose a folder - use the ‘src’ folder root. This will open a new VSCode window in ‘Remote’ mode. Now you can install extensions specifically for your remote connection, like vscode-clangd, etc.

Chromebooks

For Googlers, here are Google-specific instructions for setting up remote development on chromebooks without using Crostini.

Windows & SSH

This currently is difficult on Windows because VSCode remote tools assumes ‘sshd’ is installed, which isn't the case on Windows. If someone figures out how to get vscode remote working on windows with ssh please update this document :)

Snippets

There are some useful snippets provided in //tools/vscode/cpp.json5.

You can either install them in your user profile (path may vary depending on the platform):

Or install them as project snippets after installing the Project Snippets extension:

Tips

The out folder

Vscode Md Pro

Automatically generated code is put into a subfolder of out/, which means that these files are ignored by VS Code (see files.exclude above) and cannot be opened e.g. from quick-open (Ctrl+P). As of version 1.21, VS Code does not support negated glob commands, but you can define a set of exclude pattern to include only out/Debug/gen:

Once it does, you can use

in files.exclude instead of the symlink.

Using VS Code as git editor

Add [core] editor = 'code --wait' to your ~/.gitconfig file in order to use VS Code as editor for git commit messages etc. Note that the editor starts up significantly slower than nano or vim. To use VS Code as merge tool, add [merge] tool = code.

Best Markdown Editor

Task Names

Note that we named the tasks 1-build_chrome_debug, 2-build_chrome_release etc. This allows you to quickly execute tasks by pressing their number: Press Ctrl+P and enter task <n>, where <n> is the number of the task. You can also create a keyboard shortcut for running a task. File > Preferences > Keyboard Shortcuts and add { 'key': 'ctrl+r', 'command': 'workbench.action.tasks.runTask', 'when': '!inDebugMode' }. Then it's sufficient to press Ctrl+R and enter <n>.

Working on Laptop

You might want to disable git status autorefresh to save battery.

Editing in multiple Git repositories

If you frequently work in multiple Git repositories that are part of the Chromium repository, you might find that the built-in tooling does not work as expected for files that exist below folders that are part of a .gitignore file checked in to Chromium.

To work around this, you can add the directories you edit as separate folders entries in your workspace configuration, and ensure that the directories that are ignored in Chromium are listed before the Chromium src path.

Markdown All In One

To edit this, go to Settings -> Select the Workspace tab, and choose to open as JSON (button in the top right), and configure folders like this (change paths to match your local setup and usage):

Unable to open $File resource is not available when debugging Chromium on Linux

Chromium recently changed the file path to be relative to the output dir. Check gn args out/$dir --list if strip_absolute_paths_from_debug_symbols is true (which is the default), set cwd to the output dir. otherwise, set cwd to ${workspaceRoot}.

You-Complete-Me

The You-Complete-Me VS Code extension is now deprecated with a suggestion to use clangd.

Markdown Enhanced Preview

More

Vscode Md Online

More tips and tricks can be found here.