Official NixOS Wiki

Visual Studio Code: Difference between revisions

← Older edit
VisualWikitext
imported>Atry
No edit summary
Kaya (talk | contribs)
27 edits
Add infobox
 
(20 intermediate revisions by 11 users not shown)
Line 1: Line 1:
{{note|Visual Studio Code is [[FAQ/unfree|unfree]], its license prohibits distribution. See the [[FAQ/unfree]] page to install unfree software.}}
{{note|Visual Studio Code is [[FAQ/unfree|unfree]], 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.


Visual Studio Code is a cross-platform text editor developed by Microsoft, built on the Electron framework.
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]].
 
For the free distribution of the VS Code codebase (without MS branding/telemetry) see [[VSCodium]].


== Installation ==
== Installation ==
Line 13: Line 24:
</syntaxHighlight>
</syntaxHighlight>


Extensions can be managed using the 'vscode-with-extensions' package:
Extensions can be managed using {{Nixpkg|pkgs/applications/editors/vscode/with-extensions.nix|vscode-with-extensions}} :


<syntaxHighlight lang=nix>
<syntaxhighlight lang="nix">environment.systemPackages = with pkgs; [
environment.systemPackages = with pkgs; [
   (vscode-with-extensions.override {
   (vscode-with-extensions.override {
     vscodeExtensions = with vscode-extensions; [
     vscodeExtensions = with vscode-extensions; [
       bbenoist.nix
       jnoortheen.nix-ide
       ms-python.python
       ms-python.python
       ms-azuretools.vscode-docker
       ms-azuretools.vscode-docker
Line 32: Line 42:
     ];
     ];
   })
   })
];
];</syntaxhighlight>
</syntaxHighlight>
 
Some examples here: [https://github.com/search?type=code&q=language:Nix+&#x22;extensionFromVscodeMarketplace&#x22; GitHub Search - type:code language:Nix "extensionFromVscodeMarketplace"]
 
{{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:
 
<syntaxhighlight lang="console">nix store prefetch-file marketplace.visualstudio.com/_apis/public/gallery/publishers/<publisher>/vsextensions/<extension>/<version>/vspackage</syntaxhighlight>


Some examples here: [https://github.com/search?q=extensionFromVscodeMarketplace&type=code GitHub search for "extensionFromVscodeMarketplace"]
Example:


{{ic|extensionsFromVscodeMarketplace}} 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.
<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>}}


It's also possible to install VS Code via [[Home Manager]]:
<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">
=== Home Manager ===
programs.vscode = {
<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.html#opt-programs.vscode.enable Home Manager Manual: Options - programs.vscode]
* 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]


=== Non-NixOS ===
=== Nix-env ===
{{Warning|Use of nix-env is unreproducible and thus discouraged and not recommended}}<syntaxhighlight lang="console">nix-env -iA nixos.vscode</syntaxhighlight>


<syntaxHighlight lang="console">
== Use VS Code extensions without additional configuration ==
$ nix-env -iA nixos.vscode
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.
</syntaxHighlight>


=== Use VS Code extensions without additional configuration ===
{{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])}}


