bradzacher/eslint-plugin-typescript

Cannot migrate from babel-eslint

Closed this issue · 1 comments

Currently in the process of integrating typescript in my codebase.
I tried to add the typescript plugin and replace the babel-eslint parser with typescript-eslint-parser in my .eslint

Unfortunately, running eslint will raise countless errors looking like

import/no-named-as-default-member: Resolve error: Expected ']' instead of '"' at line 6 column 5 of the JSON5 data. Still to read: "\"@babel/preset-types"

Have you seen that before ? I cannot find any mention of @babel/preset-types anywhere in my code, so I suppose it's a truncated version of @babel/preset-typescript, and I'm wondering why this happens

my .eslint
extends:
  - eslint-config-with-prettier
  - plugin:redux-saga/recommended
  - plugin:security/recommended

settings:
  react:
    version: 16.6.0
  import/resolver: babel-plugin-root-import

parser: typescript-eslint-parser

plugins:
  - immutable
  - redux-saga
  - security
  - typescript

parserOptions:
  ecmaVersion: 2018
  sourceType: "module"
  allowImportExportEverywhere: false
  codeFrame: false
  ecmaFeatures:
    legacyDecorators: true

globals:
  firebase: true
  requirejs: true
  window: true
  _: true
  expect: true
  jest: true
  # enzyme vars (check jestsetup.js)
  shallow: true
  render: true
  mount: true

env:
  amd: true # for require.js (request() and define())
  browser: true
  commonjs: true
  es6: true
  mocha: true

rules:
  class-methods-use-this: 1
  immutable/no-mutation: 2
  import/named: 1
  import/order: error
  import/no-extraneous-dependencies: 0
  jsx-a11y/anchor-is-valid:
  - error
  - components:
    - Link
    specialLink:
    - to
  no-restricted-syntax:
    - error
    - selector: 'ForInStatement'
      message: 'for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array.'
    - selector: 'LabeledStatement'
      message: 'Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand.'
    - selector: 'WithStatement'
      message: '`with` is disallowed in strict mode because it makes code impossible to predict and optimize.'
  no-else-return:
    - "error"
    - allowElseIf: true
  one-var:
    - error
    - var: "always"
  prefer-destructuring:
    - error
    - object: false
  react/jsx-filename-extension: 0
  react/forbid-foreign-prop-types: 1
  strict: 0
  typescript/class-name-casing: "error"
  typescript/no-unused-vars: "error"
  typescript/type-annotation-spacing: "error"
my .tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "allowJs": true,
    "checkJs": true,
    "jsx": "react",
    "sourceMap": true,
    "outDir": "./dist_staging/",
    "rootDir": "src",

    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noImplicitThis": true,

    "noImplicitReturns": true,

    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "dist_*",
    "scripts",
    "webpack",
    "jest",
    "coverage",
    "config"
  ],
  "include": [
    "./src/**/*"
  ],
  "types": [
    "typePatches"
  ]
}

figured it out, my .babelrc was broken, unrelated to eslint-plugin-typescript 🙇‍♂️