Visual Studio Code: Difference between revisions
imported>Inclyc m nix-vscode-extensions: typo fix |
m style fixes |
||
| (32 intermediate revisions by 18 users not shown) | |||
| Line 1: | Line 1: | ||
{{note|Visual Studio Code is [[FAQ/unfree|unfree]] | <translate> | ||
<!--T:1--> | |||
{{note|Visual Studio Code is [[FAQ/unfree|unfree]] because its license prohibits distribution. See the [[FAQ/unfree]] page to install unfree software.}}{{Infobox application | |||
| name = Visual Studio Code | |||
| type = Text Editor | |||
| image = Visual_Studio_Code_1.35_icon.svg | |||
| developer = Microsoft | |||
| website = https://code.visualstudio.com/ | |||
| documentation = https://code.visualstudio.com/docs | |||
| bugTracker = https://github.com/microsoft/vscode/issues | |||
| github = https://github.com/microsoft/vscode | |||
| programmingLanguage = TypeScript, JavaScript, HTML, CSS | |||
| os = Linux, macOS, Windows | |||
| initialRelease = 29 April 2015 | |||
}} | |||
'''Visual Studio Code''' is a cross-platform text editor developed by Microsoft, built on the Electron framework. | |||
<!--T:2--> | |||
For the free distribution of the VS Code codebase (without MS branding, telemetry, and [https://marketplace.visualstudio.com/ extension marketplace] replaced by [https://open-vsx.org/ Open VSX]) see [[VSCodium]]. | |||
== Installation == <!--T:3--> | |||
=== NixOS === <!--T:4--> | |||
=== NixOS === | |||
<!--T:5--> | |||
<syntaxHighlight lang=nix> | <syntaxHighlight lang=nix> | ||
environment.systemPackages = with pkgs; [ vscode ]; | environment.systemPackages = with pkgs; [ vscode ]; | ||
</syntaxHighlight> | </syntaxHighlight> | ||
Extensions can be managed using | <!--T:6--> | ||
Extensions can be managed using {{Nixpkg|pkgs/applications/editors/vscode/with-extensions.nix|vscode-with-extensions}} : | |||
< | <!--T:7--> | ||
environment.systemPackages = with pkgs; [ | <syntaxhighlight lang="nix">environment.systemPackages = with pkgs; [ | ||
(vscode-with-extensions.override { | (vscode-with-extensions.override { | ||
vscodeExtensions = with vscode-extensions; [ | vscodeExtensions = with vscode-extensions; [ | ||
jnoortheen.nix-ide | |||
ms-python.python | ms-python.python | ||
ms-azuretools.vscode-docker | ms-azuretools.vscode-docker | ||
| Line 32: | Line 48: | ||
]; | ]; | ||
}) | }) | ||
]; | ];</syntaxhighlight> | ||
</ | |||
<!--T:8--> | |||
Some examples here: [https://github.com/search?type=code&q=language:Nix+"extensionFromVscodeMarketplace" GitHub Search - type:code language:Nix "extensionFromVscodeMarketplace"] | |||
<!--T:9--> | |||
{{Note|For fetching the sha256 string you can use [https://nix.dev/manual/nix/stable/command-ref/new-cli/nix3-store-prefetch-file <code>nix store prefetch-file</code>] like so: | |||
<!--T:10--> | |||
<syntaxhighlight lang="console">$ nix store prefetch-file marketplace.visualstudio.com/_apis/public/gallery/publishers/<publisher>/vsextensions/<extension>/<version>/vspackage</syntaxhighlight> | |||
<!--T:11--> | |||
Example: | |||
<!--T:12--> | |||
<syntaxhighlight lang="console">$ nix store prefetch-file https://marketplace.visualstudio.com/_apis/public/gallery/publishers/ms-vscode-remote/vsextensions/remote-ssh-edit/0.47.2/vspackage</syntaxhighlight>}} | |||
<!--T:13--> | |||
<code>extensionsFromVscodeMarketplace</code> is a manual way to fetch extensions. However, to keep updated from upstream, [https://github.com/nix-community/nix-vscode-extensions nix-community/nix-vscode-extensions] provides the Nix expressions for the majority of available extensions from Open VSX and VSCode Marketplace. A GitHub Action updates the extensions daily. Similarly, [https://github.com/nix-community/nix4vscode nix-community/nix4vscode] provides a Nix overlay for VSCode Marketplace and Open VSX extensions. | |||
<syntaxhighlight lang="nix"> | <!--T:14--> | ||
programs.vscode = { | === Home Manager === | ||
<syntaxhighlight lang="nix">programs.vscode = { | |||
enable = true; | enable = true; | ||
extensions = with pkgs.vscode-extensions; [ | profiles.default.extensions = with pkgs.vscode-extensions; [ | ||
dracula-theme.theme-dracula | dracula-theme.theme-dracula | ||
vscodevim.vim | vscodevim.vim | ||
yzhang.markdown-all-in-one | yzhang.markdown-all-in-one | ||
]; | ]; | ||
}; | };</syntaxhighlight> | ||
</syntaxhighlight> | |||
* See for more options: [https://nix-community.github.io/home-manager/options. | <!--T:15--> | ||
* See for more options: [https://nix-community.github.io/home-manager/options.xhtml#opt-programs.vscode.enable Home Manager Manual: Options - programs.vscode] | |||
* Search for extensions with configurations: [https://search.nixos.org/packages?type=packages&query=vscode-extensions NixOS Search: vscode-extensions] | * Search for extensions with configurations: [https://search.nixos.org/packages?type=packages&query=vscode-extensions NixOS Search: vscode-extensions] | ||
=== | <!--T:16--> | ||
=== Nix-env === | |||
{{Warning|Use of nix-env is unreproducible and thus discouraged and not recommended}}<syntaxhighlight lang="console">$ nix-env -iA nixos.vscode</syntaxhighlight> | |||
< | <!--T:17--> | ||
== Use VS Code extensions without additional configuration == | |||
</ | With {{Nixpkg|pkgs/applications/editors/vscode/generic.nix|vscode.fhs}}, the editor launches inside a [[wikipedia:Filesystem_Hierarchy_Standard|FHS]] compliant chroot environment using {{Manual|nixpkgs|sec-fhs-environments|<code>buildFHSEnv</code>}}. This reintroduces directories such as <code>/bin</code>, <code>/lib</code>, and <code>/usr</code>, which allows for extensions which ship pre-compiled binaries to work with little to no additional nixification. | ||
<!--T:18--> | |||
{{note|{{Manual|nixpkgs|sec-fhs-environments|<code>buildFHSEnv</code>}} allows for ease-of-use at the cost of impurity, non-reproducibility, and denied root access (you cannot use <code>sudo</code> in <code>.fhs</code> packages, also see [https://discourse.nixos.org/t/sudo-does-not-work-from-within-vscode-fhs/14227])}} | |||
<!--T:19--> | |||
=== NixOS === | |||
<syntaxHighlight lang=nix> | <syntaxHighlight lang=nix> | ||
environment.systemPackages = with pkgs; [ vscode.fhs ]; | environment.systemPackages = with pkgs; [ vscode.fhs ]; | ||
</syntaxHighlight> | </syntaxHighlight> | ||
<!--T:20--> | |||
=== Home Manager === | |||
<syntaxHighlight lang=nix> | <syntaxHighlight lang=nix> | ||
programs.vscode = { | programs.vscode = { | ||
| Line 80: | Line 109: | ||
</syntaxHighlight> | </syntaxHighlight> | ||
<!--T:21--> | |||
Adding extension-specific dependencies, these will be added to the FHS environment: | Adding extension-specific dependencies, these will be added to the FHS environment: | ||
< | <syntaxhighlight lang="nix"> | ||
# needed for rust lang server and rust-analyzer extension | # needed for rust lang server and rust-analyzer extension | ||
programs.vscode.package = pkgs.vscode.fhsWithPackages (ps: with ps; [ rustup zlib openssl.dev pkg-config ]); | programs.vscode.package = pkgs.vscode.fhsWithPackages ( | ||
</ | ps: with ps; [ | ||
rustup | |||
zlib | |||
openssl.dev | |||
pkg-config | |||
] | |||
); | |||
</syntaxhighlight> | |||
<!--T:22--> | |||
== Insiders Build == | |||
If you need to test a recent code change, you can run the insiders build. It is designed to run alongside the main build, with a separate <code>code-insiders</code> command and a different config path, so you can leave your main VS Code instance installed/running. | If you need to test a recent code change, you can run the insiders build. It is designed to run alongside the main build, with a separate <code>code-insiders</code> command and a different config path, so you can leave your main VS Code instance installed/running. | ||
The following derivation | <!--T:23--> | ||
The following derivation builds a package with the latest insiders build (on NixOS in <code>environment.systemPackages</code>, or on Home Manager in <code>home.packages</code>) : | |||
<!--T:24--> | |||
<syntaxHighlight lang=nix> | <syntaxHighlight lang=nix> | ||
(pkgs.vscode.override { isInsiders = true; }).overrideAttrs (oldAttrs: rec { | (pkgs.vscode.override { isInsiders = true; }).overrideAttrs (oldAttrs: rec { | ||
src = (builtins.fetchTarball { | src = (builtins.fetchTarball { | ||
url = "https://code.visualstudio.com/sha/download?build=insider&os=linux-x64"; | url = "https://code.visualstudio.com/sha/download?build=insider&os=linux-x64"; | ||
sha256 = " | sha256 = "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"; | ||
}); | }); | ||
version = "latest"; | version = "latest"; | ||
<!--T:25--> | |||
buildInputs = oldAttrs.buildInputs ++ [ pkgs.krb5 ]; | |||
}); | }); | ||
</syntaxHighlight> | </syntaxHighlight> | ||
You will need to update the <code>sha256</code> value for each new Insiders build. The new value will appear in a validation error when you try to build. | <!--T:26--> | ||
''[https://discourse.nixos.org/t/how-to-install-latest-vscode-insiders/7895/4 credits: @jnoortheen]'' | |||
<!--T:27--> | |||
=== Updating insiders placeholder <code>sha256</code> === | |||
You will need to update the placeholder <code>sha256</code> value for each new Insiders build. | |||
<!--T:28--> | |||
The new value will appear in a validation error when you try to build. | |||
<!--T:29--> | |||
Put an arbitrary placeholder value in the <code>sha256</code> field, try to build and you'll get an error message regarding the sha256 value. | |||
=== Resolving the "hash mismatch" error === <!--T:30--> | |||
<!--T:31--> | |||
==== For <code>sha256:</code> ==== | |||
Example:<pre>//-- ... | |||
error: hash mismatch in file downloaded from 'https://code.visualstudio.com/sha/download?build=insider&os=linux-x64': | |||
specified: sha256:AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA | |||
got: sha256:16fzxqs6ql4p2apq9aw7l10h4ag1r7jwlfvknk5rd2zmkscwhn6z | |||
//-- ...</pre> | |||
<!--T:32--> | |||
Copy the "got" value (while stripping out the prepended "<code>sha256:</code>"), and paste it in your placeholder <code>sha256</code> value | |||
<!--T:33--> | |||
Resulting: "<code>16fzxqs6ql4p2apq9aw7l10h4ag1r7jwlfvknk5rd2zmkscwhn6z</code>" | |||
<!--T:34--> | |||
===== For <code>sha256-</code> ===== | |||
Example:<pre>//-- ... | |||
error: hash mismatch in fixed-output derivation '/nix/store/path': | |||
specified: sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA= | |||
got: sha256-aQvTtZdPU2F1UjkFxiLs4A+60A4qc9bXKwKriNsCDPg= | |||
//-- ...</pre> | |||
<!--T:35--> | |||
Copy the "got" value (while stripping out the prepended "<code>sha256-</code>") | |||
<!--T:36--> | |||
Then, run the following python script: | |||
<!--T:37--> | |||
<syntaxhighlight lang="python"> | |||
import base64 | |||
text = b'aQvTtZdPU2F1UjkFxiLs4A+60A4qc9bXKwKriNsCDPg=' # Replace the string in between ' with the according hash | |||
print(base64.decodebytes(text).hex()) | |||
</syntaxhighlight> | |||
<!--T:38--> | |||
Its output should be pasted in your placeholder <code>sha256</code> value | |||
<!--T:39--> | |||
== Creating development environments using nix-shell == | |||
Instead of using configuration.nix to add packages (e.g. Python or NodeJS) for developing code on VSCode, you can instead use nix-shell. This will allow you to seamlessly create development environments with the correct packages for your project, without rebuilding and restarting NixOS. See [[Development_environment_with_nix-shell | this page]] for further instructions in building nix-shell development environments. | |||
<!--T:40--> | |||
=== Automatically switch nix shells when switching projects === | |||
You can do this by using [https://github.com/nix-community/nix-direnv nix-direnv] and [https://marketplace.visualstudio.com/items?itemName=mkhl.direnv the VSCode extension direnv] for integration. View the nix-direnv github page linked for a guide on setting it up. | |||
== | <!--T:41--> | ||
=== Alternative for manually switching shells === | |||
The extension [https://marketplace.visualstudio.com/items?itemName=arrterian.nix-env-selector nix-env-selector] will make switching between different nix-shell environments within VSCode so you can switch between different coding projects easily and manually. It has a guide for setting up nix-shell environments for VSCode. | |||
== Wayland == <!--T:42--> | |||
<!--T:43--> | |||
To make sure VSCode runs on Wayland native instead of Xwayland, you can make it use Ozone Wayland by setting the environment variable <code>NIXOS_OZONE_WL</code> with <code>NIXOS_OZONE_WL=1</code> | |||
[ | <!--T:44--> | ||
See [[Wayland#Electron and Chromium]] | |||
== Updating extension versions == | == Updating extension versions == <!--T:45--> | ||
<!--T:46--> | |||
The Nixpkgs vscode extensions directory contains [https://github.com/NixOS/nixpkgs/blob/master/pkgs/applications/editors/vscode/extensions/update_installed_exts.sh a script] which use <code>code --list-extensions</code> and lookup the latest versions of those extensions to outputs a nix expression with a single <code>extensions</code> attribute of the same type as <code>extensionsFromVscodeMarketplace</code> inputs. | |||
<!--T:47--> | |||
To run it in your current directory:<syntaxhighlight lang="console">$ curl -fsSL https://raw.githubusercontent.com/NixOS/nixpkgs/master/pkgs/applications/editors/vscode/extensions/update_installed_exts.sh | sh</syntaxhighlight> | |||
< | <!--T:48--> | ||
=== Example output === | |||
<syntaxhighlight lang="console">$ curl -fsSL https://raw.githubusercontent.com/NixOS/nixpkgs/master/pkgs/applications/editors/vscode/extensions/update_installed_exts.sh | sh | |||
{ extensions = [ | { extensions = [ | ||
{ | { | ||
| Line 138: | Line 242: | ||
} | } | ||
]; | ]; | ||
} | }</syntaxhighlight> | ||
</ | |||
== Remote SSH == | == Remote SSH == <!--T:49--> | ||
<!--T:50--> | |||
The remote-ssh extension works by connecting to a remote host and downloading scripts and pre-built binaries to {{ic|$HOME/.vscode-server}}. When first launching remote-ssh for a NixOS host, the connection will fail due to the provided node.js not having been built for a NixOS system (the dynamic libraries aren't in the same place). | The remote-ssh extension works by connecting to a remote host and downloading scripts and pre-built binaries to {{ic|$HOME/.vscode-server}}. When first launching remote-ssh for a NixOS host, the connection will fail due to the provided node.js not having been built for a NixOS system (the dynamic libraries aren't in the same place). | ||
=== Any client to NixOS host === | === Any client to NixOS host === <!--T:51--> | ||
<!--T:52--> | |||
'''tl;dr Use [https://github.com/msteen/nixos-vscode-server nix-vscode-server] or [https://github.com/Mic92/nix-ld nix-ld] on host machines.''' | '''tl;dr Use [https://github.com/msteen/nixos-vscode-server nix-vscode-server] or [https://github.com/Mic92/nix-ld nix-ld] on host machines.''' | ||
==== nix-vscode-server ==== | ==== nix-vscode-server ==== <!--T:53--> | ||
<!--T:54--> | |||
Note that nix-vscode-server works as of 8/21/21 but is occasionally broken (See https://github.com/msteen/nixos-vscode-server/pull/3, https://github.com/msteen/nixos-vscode-server/pull/4, https://github.com/msteen/nixos-vscode-server/pull/5). Here's a workaround: Install the <code>nodejs-16_x</code> package on the NixOS host, and then run the following nix-shell script: | Note that nix-vscode-server works as of 8/21/21 but is occasionally broken (See https://github.com/msteen/nixos-vscode-server/pull/3, https://github.com/msteen/nixos-vscode-server/pull/4, https://github.com/msteen/nixos-vscode-server/pull/5). Here's a workaround: Install the <code>nodejs-16_x</code> package on the NixOS host, and then run the following nix-shell script: | ||
<syntaxHighlight lang=haskell> | <syntaxHighlight lang=haskell> | ||
| Line 156: | Line 262: | ||
#! nix-shell --pure -i runghc -p "haskellPackages.ghcWithPackages (pkgs: [ pkgs.turtle ])" | #! nix-shell --pure -i runghc -p "haskellPackages.ghcWithPackages (pkgs: [ pkgs.turtle ])" | ||
<!--T:55--> | |||
{-# LANGUAGE OverloadedStrings #-} | {-# LANGUAGE OverloadedStrings #-} | ||
import Turtle | import Turtle | ||
<!--T:56--> | |||
main = sh $ do | main = sh $ do | ||
homedir <- home | homedir <- home | ||
| Line 173: | Line 281: | ||
</syntaxHighlight> | </syntaxHighlight> | ||
<!--T:57--> | |||
If instead you'd prefer to fix the binaries manually and have to do so every time that you upgrade your VS Code version, then you can install the <code>nodejs-16_x</code> package on the NixOS host and replace the VS Code provided version. This workaround is described here: https://github.com/microsoft/vscode-remote-release/issues/648#issuecomment-503148523. Note that NodeJS needs to be updated according to VS Code upstream requirements (NodeJS 16 required from 4/2022). | If instead you'd prefer to fix the binaries manually and have to do so every time that you upgrade your VS Code version, then you can install the <code>nodejs-16_x</code> package on the NixOS host and replace the VS Code provided version. This workaround is described here: https://github.com/microsoft/vscode-remote-release/issues/648#issuecomment-503148523. Note that NodeJS needs to be updated according to VS Code upstream requirements (NodeJS 16 required from 4/2022). | ||
==== nix-ld ==== | ==== nix-ld ==== <!--T:58--> | ||
<!--T:59--> | |||
Add the following settings to <code>configuration.nix</code> on the NixOS host | Add the following settings to <code>configuration.nix</code> on the NixOS host | ||
<!--T:60--> | |||
{{file|/etc/nixos/configuration.nix|nix|<nowiki> | {{file|/etc/nixos/configuration.nix|nix|<nowiki> | ||
programs.nix-ld.enable = true; | |||
</nowiki>}} | </nowiki>}} | ||
Then run <code>nixos-rebuild switch</code> to enable <code>nix-ld</code>. Unlike the <code>nix-vscode-server</code> solution, the <code>nix-ld</code> solution also enables VSCode extensions even if they include non-Nix binaries. | <!--T:61--> | ||
Then run <code>nixos-rebuild switch</code> to enable <code>nix-ld</code>. Unlike the <code>nix-vscode-server</code> solution, the <code>nix-ld</code> solution also enables VSCode extensions even if they include non-Nix binaries. | |||
=== Nix-sourced VS Code to NixOS host === | === Nix-sourced VS Code to NixOS host === <!--T:62--> | ||
<!--T:63--> | |||
If vscode-remote is installed from nix (vscode-extensions.ms-vscode-remote as above) on the client machine, everything should "just work". | If vscode-remote is installed from nix (vscode-extensions.ms-vscode-remote as above) on the client machine, everything should "just work". | ||
== Remote WSL == | == Remote WSL == <!--T:64--> | ||
Similar to SSH hosts, both <code>nix-vscode-server</code> and <code>nix-ld</code> solution allows a VSCode Windows client to connect a [https://github.com/nix-community/NixOS-WSL NixOS-WSL] host. However, by default the VSCode Windows client uses <code>wsl.exe --exec</code> to start the code server, which bypasses NixOS environment variables required by <code>nix-ld</code>, resulting in failures. | <!--T:65--> | ||
Similar to SSH hosts, both <code>nix-vscode-server</code> and <code>nix-ld</code> solution allows a VSCode Windows client to connect a [https://github.com/nix-community/NixOS-WSL NixOS-WSL] host. However, by default the VSCode Windows client uses <code>wsl.exe --exec</code> to start the code server, which bypasses NixOS environment variables required by <code>nix-ld</code>, resulting in failures. | |||
<!--T:66--> | |||
As a workaround, search for the following text in all files under the directory <code>$HOME\.vscode\extensions\</code> | |||
<!--T:67--> | |||
{{file|wslDaemon.js|js|<nowiki> | |||
.push("sh","-c" | |||
</nowiki>}} | </nowiki>}} | ||
<!--T:68--> | |||
Replace it with | |||
<!--T:69--> | |||
{{file|wslDaemon.js|js|<nowiki> | |||
.push("sh","-l","-c" | |||
</nowiki>}} | |||
<!--T:70--> | |||
Then restart VS Code and your VS Code client should be able to connect to NixOS host | |||
<!--T:71--> | |||
See https://github.com/nix-community/NixOS-WSL/issues/222 for the discussion about <code>wsl --exec</code> issue on NixOS-WSL. | |||
< | See https://github.com/microsoft/vscode-remote-release/issues/8305#issuecomment-1661396267 about the workaround. | ||
== Troubleshooting == <!--T:72--> | |||
=== Writing login information to the keychain failed === <!--T:73--> | |||
<!--T:74--> | |||
If you get an error similar to the following, enable a [[Secret Service]] provider. | |||
<!--T:75--> | |||
<pre>Writing login information to the keychain failed with error 'The name org.freedesktop.secret was not provided by any .service files'.</pre> | |||
=== Server did not start successfully === | === Server did not start successfully === <!--T:76--> | ||
<!--T:77--> | |||
<blockquote> | <blockquote> | ||
Server did not start successfully. Full server log at /home/user/.vscode-server/.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.log<br> | Server did not start successfully. Full server log at /home/user/.vscode-server/.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.log<br> | ||
| Line 241: | Line 352: | ||
</blockquote> | </blockquote> | ||
<!--T:78--> | |||
"No such file or directory" means that libc is not found, see | "No such file or directory" means that libc is not found, see | ||
< | <!--T:79--> | ||
ldd ~/.vscode-server/bin/*/node | <syntaxhighlight lang="console"> | ||
</ | $ ldd ~/.vscode-server/bin/*/node | ||
</syntaxhighlight> | |||
<!--T:80--> | |||
try to run the node binary on the server | try to run the node binary on the server | ||
< | <!--T:81--> | ||
~/.vscode-server/bin/*/node | <syntaxhighlight lang="console"> | ||
</ | $ ~/.vscode-server/bin/*/node | ||
</syntaxhighlight> | |||
<!--T:82--> | |||
if this fails, install node version 16, and try to patch the node binary | if this fails, install node version 16, and try to patch the node binary | ||
< | <!--T:83--> | ||
nix-env -iA nixos.nodejs-16_x | <syntaxhighlight lang="console"> | ||
</ | $ nix-env -iA nixos.nodejs-16_x | ||
</syntaxhighlight> | |||
<!--T:84--> | |||
<syntaxHighlight lang=bash> | <syntaxHighlight lang=bash> | ||
#! /bin/sh | #! /bin/sh | ||
| Line 273: | Line 391: | ||
fi | fi | ||
</syntaxHighlight> | </syntaxHighlight> | ||
=== Timeout === <!--T:85--> | |||
<!--T:86--> | |||
If you're using fish or other shell, set this in the user settings JSON on the client machine: | |||
<!--T:87--> | |||
<syntaxHighlight lang=json> | |||
"remote.SSH.useLocalServer": false | |||
</syntaxHighlight> | |||
<!--T:88--> | |||
See https://github.com/microsoft/vscode-remote-release/issues/2509 and https://github.com/nix-community/nixos-vscode-server/issues/18 | |||
<!--T:89--> | |||
[[Category:Applications]] | |||
<!--T:90--> | |||
[[Category:IDE]] | |||
</translate> | |||