@ozaki25
Edited at

[React]絶対パスでimportできるようにする with vscode and eslint

ReactESLintVSCode
More than 1 year has passed since last update.


やりたいこと


  • CreateReactAppで作ったプロジェクトでimportのパスを絶対パスで書きたい

  • vscodeの補完やeslintも今まで通り動いてほしい

// bad

import SomeComponent from '../../components/SomeComponent';



// good

import SomeComponent from 'src/components/SomeComponent';


React



  • NODE_PATHという環境変数にrootとなるパスを指定するとできる


  • 実行時に指定するパターン

    NODE_PATH=. yarn start



  • .envファイルに書くパターン


    .env

    NODE_PATH=.




ESLint


  • 動くようになってもこのままだとESLintが警告を出してくる

  • ESLintのconfigに設定を追加することで対処できる


.eslintrc.yaml

settings:

  import/resolver:

    node:

      moduleDirectory:

      - node_modules

      - /


eslintrc.json

{

  "settings": {

    "import/resolver": {

      "node": {

        "moduleDirectory": ["node_modules", "/"]

      }

    }

  }

}


VSCode


  • 最後に補完が効くようにVSCodeに設定を入れる


  • jsconfig.jsonというファイルを作って以下のように書けばOK


jsconfig.json

{

  "compilerOptions": {

    "target": "es2015",

    "baseUrl": "./"

  }

}

Edit request
3