VSCode Js 路径提示

使用VSCode开发js项目的时候。有时会有设置别名路径的需求。但是配置完后会遇到代码无法自动提示以及跳转的问题。解决方法如下。

一、安装Babel模块解析插件

npm install --save-dev babel-plugin-module-resolver
这个插件可以让我们自己定义一个根目录的alias。提高写代码的效率。
在根目录新建一个.babelrc文件。配置如下

{
    "plugins": [
        [
            "module-resolver",
            {
                "alias": {
                    "src": ["./src/"]
                }
            }
        ]
    ]
}

开发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中愉快的使用别名以及路径提示功能了。