设置路径别名

# 1. ts 别名

tsconfig.json 添加 paths

{
    "compilerOptions": {
        "types": ["node", "vitest/globals"],
        "noImplicitAny": true,
        "lib": ["ESNext"],
        "target": "ES6",
        "allowJs": true,
        "esModuleInterop": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "allowArbitraryExtensions": true,
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"],
            "@utils/*": ["src/utils/*"]
        }
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "lib/**/*"]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 2. eslint 别名

在 TypeScript 中使用路径别名 (path alias) 时，ESLint 会默认无法识别这些别名。为了让 ESLint 能够识别和检查这些别名，需要额外安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 这两个插件。

安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin

在 .eslintrc.js 中的 parserOptions 中配置 @typescript-eslint/parser

parser: '@typescript-eslint/parser',
parserOptions: {
project: './tsconfig.json',
// ...
}

1
2
3
4
5

在 .eslintrc.js 中的 plugins 中添加 @typescript-eslint

这样就能使 eslint 识别 TypeScript 里的路径别名了

# 3. vite 别名

// vite.config.js

export default {
    // ...
    resolve: {
        alias: {
            '@': './src'
        }
    }
}

1
2
3
4
5
6
7
8
9
10

# pnpm 别名

参考官方文档：使用较短的别名 (opens new window)

# 在 POSIX 系统上添加永久别名

在 git bash 终端中，环境是 linux 环境，在此环境下设置。

方法一：

在C:/Users/Allen/目录下新建.bashrc，然后输入alias pn=pnpm，保存并退出。

方法二：

在 git bash 终端输入vim ~/.bashrc，然后输入alias pn=pnpm，保存并退出。

两个方式效果一样。

# 在 Powershell (Windows) 中添加永久别名：

在具有管理员权限的 Powershell 窗口中，执行：

notepad $profile.AllUsersAllHosts

在打开的 profile.ps1 文件中，放入：

set-alias -name pn -value pnpm

保存文件然后关闭窗口。您可能需要重新打开 Powershell 窗口才能使别名生效。

上次更新: 2023/12/16, 09:22:46

← vitest单元测试前言→