Typecript eslint - 파일 확장명 "ts" 가져오기/확장 누락

Typecript eslint - 파일 확장명 "ts" 가져오기/확장 누락

나는 Typecript로 만들어진 간단한 Node/Express 앱을 가지고 있다.그리고 eslint는 나에게 오류를 준다.

Missing file extension "ts" for "./lib/env" import/extensions

여기 내 .eslintrc 파일이야.

    {
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/react",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier", "import"],
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "directory": "./tsconfig.json"
      },
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "@typescript-eslint/indent": [2, 2],
    "no-console": "off",
    "import/no-unresolved": [2, { "commonjs": true, "amd": true }],
    "import/named": 2,
    "import/namespace": 2,
    "import/default": 2,
    "import/export": 2
  }
}

나는 eslint-plugin-import & eslint-import-resolver-typecript를 설치했다.왜 그런지 알 수가 없어, 내가 그 실수를 했어.

를 다다익선 에 한다.rules:

"rules": {
   "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
   ]
}

airbnbESLint 구성이 문제를 주도한다.

늦은 건 알지만, 에어비앤비 규칙을 연장하고 있다면 eslint-config-airbnb-typecript를 사용할 수 있어.최신 지침은 프로젝트 페이지를 참조하십시오.2021년 10월 현재 그것의 요지는 다음과 같다.

설치

npm install -D eslint-config-airbnb-typescript

ESLint 구성 파일

반응 사용 - '에어비앤비' 뒤에 '에어비앤비 형식'을 추가

extends: [
  'airbnb',
+ 'airbnb-typescript'
]

반응 없음 - 'airbnb-base' 뒤에 'airbnb-typecript/base' 추가

extends: [
  'airbnb-base',
+ 'airbnb-typescript/base'
]

parserOptions.project를 경로로 설정tsconfig.json

{
  extends: ['airbnb', 'airbnb-typescript'],
+ parserOptions: {
+   project: './tsconfig.json'
+ }
}

---

참고: 2021년 8월 이전에는 다음과 같은 작업도 수행해야 한다.이 지침들은 역사적 참고용으로만 여기에 남아 있다.너는 더 이상 이것을 할 필요가 없다.

먼저 이전 항목을 제거하고 새 항목을 추가하십시오.

# uninstall whichever one you're using
npm uninstall eslint-config-airbnb
npm uninstall eslint-config-airbnb-base

# install the typescript one
npm install -D eslint-config-airbnb-typescript

그런 다음 ESlint 구성을 업데이트하고 "확장" 섹션에서 이전 Airbnb를 제거한 후 새 구성을 추가하십시오.

extends: ["airbnb-typescript"]

Babel, 레거시 Javascript 및 새 형식 지정 파일을 구성하고 확장자 무료 가져오기를 사용하려는 경우*.ts그리고 ESLint 문제에 직면하고 있었다(아래 해결책도 발견).

rules구성:

"rules": {
   "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "mjs": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
   ]
}

또한 추가 설정 항목이 필요한 경우.eslintrc.js:

  "settings": {
    "import/extensions": [".js", ".mjs", ".jsx", ".ts", ".tsx"]
  },

행운을 빈다!

인터넷에서 찾은 모든 대답을 번들로 묶어서 이 작업을 수행하도록 했다.

나에겐 이게 최종 결과야

{
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },

  "env": {
    "browser": true,
    "es2021": true
  },

  "extends": ["plugin:react/recommended", "airbnb"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["import", "react", "@typescript-eslint"],
  "rules": {
    "no-console": 1,
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never",
        "mjs": "never"
      }
    ]
  }
}

나는 react native btw를 사용한다. 만약 당신이 뭔가 다른 것을 사용하고 있다면 reaction과 관련된 것을 제거하는 것으로 충분할 것이다.

.eslintrc에 가져오기 확장자 및 구문 분석기를 추가하는 데 중요

    "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
},

규칙에 추가:

 "import/extensions": [
  "error",
  "ignorePackages",
  {
    "js": "never",
    "jsx": "never",
    "ts": "never",
    "tsx": "never"
  }
]



enter code here

참조URL: https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions