vs code 下alias 的使用

码了几个礼拜的rn代码后,回看之前的代码,在import 模块或组件的时候,输入N个“../”感觉写着很烦,可读性也很差!

rn01.png

so,想起的写vue的alias,了解一番react-native的插件后,有一个比较好用的插件babel-plugin-module-resolver
这是一个Babel模块解析插件,这个插件你可以添加新的根目录,也可以设置一个自定义的别名目录.安装:

npm install --save-dev babel-plugin-module-resolver

或

yarn add babel-plugin-module-resolver

安装插件后,需要新建一个.babelrc配置文件,这里我们主要用到了它的对插件(plugins) 进行配置的特性. 简单配置如下:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", 
       {
         "root": ["./"],
         "alias": {
           "app":"./app",
           "image": "./image" 
         }
      }
    ]
  ]
}

so,接下来可以修改import的模块引用了

rn02.png

这样是不是写的时候方便多了,结构看的也清晰多了.

改完这个之后,以为告一段路了,但是还是有一个遗憾... 使用alias之后,cmd+点击模块名 页面跳转失效了,vscode识别目录失败. 别急~
方案可能有多种如安装插件Path Intellisense,这边说一种简单的,新建一个jsconfig.json文件,配置信息如下

{
  "compilerOptions": {
    "target": "ES6",
    "jsx": "react-native",
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "app/*": ["app/*"],
      "image/*": ["image/*"],
    }
  },
  "exclude": ["node_modules"]
}

重启vs code,发现可以正常点击跳转了...