Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
vite-tsconfig-paths
Advanced tools
The vite-tsconfig-paths npm package is a plugin for Vite that allows users to leverage the paths defined in their tsconfig.json file for module resolution. This means that you can define custom paths for imports in your TypeScript configuration and have them correctly resolved when using Vite as your build tool.
Custom Path Resolution
Allows you to use custom paths defined in tsconfig.json within your Vite project. For example, if you have a path alias '@' pointing to 'src/', you can import modules using this alias.
import { myUtil } from '@/utils/myUtil';
Easy Configuration
The plugin can be easily added to your Vite configuration with a simple import and adding it to the plugins array.
import viteTsconfigPaths from 'vite-tsconfig-paths';
export default {
plugins: [viteTsconfigPaths()],
};
This is a webpack plugin that allows you to utilize the paths defined in tsconfig.json for module resolution in a webpack project. It serves a similar purpose to vite-tsconfig-paths but is intended for use with webpack instead of Vite.
This Babel plugin allows you to add new 'root' directories that contain your modules. It also allows you to map a path to another path, similar to the 'paths' option in tsconfig.json, but it is used in conjunction with Babel and not specifically tied to Vite or TypeScript.
Aliasify is a Browserify transform for aliasing module paths. While it is not specifically designed for Vite or TypeScript, it provides similar functionality in terms of allowing custom resolution paths for modules in a Browserify setup.
Give vite
the ability to resolve imports using TypeScript's path mapping.
Install as dev dependency
Inject vite-tsconfig-paths
using the vite.config.ts
module
import type { UserConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
const config: UserConfig = {
plugins: [
tsconfigPaths(),
],
}
export default config
Note: You need to restart Vite when you update your paths
mappings.
If this package helps you, please donate! Any amount is greatly appreciated. 🥰
FAQs
Vite resolver for TypeScript compilerOptions.paths
The npm package vite-tsconfig-paths receives a total of 1,826,927 weekly downloads. As such, vite-tsconfig-paths popularity was classified as popular.
We found that vite-tsconfig-paths demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.