Thevscode extension integrates directly to the Deno CLI using the languageserver protocol. This helps ensure that the information you get about your codealigns to how that code will work when you try to run it under the Deno CLI.
The Deno extension is installed like other extensions in vscode, by browsing theextensions in vscode and choosing to install the Deno extension. Or if youhave vscode installed, you can view the extensionvia this link and install it if youhaven't already done so.
Once you install the extension for the first time, you should receive a splashpage that welcomes you to the extension. (If you missed it, or want to see itagain, just use the Deno: Welcome command from the command palette.)
We realize that not every project you might edit with vscode is a Deno project.By default, vscode comes with a built-in TypeScript/JavaScript language servicewhich is used when editing TypeScript or JavaScript files.
In order to have support for Deno APIs as well as the ability to resolve modulesas the Deno CLI does, you need to enable Deno for the workspace. The most directway to do this is to use the Deno: Initialize Workspace Configuration from thevscodecommand palette.This will activate a helper which will ask if you want to also enable lintingand the Deno unstable APIs for the project. This command will instruct vscode tostore these settings in the workspace configuration (your workspace root.vscode/settings.json). Once the helper is finished, you will get anotification that Deno is setup for the project.
While vscode supports Workspace Folders, they can bechallenging to configure and use. Because of this, the option Deno: EnablePaths has been introduced (or "deno.enablePaths" if manually editing). In agiven workspace (or workspace folder), sub-paths can be enabled for Deno, whilecode outside those paths will be not be enabled and the vscode built-inJavaScript/TypeScript language server will be used.
The same engine that provides the diagnostics when using deno lint can also beused via the extension. By enabling the Deno: Lint setting in the settingspanel (or deno.lint if editing settings in JSON) the editor should start todisplay lint "warnings" in your code. See the Lintersection for more information on how to use the Deno linter.
It is possible to use import maps in the editor.The option Deno: Import Map (or deno.importMap if manually editing) shouldbe set to the value of the import map file. If the path is a relative path, itwill be resolved relative to the root of the workspace.
Typically a configuration file is not required for a Deno project. There are afew scenarios though where it might be useful, and if you want to have the samesettings applied as when specifying the --config option on the command line,the Deno: Config option can be used (or deno.config if manually editing).
The Deno extension will also auto-identify and apply a deno.jsonc ordeno.json by looking in the workspace root for the configuration file andapplying it. Manually specifying a Deno: Config option will override thisautomatic behavior.
The Deno CLI comes with a built-in formatter which can be accessed usingdeno fmt but can also be configured to be used by vscode. Deno should be onthe drop down list for the Editor: Default formatter setting (or if you areediting settings manually, it would be"editor.defaultFormatter": "denoland.vscode-deno").
The extension looks for the Deno CLI executable in the host's PATH, butsometimes that isn't desirable and the Deno: Path can be set (or deno.pathif manually editing) to point to the Deno executable. If the path provided isrelative, it will be resolved relative to the root of the workspace.
The extension supports registry auto-completions, where a remoteregistry/website of modules can optionally provide metadata that allows a clientto discover modules. By default, the extension will check hosts/origins to seeif they support suggestions, and if it does, the extension will prompt you tosee if you want to enable it. This behavior can be changed by unsetting Deno >Suggest > Imports: Auto Discover (or deno.suggest.imports.autoDiscover ifmanually editing).
Deno supports remote modules and will fetch remote modules and store themlocally in a cache. When you do something like deno run, deno test,deno info or deno cache on the command line, the Deno CLI will go and try tofetch any remote modules and their dependencies and populate the cache.
While developing code in the editor, if the module is not in the cache, you willget a diagnostic like Uncached or missing remote URL:" " for any missing remote modules. Deno willnot automatically try to cache the module, unless it is a completion from aregistry import suggestion (see above).
The language server currently supports several code lenses (actionablecontextual information interspersed in the code) that allow you to get greaterinsight into the code. Most are disabled by default, but can easily be enabled:
The Deno CLI includes a built-in testing APIavailable under Deno.test. The extension and language server have a code lensenabled by default which provides the ability to run a test from within theeditor.
This is a link that if you click it, the extension will start up the Deno CLI torun the test for you and display the output. Based on your other settings, theextension will try to run your test with the same settings. If you need toadjust the arguments provided when doing deno test, you can do so by settingthe deno.codeLens.testArgs setting.
The extension provides integration with the built-in VSCode debugger. You cangenerate a configuration by: going to Run and Debug panel, clickingcreate a launch.json file and selecting Deno option from the availabledebugger options.
By default, the configuration will use --inspect-wait flag if the configuredDeno version is greater than 1.29, or --inspect-brk for versions older than1.29. This ensures that the debugger has a chance to connect to your program andregister all the breakpoints specified in the code.
The extension communicates directly to the language server, but for somedevelopment tasks, you might want to execute the CLI directly. The extensionprovides a task definition for allowing you to create tasks that execute thedeno CLI from within the editor.
When you add folders to your workspace and open the settings, you will haveaccess to the per folder settings. If you look at the .vscode/settings.json ina folder, you will see a visual indication of what settings apply to folder,versus those that come from the workspace configuration:
While you can use this feature to enable mixed-Deno projects, you might want toconsiderpartially Deno enabling a workspace. Butwith this feature, you can have a mixed Deno project, where some of theworkspace folders are Deno enabled and some are not. This is useful whencreating a project that might have a front-end component, where you want adifferent configuration for that front end code.
In order to support this, you would create a new workspace (or add a folder toan existing workspace) and in the settings configure one of the folders to havedeno.enable set to true and one set to false. Once you save the workspaceconfiguration, you notice that the Deno language server only applies diagnosticsto the enabled folders, while the other folder will use the built-in TypeScriptcompiler of vscode to supply diagnostics for TypeScript and JavaScript files.
The way a development container is configured is by having a .devcontainerfolder as part of the workspace with configuration information in the folder. Ifyou are opening a project that already contains a dev container with Deno, youwill be prompted to build the dev container and access the project under that.Everything should "just work".
If you have an existing Deno project that you would like to add dev containersupport to, you will want to execute the command Remote-Containers: AddDevelopment Container Configuration Files... in the command palette and thenchoose Show All Definitions... and then search for the Deno definition. Thiswill setup a baseline .devcontainer configuration for you that will installthe latest version of the Deno CLI in the container.
Once added, vscode will prompt if you want to open the project in a devcontainer. If you choose to, vscode will build the development container andre-open the workspace using the development container, which will have the DenoCLI and the vscode_deno extension installed in it.
This is normally a situation where Deno is not enabled on a Deno project. If youlook at the source of the diagnostic you are probably going to see a ts(2691).The ts indicates that it is coming from the built-in TypeScript/JavaScriptengine in vscode. You will want to check that your configuration is set properlyand the Deno: Enable/deno.enable is true.
You can also check what the Deno language server thinks is your current activeconfiguration by using Deno: Language Server Status from the command palette.This will display a document from the language server with a section namedWorkspace Configuration. This will provide you with what vscode is reportingthe configuration is to the language server.
If "enable" is set to true in there, and the error message still persists,you might want to try restarting vscode, as the part of the extension that"mutes" the built-in TypeScript diagnostics for files is not working asdesigned. If the issue still persists after a restart, you may have encountereda bug that we didn't expect and searching the issues and reporting a bug at _deno is the next step.
3a8082e126