Edited at

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

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": "./"
}
}