VSCode配置Webpack路径提示及智能跳转

Webpack 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, '../src')
],
extensions: ['.js', '.vue', '.json', '.css'],
alias: {
vue$: 'vue/dist/vue.esm.js',
public: path.resolve(__dirname, '../public'),
component: path.resolve(__dirname, '../src/component'),
config: path.resolve(__dirname, '../src/config'),
lib: path.resolve(__dirname, '../src/lib'),
i18n: path.resolve(__dirname, '../src/i18n'),
store: path.resolve(__dirname, '../src/store')
}
}

Eslint 选配

需要安装插件 eslint-import-resolver-webpack。进行配置:

1
2
3
4
settings:
import/resolver:
webpack:
config: 'build/webpack.config.js'

智能路径提示

需要安装插件Path Intellisense,并且进行配置(项目或者全局的settings.json):

1
2
3
4
5
6
7
"path-intellisense.mappings": {
"config": "${workspaceRoot}/src/config",
"lib": "${workspaceRoot}/src/lib",
"store": "${workspaceRoot}/src/store",
"i18n": "${workspaceRoot}/src/i18n",
"component": "${workspaceRoot}/src/component"
}

智能提示

代码智能跳转

项目根目录创建 jsonfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"include": [
"./src/**/*"
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"component/*": ["src/component/*"],
"config/*": ["src/config/*"],
"lib/*": ["src/lib/*"],
"i18n/*": ["src/i18n/*"],
"store/*": ["src/store/*"]
}
}
}

按住 ⌘command就可以跳转到对应代码了。

便于鸣谢,捐赠请留下网名~