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 { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
export default defineConfig({
plugins: [
tsconfigPaths(),
],
})
Note: You need to restart Vite when you update your paths
mappings.
root: string
The directory to crawl for tsconfig.json
files.
Defaults to viteConfig.root
projects: string[]
An array of tsconfig.json
paths (relative to viteConfig.root
)
and/or directories that contain a tsconfig.json
file.
This overrides the root
option.
extensions: string[]
File extensions to search for.
Defaults to .ts | .tsx | .js | .jsx | .mjs
loose: boolean
Disable strictness that limits path resolution to TypeScript and JavaScript modules.
Useful if you want asset URLs in Vue templates to be resolved.
If your tsconfig.json
file has "allowJs": true
in it, path resolution will be expanded beyond TypeScript modules. The following extensions will have their imports resolved by this plugin: .vue
, .svelte
, .mdx
, .mjs
, .js
, .jsx
If the baseUrl
is defined, it gets prepended to all bare imports, and its resolution will take precedence over node_modules. This is also how TypeScript does it.
Say the baseUrl
is ../root
and you import react
. This plugin will use ../root/react
if it exists. If not found, then react
is resolved normally. The baseUrl
is relative to the project root (where tsconfig.json
lives).
The include
and exclude
compiler options are respected.
Internally, globrex is used for glob matching. Be aware that **/*
is currently broken (see here). You should leave include
undefined if you only set it to ["**/*"]
(which is the default).
The DEBUG
environment variable can be used to figure out why this plugin isn't working as you may have expected.
DEBUG=vite-tsconfig-paths yarn vite
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.