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

やりたいこと

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