yarn

VSCode-Yarn: VSCode extensions to manage yarn commands.

Getting started

You can install this awesome extension through the VSCode-Yarn.

Installation

Launch Quick Open

• Linux Ctrl+P
• macOS ⌘P
• Windows Ctrl+P

Paste the following command and press Enter:

ext install gamunu.vscode-yarn

Packaged VSIX Extension ^↑

Download the latest .vsix release file from the GitHub repository and install it from the command line

code --install-extension vscode-yarn-*.*.*.vsix

or from within VS Code by launching Quick Open and running the Install from VSIX... command.

GitHub Repository Clone ^↑

Change to your .vscode/extensions VS Code extensions directory. Depending on your platform it is located in the following folders:

• Linux ~/.vscode/extensions
• macOs ~/.vscode/extensions
• Windows %USERPROFILE%\.vscode\extensions

Clone the VSCode Yarn repository as gamunu.vscode-yarn:

git clone git@github.com:gamunu/vscode-yarn.git gamunu.vscode-yarn

Features

Commands

• yarn init - Initialize a new yarn package
• yarn install - Install all dependencies for a project
• yarn add - Add a package to use in your current package
• yarn add --dev - Add a package to the "devDependencies"
• yarn remove <pkg> - Remove a package
• yarn start - Run the "start" script defined in package.json
• yarn test - Run the "test" script defined in package.json
• yarn build - Run the "build" script defined in package.json
• yarn publish [tag] - Publish a package to npm registry with optional tag
• yarn run <script> - Run a defined package script
• Search Packages - Search npm registry for packages with interactive installation
• Manage Registries - Add/remove custom npm registries for package search

Not happy with the available commands? No problem, raw command is also available. Enter any yarn command you want.

Explorer context menu

Yarn commands are available in the package.json file's explorer context menu for quick access.

Yarn Sidebar

The extension provides a dedicated sidebar in VS Code's activity bar for comprehensive yarn management:

Search Packages View

The Search Packages view allows you to:

• Search for npm packages: Enter a search term to find packages in the npm registry
• View search results directly: See package names, descriptions, and versions
• Install with one click: Install as regular or dev dependency with convenient buttons
• Rate limit protection: Built-in cooldown system to avoid npm registry rate limits

To search for packages:

1. Click the Search icon in the sidebar title
2. Enter your search term
3. Press Enter to see results
4. Use the inline buttons to install packages

Dependencies View

The Dependencies view provides:

• Visual organization: Dependencies and DevDependencies in separate collapsible sections
• Version information: See installed versions at a glance
• Quick uninstall: Remove packages with one click
• Auto-refresh: Automatically updates when dependencies change

This view makes it easy to:

• Monitor what packages are installed in your project
• Quickly remove unnecessary dependencies
• Distinguish between regular and development dependencies

TouchBar support

Support for Macbook Pro Touch Bar. Following yarn commands are available:

• yarn install
• yarn start
• yarn test
• yarn build

Run last executed script

You can also run the last executed script by typing yarn run last....

Terminate a script

You can terminate a script with the terminate command. It uses the tree-kill module that you can find on yarn. It has different behaviors on Unix or Windows.

Multi-workspace support

The extension fully supports multi-root workspaces:

• Choose which package.json to work with when multiple are available
• Remember your selection for subsequent operations
• Switch between different package.json files easily

Order of execution of yarn commands

1. If a package.json is opened as an active editor/focused tab yarn will be invoked on it.
2. If the package.json is explicitly defined in the configuration yarn will invoke on it.
3. If above scenarios fail to satisfy. The extension will fallback to package.json in project root folder.

Package search and custom registries

The extension offers an enhanced package search experience:

Searching for packages

There are multiple ways to search for packages:

1. Via Command Palette:

   • Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on macOS)
   • Type "Yarn: Search Packages"
   • Enter your search term
   • Select a package to install

2. Via Yarn Sidebar:

   • Click the Yarn icon in the activity bar
   • Click the search icon in the sidebar title bar
   • Enter your search term
   • Use the inline buttons to install packages

3. With Quick Pick:

   • When searching, you can choose to install as regular or dev dependency
   • The quick pick shows package descriptions and versions

Settings

• yarn.runInTerminal Defines whether the command is run in a terminal window or whether the output form the command is shown in the Output window. The default is to show the output in the output window.
• yarn.dontHideOutputOnSuccess Keep the output panel visible when yarn execution is successful. No effect with runInTerminal. The default is to keep output window open.
• yarn.bin Custom yarn bin name, the default is yarn.
• yarn.packageJson Default package json path. relative to current project root.
• yarn.enableTouchbar Enable TouchBar support in MacOSX. TouchBar support includes:
  • yarn install
  • yarn run build
  • yarn run test
  • yarn run start

Example

{
  "yarn.runInTerminal": false,
  "yarn.dontHideOutputOnSuccess": false,
  "yarn.packageJson": "src/package.json"
}

Keyboard Shortcuts

The extension defines a chording keyboard shortcut for the R key. As a consequence an existing keybinding for R is not executed immediately. If this is not desired, then please bind another key for these commands, see the customization documentation.

Contribute

Report a bug or a suggestion by posting an issue on the GitHub repository.

vscode-yarn incorporates code modified from fknop vscode-npm.