Quick NPM Install is a Visual Studio Code extension designed to help developers quickly detect and install missing npm packages in JavaScript, TypeScript, and React projects. The extension provides a seamless experience by offering quick fixes and hover actions to install missing dependencies directly from the editor.
Features
Automatic Missing Package Detection: Automatically detects missing npm packages by analyzing import and require statements in your code.
Quick Fix and Hover Actions: Provides a "Quick Fix" action in the editor and a hover message with a clickable link to install missing packages.
Single-Click Package Installation: Allows you to easily install missing packages without leaving the editor. Supports both npm and yarn.
Submodule Handling: Detects missing submodules (e.g., react-native-vector-icons/FontAwesome6) and suggests installing the root module (e.g., react-native-vector-icons).
Example Usage
Hover over a missing package: If a package is missing, hover over the package name in an import or require statement, and you’ll see a message indicating it’s missing with an option to install it.
Example:
import { FontAwesome6 } from "react-native-vector-icons/FontAwesome6";
Hover over react-native-vector-icons/FontAwesome6, and a message will appear prompting you to install the react-native-vector-icons package.
Quick Fix Action: When working in JavaScript, TypeScript, or React files, the editor will show a "Quick Fix" action to automatically install the missing packages. Simply click on the action to install the package.
Install Multiple Packages: You can select multiple missing packages and install them at once using the "Quick Fix" options.
Requirements
Node.js and npm: Ensure Node.js and npm are installed on your system. This extension uses npm (or yarn) to install missing packages.
VS Code: Version 1.60.0 or higher is recommended for full compatibility with code actions and hover providers.
Extension Settings
You can customize the extension’s behavior using the following settings:
quickNpmInstall.enable: Enable or disable the Quick NPM Install extension. (default: true)
quickNpmInstall.packageManager: Choose the package manager for the installation process. Options: npm or yarn(default: npm).
Known Issues
File Type Limitation: Currently, this extension works only with JavaScript, TypeScript, and React files (.js, .ts, .jsx, .tsx).
Package Availability: The extension assumes that missing packages are available on npm and will try to install them directly from the npm registry.
Release Notes
1.0.4
bug fix
1.0.3
bug fix
1.0.2
bug fix
1.0.0
Added support for detecting missing require packages.
Added hover and quick fix actions for installing missing packages.
0.0.5
Initial release of Quick NPM Install:
Added support for detecting missing npm packages in import statements.
Enabled hover and quick fix actions to install missing packages directly from the editor.
0.0.4
Added error handling and notifications:
Improved error messages when packages fail to install.
Added notification after successful package installation.