The end-to-end solution for configuring, refactoring, maintaining and using path aliases
Path "aliases" are special identifiers (starting with @
or ~
) that point to specific folders.
Using them in your codebase makes your imports easier to read and maintain:
// from this
import { fooify } from '../../../core/services/foo'
// to this
import { fooify } from '@services/foo'
They are widely supported in the JavaScript ecosystem, however:
Alias HQ is build-time tool which:
ts/jsconfig.json
as the single source of configuration Begin by configuring aliases in your project's ts/jsconfig.json
:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@packages/*": [ "../packages/*" ],
"@/*": [ "/*" ],
"@app/*": [ "/app/*" ],
"@services/*": [ "/app/services/*" ]
}
}
}
Use the API to sync your toolchain, frameworks, even your IDE:
// webpack.config.js
config.resolve.alias = hq.get('webpack')
// jest.config.js
config.moduleNameMapper = hq.get('jest')
// etc...
Use the CLI to migrate or maintain your source code:
? What do you want to do?
- Configure paths
- Setup integrations
❯ - Update source code
- Help
- Exit
For a list of all supported frameworks, see the integrations doc.
If you are already using aliases:
If you are thinking about using aliases:
You can configure and migrate any project in less than a minute by:
Install via your package manager of choice:
npm i --save-dev alias-hq
yarn add -D alias-hq
To jump in without much reading:
For step-by-step instructions:
For a short video:
Wanna support the project?