ReactNative typescript路徑別名配置，vscode不識別@/youpath配置方法

使用“@/yourpath” 代替 “../../youpath”的寫法 ，需要安裝插件 babel-plugin-root-import

1.使用npm 或 yarn 安裝  babel-plugin-root-import

npm install babel-plugin-root-import --save-dev
or
yarn add babel-plugin-root-import --dev

2.使用babel 配置 babel-plugin-root-import

使用.babelrc 或 babel.conf.js 兩者只要配一個！

a.使用.babelrc 

{
  "plugins": [
    ["babel-plugin-root-import"], {
       rootPathSuffix: "./src",
       rootPathPrefix: "@/"
     }
  ]
}

b.使用babel.conf.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", "mobx"],
    plugins: [
      [
        "babel-plugin-root-import",
        {
          rootPathSuffix: "./src",
          rootPathPrefix: "@/"
        }
      ]
    ]
  };
};

 

 

vscode 不識別“@/youpath”解決：需要在tsconfig.json 添加以下配置

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

 

 

參考文檔：

https://www.npmjs.com/package/babel-plugin-root-import   babel-plugin-root-import 插件文檔

https://www.jianshu.com/p/6d2783f1ab51  tsconfig.json 配置列表