fala-dev
 
vscode-eslint
ESLintIntegrates ESLint JavaScript into VS Code.
Microsoft
gitlens
GitLens — Git superchargedSupercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more
GitKraken
material-icon-theme
Material Icon ThemeMaterial Design Icons for Visual Studio Code
Philipp Kief
remote-ssh
Remote - SSHOpen any folder on a remote machine using SSH and take advantage of VS Code's full feature set.
Microsoft
remote-ssh-edit
Remote - SSH: Editing Configuration FilesEdit SSH configuration files
Microsoft
vsliveshare
Live ShareReal-time collaborative development from the comfort of your favorite tools.
Microsoft
remote-explorer
Remote ExplorerView remote machines for SSH and Tunnels.
Microsoft
code-spell-checker
Code Spell CheckerSpelling checker for source code
Street Side Software
vscode-tailwindcss
Tailwind CSS IntelliSenseIntelligent Tailwind CSS tooling for VS Code
Tailwind Labs
dotenv
DotENVSupport for dotenv file syntax
mikestead
vscode-todo-highlight
TODO Highlighthighlight TODOs, FIXMEs, and any keywords, annotations...
Wayou Liu
vscode-sqlite
SQLiteExplore and query SQLite databases.
alexcvzz
vsliveshare-pack
Live Share Extension PackCollection of extensions that enable real-time collaborative development with VS Live Share.
Microsoft
prisma
PrismaAdds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.
Prisma
shades-of-purple
Shades of Purple🦄 A professional theme suite with hand-picked & bold shades of purple for your VS Code editor and terminal apps. One of the excellent, most downloaded, and top-rated VSCode Themes on the marketplace. Part of VSCode.pro course.
Ahmad Awais ⚡
better-toml
Better TOMLBetter TOML Language support
bungcip
vscode-styled-components
vscode-styled-componentsSyntax highlighting for styled-components
Styled Components
polacode
Polacode📸 Polaroid for your code
P & P
fluent-icons
Fluent IconsFluent product icons for Visual Studio Code
Miguel Solorio
postcss
PostCSS Language SupportSyntax highlighting for modern and experimental CSS in VSCode
csstools
console-ninja
Console NinjaJavaScript console.log output and runtime errors right next to your code.
Wallaby.js
vscode-css-modules
CSS ModulesVisual Studio Code extension for CSS Modules
clinyong
vscode-deno
DenoA language server client for Deno.
denoland
regex
Regex PreviewerRegex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.
Christof Marti
theme-omni
Omni ThemeDark theme created by Rocketseat 🚀
Rocketseat
vscode-mdx
MDXLanguage support for MDX
unified
vscode-apollo
Apollo GraphQLRich editor support for GraphQL client and server development that seamlessly integrates with the Apollo platform
Apollo GraphQL
catppuccin-vsc
Catppuccin for VSCode🦌 Soothing pastel theme for VSCode
Catppuccin
symbols
SymbolsA simple file icon theme for VS Code
Miguel Solorio
min-theme
Min ThemeA minimal theme that comes in dark and light.
Miguel Solorio
code-spell-checker-portuguese-brazilian
Brazilian Portuguese - Code Spell CheckerBrazilian Portuguese dictionary extension for VS Code.
Street Side Software
vscode-fix-checksums
Fix VSCode ChecksumsA VSCode extension to adjust checksums after changes to core files
Jürg Lehni
convert-css-in-js
CSS-in-JSCSS-in-JS autocomplete and conversion
paulmolluzzo
vscode-graphql-execution
GraphQL: Inline Operation ExecutionExecute graphql operations from your code (revived!)
GraphQL Foundation
FreeMarker
FreeMarkerSyntax highlight for FreeMarker
Daniel Cortes
rose-pine
Rosé PineAll natural pine, faux fur and a bit of soho vibes for the classy minimalist
Rosé Pine
js-debug-companion
JavaScript Debugger Companion ExtensionCompanion extension to js-debug that provides capability for remote debugging
Microsoft
js-debug
JavaScript DebuggerAn extension for debugging Node.js programs and Chrome.
Microsoft
theme-launchbase
Launchbase ThemeLaunchbase theme for vscode
Mayk Brito
vscode-iterm2-theme-sync
iTerm2 Theme Sync
tusaeff
vscode-js-profile-table
Table Visualizer for JavaScript ProfilesText visualizer for profiles taken from the JavaScript debugger
Microsoft
retypewriter
reTypewriterReply the steps of your changes at ease.
Anthony Fu
vscode-deno
Deno
v3.42.0
denoland
|
876,603
|
(48)
A language server client for Deno.

