使用VSCode開發(fā)js項目的時候。有時會有設置別名路徑的需求蹋绽。但是配置完后會遇到代碼無法自動提示以及跳轉的問題芭毙。解決方法如下。
一蟋字、安裝Babel模塊解析插件
npm install --save-dev babel-plugin-module-resolver
這個插件可以讓我們自己定義一個根目錄的alias稿蹲。提高寫代碼的效率扭勉。
在根目錄新建一個.babelrc文件鹊奖。配置如下
{
"plugins": [
[
"module-resolver",
{
"alias": {
"src": ["./src/"]
}
}
]
]
}
開發(fā)react native 時配置如下
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"module-resolver",
{
"alias": {
"src": ["./src/"],
"extensions": [".js", ".ios.js", ".android.js"]
}
}
]
]
}
其中的src就是我們新定義的更目錄alias。
這時候在代碼里使用 import ... from 'src/....'已經可以運行通過涂炎。但是在VScode中卻沒有路徑提示忠聚。而且也不能通過路徑跳轉到文件。寫起來就會很難受唱捣。我們需要一個插件來幫忙两蟀。
二、安裝Path Intellisense插件
這個插件是vscode的路徑提示插件震缭÷柑海可以幫我們解決路徑提示以及跳轉的問題。在Vscode的應用商店搜索就可以下載到拣宰。然后我們需要對這個插件進行配置党涕。
在項目的根目錄新建一個.vscode文件夾。然后再里面新建一個settings.json巡社。這樣可以把針對于這個項目的vscode配置寫在settings.json中.
配置如下
{
"path-intellisense.mappings": {
"src": "${workspaceRoot}/src"
}
}
最后我們還要再根目錄下新建一個jsconfig.json文件用于配置js的工程
配置如下
{
"compilerOptions": {
"baseUrl": "./",
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"paths": {
"src/*": ["src/*"]
}
},
"exclude": ["node_modules"]
}
至此膛堤，我們就可以在vscode中愉快的使用別名以及路徑提示功能了。