With the package vscode.fhs, the editor launches inside a [https://en.wikipedia.org/wiki/Filesystem_Hierarchy_Standard FHS] compliant chroot environment using buildFHSUserEnv. This reintroduces directories such as /bin, /lib, and /usr, which allows for extensions which ship pre-compiled binaries to work with little to no additional nixification.
=== NixOS ===
 
{{note|From a philosophical view, use of buildFHSUserEnv allows for ease-of-use at the cost of some impurity and non-reproducibility. If you prioritize purely-declarative configurations, please stay with the above guidance.}}
 
Example usage:
<syntaxHighlight lang=nix>
<syntaxHighlight lang=nix>
environment.systemPackages = with pkgs; [ vscode.fhs ];
environment.systemPackages = with pkgs; [ vscode.fhs ];
</syntaxHighlight>
</syntaxHighlight>


Home-manager:
=== Home Manager ===
<syntaxHighlight lang=nix>
<syntaxHighlight lang=nix>
programs.vscode = {
programs.vscode = {
Line 81: Line 91:


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>
<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 (
</syntaxHighlight>
  ps: with ps; [
 
    rustup
=== Insiders Build ===
    zlib
    openssl.dev
    pkg-config
  ]
);
</syntaxhighlight>


== 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 [https://discourse.nixos.org/t/how-to-install-latest-vscode-insiders/7895/4 thanks to @jnoortheen], which you can add to <code>home.packages</code> (HM), <code>environment.systemPackages</code> (NixOS), etc., builds a package with the latest insiders.
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>) :


<syntaxHighlight lang=nix>
<syntaxHighlight lang=nix>
Line 104: Line 120:
</syntaxHighlight>
</syntaxHighlight>


''[https://discourse.nixos.org/t/how-to-install-latest-vscode-insiders/7895/4 credits: @jnoortheen]''


==== Updating insiders placeholder <code>sha256</code>: ====
=== Updating insiders placeholder <code>sha256</code> ===
 
You will need to update the placeholder <code>sha256</code> value for each new Insiders build.
You will need to update the placeholder <code>sha256</code> value for each new Insiders build.


Line 113: Line 129:
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.
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 ===


===== If insiders error contains <code>sha256:</code>, follow these instructions:  =====
==== For <code>sha256:</code> ====
 
Example:<pre>//-- ...
<pre>
//-- ...
       error: hash mismatch in file downloaded from 'https://code.visualstudio.com/sha/download?build=insider&os=linux-x64':
       error: hash mismatch in file downloaded from 'https://code.visualstudio.com/sha/download?build=insider&os=linux-x64':
         specified: sha256:AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         specified: sha256:AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
         got:      sha256:16fzxqs6ql4p2apq9aw7l10h4ag1r7jwlfvknk5rd2zmkscwhn6z
         got:      sha256:16fzxqs6ql4p2apq9aw7l10h4ag1r7jwlfvknk5rd2zmkscwhn6z
//-- ...
//-- ...</pre>
</pre>
 
Take that last line and input it where your placeholder was,  'sha256:' in the beginning should be removed.


Copy the "got" value (while stripping out the prepended "<code>sha256:</code>"), and paste it in your placeholder <code>sha256</code> value


===== If insiders error contains <code>sha256-</code>, follow these instructions:  =====
Resulting: "<code>16fzxqs6ql4p2apq9aw7l10h4ag1r7jwlfvknk5rd2zmkscwhn6z</code>"


<pre>
===== For <code>sha256-</code>  =====
//-- ...
Example:<pre>//-- ...
         error: hash mismatch in fixed-output derivation '/nix/store/path':
         error: hash mismatch in fixed-output derivation '/nix/store/path':
         specified: sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=
         specified: sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=
             got:    sha256-aQvTtZdPU2F1UjkFxiLs4A+60A4qc9bXKwKriNsCDPg=
             got:    sha256-aQvTtZdPU2F1UjkFxiLs4A+60A4qc9bXKwKriNsCDPg=
//-- ...
//-- ...</pre>
</pre>
 
Copy the "got" value (while stripping out the prepended "<code>sha256-</code>")


Take that last line and run the following python script (you can search for an online python interpreter if it's not installed), the output will give you the correct value:
Then, run the following python script:


<syntaxHighlight lang=python>
<syntaxhighlight lang="python">
import base64
import base64
# The 'sha256-' in the beginning should be removed
text = b'aQvTtZdPU2F1UjkFxiLs4A+60A4qc9bXKwKriNsCDPg=' # Replace the string in between ' with the according hash
text = b'aQvTtZdPU2F1UjkFxiLs4A+60A4qc9bXKwKriNsCDPg='
print(base64.decodebytes(text).hex())
print(base64.decodebytes(text).hex())
</syntaxHighlight>
</syntaxhighlight>
 
Its output should be pasted in your placeholder <code>sha256</code> value
 
== 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.
 
=== 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.


Take the output from this command and input it where your placeholder was.
=== 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 ==
== Wayland ==


To use VS Code under Wayland, set the environment variable <code>NIXOS_OZONE_WL=1</code>:
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>


* temporary fix: run via the terminal:
See [[Wayland#Electron and Chromium]]
  <syntaxHighlight lang=console>$ NIXOS_OZONE_WL=1 code ...</syntaxHighlight>
* permanent fix: add to your NixOS configuration:
  <syntaxHighlight lang=nix>environment.sessionVariables.NIXOS_OZONE_WL = "1";</syntaxHighlight>
 
[https://github.com/NixOS/nixpkgs/commit/b2eb5f62a7fd94ab58acafec9f64e54f97c508a6 Source]


== Updating extension versions ==
== Updating extension versions ==


Nixpkgs contains a script which will run <code>code --list-extensions</code>, then look for the latest available versions of those extensions, and output a list which you can add to your Nix config in a format similar to the above. To use it, clone the [https://github.com/NixOS/nixpkgs nixpkgs repo from GitHub], and run: [https://github.com/NixOS/nixpkgs/blob/master/pkgs/applications/editors/vscode/extensions/update_installed_exts.sh nixpkgs/pkgs/applications/editors/vscode/extensions/update_installed_exts.sh]
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.


Example output:
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>


<syntaxHighlight lang=nix>
=== Example output ===
❯ ./nixpkgs/pkgs/applications/editors/vscode/extensions/update_installed_exts.sh  
<syntaxhighlight lang="console">curl -fsSL https://raw.githubusercontent.com/NixOS/nixpkgs/master/pkgs/applications/editors/vscode/extensions/update_installed_exts.sh | sh
... # it does some fetching and then outputs the list...
{ extensions = [
{ extensions = [
   {
   {
Line 182: Line 198:
   }
   }
];
];
}
}</syntaxhighlight>
</syntaxHighlight>


== Remote SSH ==
== Remote SSH ==
Line 255: Line 270:
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/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.
See https://github.com/microsoft/vscode-remote-release/issues/8305#issuecomment-1661396267 about the workaround.
== Using nix-shell ==
Some features of VS Code, like the Python package, require linters or other dependencies. The package [https://marketplace.visualstudio.com/items?itemName=arrterian.nix-env-selector nix-env-selector] makes this easy and does not require overrides on VS Code itself to add dependencies.


== Troubleshooting ==
== Troubleshooting ==


=== Error after Sign On  ===
=== Writing login information to the keychain failed ===
 
If you get such an error after sign on in application:
 
<pre>
Writing login information to the keychain failed with error 'The name org.freedesktop.secret was not provided by any .service files'.
</pre>
 
Try to add the following setting in your system configuration (even if you don't use Gnome as desktop environment):


{{file|/etc/nixos/configuration.nix|nix|<nowiki>
If you get an error similar to the following, enable a [[Secret Service]] provider.
# needed for store VS Code auth token
services.gnome.gnome-keyring.enable = true;
</nowiki>}}


''Optional'': add <code>gnome.seahorse</code> to <code>environment.systemPackages</code> to install GUI for GNOME Keyring.
<pre>Writing login information to the keychain failed with error 'The name org.freedesktop.secret was not provided by any .service files'.</pre>
 
Don't forget to perform <code>nixos-rebuild switch</code> and reboot the system.


=== Server did not start successfully ===
=== Server did not start successfully ===
Line 321: Line 320:
fi
fi
</syntaxHighlight>
</syntaxHighlight>
=== Timeout ===
If you're using fish or other shell, set this in the user settings JSON on the client machine:
<syntaxHighlight lang=bash>
"remote.SSH.useLocalServer": false
</syntaxHighlight>
See https://github.com/microsoft/vscode-remote-release/issues/2509 and https://github.com/nix-community/nixos-vscode-server/issues/18
[[Category:Applications]]
[[Category:IDE]]
Retrieved from "https://wiki.nixos.org/wiki/Visual_Studio_Code"