Deno for Visual Studio Code

GitHub Workflow Status

Visual Studio Marketplace Version Visual Studio Marketplace Installs Visual Studio Marketplace Downloads Visual Studio Marketplace Rating (Stars)

This extension adds support for using Deno with Visual Studio Code, powered by the Deno language server.

⚠️ Important: You need to have a version of Deno CLI installed (v1.13.0 or later). The extension requires the executable and by default will use the environment path. You can explicitly set the path to the executable in Visual Studio Code Settings for deno.path.

Check here for instructions on how to install the Deno CLI.

Basic Usage of the Extension

Features

  • Type checking for JavaScript and TypeScript, including quick fixes, hover cards, intellisense, and more.
  • Integrates with the version of the Deno CLI you have installed, ensuring there is alignment between your editor and the Deno CLI.
  • Resolution of modules in line with Deno CLI's module resolution strategy allows caching of remote modules in Deno CLI's cache.
  • Integration to Deno CLI's linting functionality, including inline diagnostics and hover cards.
  • Integration to Deno CLI's formatting functionality.
  • Allow specifying of import maps and TypeScript configuration files that are used with the Deno CLI.
  • Auto completion for imports.
  • Workspace folder configuration.
  • Testing Code Lens.
  • Provides Tasks for the Deno CLI.

Usage

  1. Install the Deno CLI.
  2. Install this extension.
  3. Ensure deno is available in the environment path, or set its path via the deno.path setting in VSCode.
  4. Open the VS Code command palette with Ctrl+Shift+P, and run the Deno: Enable command.

We recognize that not every TypeScript/JavaScript project that you might work on in VSCode uses Deno — therefore, by default, this extension will only apply the Deno language server when the setting deno.enable is set to true. This can be done via editing the settings or using the command Deno: Initialize Workspace Configuration.

While you can enable Deno globally, you probably only want to do that if every JavaScript/TypeScript workspace you work on in VSCode is a Deno based one.

Commands

The extension provides several commands:

  • Deno: Cache - instructs Deno to fetch and cache all the dependencies of the current file open in the editor. This is similar to doing deno cache on the command line. Deno will not automatically fetch and cache remote dependencies.

    ℹ️   If there are missing dependencies in a module, the extension will provide a quick fix to fetch and cache those dependencies, which invokes this command for you.

  • Deno: Enable - will enable Deno on the current workspace. Alternatively you can create a deno.json or deno.jsonc file at the root of your workspace.

  • Deno: Language Server Status - displays a page of information about the status of the Deno Language Server. Useful when submitting a bug about the extension or the language server.

  • Deno: Reload Import Registries Cache - reload any cached responses from the configured import registries.

  • Deno: Welcome - displays the information document that appears when the extension is first installed.

Formatting

The extension provides formatting capabilities for JavaScript, TypeScript, JSX, TSX, JSON and markdown documents. When choosing to format a document or setting up a default formatter for these type of files, the extension should be listed as an option.

When configuring a formatter, you use the extension name, which in the case of this extension is denoland.vscode-deno. For example, to configure Deno to format your TypeScript files automatically on saving, you might set your settings.json in the workspace like this:

{
  "deno.enable": true,
  "deno.lint": true,
  "editor.formatOnSave": true,
  "[typescript]": { "editor.defaultFormatter": "denoland.vscode-deno" }
}

Or if you wanted to have Deno be your default formatter overall:

{
  "deno.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}

Troubleshoot: If you choose this option, ensure your user settings don't have any language-specific settings set for this. VSCode will add this automatically in some cases:

// User `settings.json`:
{
  // Remove this:
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  }
}

The formatter will respect the settings in your Deno configuration file, which can be explicitly set via deno.config or automatically detected in the workspace. You can find more information about formatter settings at Deno Tools - Formatter.

ℹ️   It does not currently provide format-on-paste or format-on-type capabilities.

Configuration

