VSCode针对alias的智能提示

简介

webpack项目中,我们经常会设置alias来引入文件,避免文件路径写的过长过深。

使用alias的时候会发现路径和函数的智能提示不见了,如果路径名称很复杂的话很容易写错而且也不方便。

可以通过配置来支持智能提示

步骤

比如:某个项目,配置了alias如下

const path = require('path') const { override, addWebpackAlias, } = require('customize-cra') const resolve = dir => path.resolve(__dirname, dir) module.exports = override( // 路径别名 addWebpackAlias({ '@': resolve('src'), 'utils': resolve('src/utils') }), )

在项目根目录下新建一个文件,命名为jsconfig.json,写入对应配置即可

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*": [ "./src/*" ], "utils/*": [ "./src/utils/*" ] } }, "include": [ "src" ], "exclude": [ "node_modules" ] }

备注

配置完jsconfig.json文件后可能会报错。
这一般是因为vscode会自动进行JavaScript文件的语义检查。自定义的jsconfig.json文件无法覆盖vscode自带的配置,所以会报错。

解决办法是修改vscode的设置,让自定义的jsconfig.json文件覆盖vscode默认选项

  • 文件 → 首选项 → 设置(Ctrl+,),打开设置界面

  • 输入jsconfig,筛选出jsconfig相关配置

  • Implicit Project Config: Check JS选项勾选即可

设置


创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: