web-dev-qa-db-ja.com

絶対インポートを理解するために、eslint設定を変更する方法は？

Create-react-appを使用し、./srcからの絶対インポートを使用します。

ダンアブラモフとして 推奨 私は.envをNODE_PATH=srcに追加しましたが、動作します。

しかし、私のエスリントは、そのモジュールが既に存在することを理解していません。エラーimport/no-unresolvedおよびimport/extensionsが表示されます

これは私のeslint-configです：

module.exports = {
parser: 'babel-eslint',
extends: 'airbnb',
rules: {
    'react/no-did-mount-set-state': 'off',
    'import/no-extraneous-dependencies': 'off',
    'no-use-before-define': 'off',
    'arrow-body-style': 'off',
    // uncommit on developing
    'no-console': 'off',
    'no-debugger': 'off',
  },
  globals: {
    browser: true,
    fetch: true,
    serviceworker: true,
    describe: true,
    it: true,
    expect: true,
    document: true,
  },

};

そしてもちろん、vscodeが 'src'で私に提案をしてくれるといいでしょう。

javascriptreactjscreate-react-app
9
Alexander Knyazev

eslint-plugin-importを使用する必要があります： https://github.com/benmosher/eslint-plugin-import

.eslintrcでeslint設定を構成します

module.exports = {
  ...   
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    },
  },
}

次に、srcフォルダーからインポートを使用できます。

たとえば、src/components/MyComponent.jsxがある場合、これを記述します。

import MyComponent from 'components/MyComponent.jsx';
22
Guillaume Jasmin

Airbnbのeslint構成を拡張しています。これにはeslint-plugin-importが含まれており、デフォルトで次のルールが有効になっています：no-absolute-path。

参照： https://github.com/benmosher/eslint-plugin-import/blob/HEAD/docs/rules/no-absolute-path.md

それ以上のルールを微調整する必要があるかもしれません。

1
Omar Bahareth