You can control the settings for this extension through your VS Code settings page. You can open the settings page using the Ctrl+, keyboard shortcut. The extension has the following configuration options:

  • deno.enable: Controls if the Deno Language Server is enabled. When enabled, the extension will disable the built-in VSCode JavaScript and TypeScript language services, and will use the Deno Language Server (deno lsp) instead. boolean, default false
  • deno.disablePaths: Controls if the Deno Language Server is disabled for specific paths of the workspace folder. Defaults to an empty list.
  • deno.enablePaths: Controls if the Deno Language Server is enabled for only specific paths of the workspace folder.
  • deno.path: A path to the deno executable. If unset, the extension will use the environment path to resolve the deno executable. If set, the extension will use the supplied path. The path should include the executable name (e.g. /usr/bin/deno, C:\Program Files\deno\deno.exe).
  • deno.cache: Controls the location of the cache (DENO_DIR) for the Deno language server. This is similar to setting the DENO_DIR environment variable on the command line.
  • deno.cacheOnSave: Controls if the extension should cache the active document's dependencies on save.
  • deno.codeLens.implementations: Enables or disables the display of code lens information for implementations for items in the code. boolean, default false
  • deno.codeLens.references: Enables or disables the display of code lens information for references of items in the code. boolean, default false
  • deno.codeLens.referencesAllFunctions: Enables or disables the display of code lens information for all functions in the code. Requires deno.codeLens.references to be enabled as well. boolean, default false
  • deno.codeLens.test: Enables or disables the display of test code lens on Deno tests. boolean, default false. This feature is deprecated, see deno.testing below
  • deno.codeLens.testArgs: Provides additional arguments that should be set when invoking the Deno CLI test from a code lens. array of strings, default [ "--allow-all" ].
  • deno.config: The file path to a configuration file. This is the equivalent to using --config on the command line. The path can be either be relative to the workspace, or an absolute path. It is recommended you name this file either deno.json or deno.jsonc. string, default null, examples: ./deno.jsonc, /path/to/deno.jsonc, C:\path\to\deno.jsonc
  • deno.documentPreloadLimit: Maximum number of file system entries to traverse when finding scripts to preload into TypeScript on startup. Set this to 0 to disable document preloading.
  • deno.importMap: The file path to an import map. This is the equivalent to using --import-map on the command line. Import maps provide a way to "relocate" modules based on their specifiers. The path can either be relative to the workspace, or an absolute path. string, default null, examples: ./import_map.json, /path/to/import_map.json, C:\path\to\import_map.json
  • deno.inlayHints.enumMemberValues.enabled - Enable/disable inlay hints for enum values.
  • deno.inlayHints.functionLikeReturnTypes.enabled - Enable/disable inlay hints for implicit function return types.
  • deno.inlayHints.parameterNames.enabled - Enable/disable inlay hints for parameter names. Values can be "none", "literals", "all".
  • deno.inlayHints.parameterNames.suppressWhenArgumentMatchesName - Do not display an inlay hint when the argument name matches the parameter.
  • deno.inlayHints.parameterTypes.enabled - Enable/disable inlay hints for implicit parameter types.
  • deno.inlayHints.propertyDeclarationTypes.enabled - Enable/disable inlay hints for implicit property declarations.
  • deno.inlayHints.variableTypes.enabled - Enable/disable inlay hints for implicit variable types.
  • deno.inlayHints.variableTypes.suppressWhenTypeMatchesName - Suppress type hints where the variable name matches the implicit type.
  • deno.internalDebug: If enabled the Deno Language Server will log additional internal diagnostic information.
  • deno.internalInspect: Enables the inspector server for the JS runtime used by the Deno Language Server to host its TS server.
  • deno.lint: Controls if linting information will be provided by the Deno Language Server. boolean, default true
  • deno.maxTsServerMemory: Maximum amount of memory the TypeScript isolate can use. Defaults to 3072 (3GB).
  • deno.suggest.imports.hosts: A map of domain hosts (origins) that are used for suggesting import auto completions. (See: ImportCompletions for more information.)
  • deno.testing.args: Arguments to use when running tests via the Test Explorer. Defaults to [ \"--allow-all\" ].
  • deno.unstable: Controls if code will be executed with Deno's unstable APIs. Affects execution which is triggered through the extension, such as test code lenses. This is the equivalent to using --unstable on the command line. boolean, default false

Compatibility

To see which versions of this extension can be used with each version of the Deno CLI, consult the following table.

| Deno CLI | vscode-deno | | --------------- | --------------- | | 1.40.0 onwards | 3.40.0 onwards | | 1.37.2 - 1.39.4 | 3.34.0 - 3.39.0 | | 1.37.1 | 3.32.0 - 3.33.3 | | 1.37.0 | 3.28.0 - 3.31.0 | | ? - 1.36.4 | 3.27.0 |

Version ranges are inclusive. Incompatibilites prior to 3.27.0 were not tracked.

Contribute

Learn how to setup & contribute to this project

Thanks

This project was inspired by justjavac/vscode-deno and axetroy/vscode-deno. Thanks for their contributions.

License

The MIT License