VSCode-Yarn: VSCode extensions to manage yarn commands.

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

Launch Quick Open

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

Paste the following command and press Enter:

ext install gamunu.vscode-yarn

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.

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

• 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.

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

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

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

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

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

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

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

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.

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

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.

The extension offers an enhanced package search experience:

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

• 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

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

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.

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

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