Project status

[LaszloDev]

My requirements are mostly the same and I ran into the same issues.

Did you check recently for any improvements?

[brendanoffer]

I too am curious about an update. Has anyone gotten enums to be recognized by babel-eslint?

[krainboltgreene]

So babel-eslint 10 actually works much better, but fails to understand specialized syntax like a! as number or newer typescript parts like unknown.

[TrejGun]

for some reason this setup throws an error on static keyword

export class XX {
  public static xx = 123;
}

[nrei0]

Hey! I'm also making experiment of ts-loader vs babel plugin. For a minimal project, I got -30% bundle size and x3 faster compilation.

Please, take a note: https://github.com/babel/babel-eslint#breaking-change-in-v11xx

[TrejGun]

@Ateiri and you dont have errors I mentioned here https://github.com/babel/babel-eslint/issues/797 ??

[nrei0]

@TrejGun no-no, sorry that confused, I didn't check full TS support from babel-eslint@11, but in a case, if support is limited as you mention, we need to aggregate all problems and raise a ticket in babel-eslint's repository.

I will check TS syntax support in babel-eslint a bit later, also have a lot of to do for now.

[tavrez]

Is this reported to developers of babel/babel-eslint ?

[TrejGun]

yes, they are working on babel8 currntly which is going to support eslint and typescript much better

[zys5945]

Reading on https://babeljs.io/docs/en/babel-plugin-transform-typescript, it looks like babel does not have a type system. I don't think it will be implemented any time soon (hopefully I'm wrong).

For now it's either tsc or babel + flow

[TrejGun]

yes, babel won't implement types

you can still use https://github.com/typescript-eslint/typescript-eslint

[tavrez]

Have you tried your tests with new Babel parser? @babel/eslint-parser

[krainboltgreene]

Hey, I've just done this! It's much more possible now than before, but some room to grow. To be clear I have project using:

1. babel 7
2. eslint 4
3. typescript 4

To get this done you need:

1. @babel/eslint-parser
2. @babel/eslint-plugin
3. @babel/preset-typescript
4. You need to tell eslint to bother with .ts(x), which includes the eslint extension in vscode (It's the "eslint.validate" and "eslint.probe" property, if you're curious)

How far will this get you?

• eslint will now be able to parse your .ts(x) and .js(x) files just fine
• typescript will be able to typecheck your .ts(x) files just fine
• babel will be able to parse your .ts(x) and .js(x) files just fine
• vscode does all the above

I would prefer eslint to also report what tsc pops out, but fuck it I'll take what I can get. You also can't use @typescript-eslint/eslint-plugin so no fancy rules.

[TrejGun]

here is what i have found https://github.com/babel/babel/issues/11975

[krainboltgreene]

Hmm, I haven't even run into that yet, but I suspect I will.

[krainboltgreene]

Okay, I've found one annoyance:

[tafelnl]

@krainboltgreene

I am trying to combine @babel/eslint-plugin with TypeScript as well. Do you have any updates for us?

[tafelnl]

Apparently, recently, Babel made their point of view about this clear in the README: https://github.com/babel/babel/pull/12222/files

TLDR: They do not officially support it because they "want to avoid duplicate work". So for any type-aware rules it seems like we should just resort to @typescript-eslint

[krainboltgreene]

Yeah I poked at them in their slack channel about this and it's basically never going to work well together. I've completely abandoned the idea honestly. Non-typescript projects get babel-eslint and typescript projects get typescript-eslint.

[TrejGun]

i do this in the same way https://github.com/TrejGun/trejgun-eslint-config

[Azerothian]

I have the following working for a mix mode project as i transition it to typescript, it seems to work so far with gulp-eslint and vscode eslint.

packages.json

{
    "@tsconfig/node16": "^1.0.2",
    "@typescript-eslint/eslint-plugin": "^5.10.0",
    "@typescript-eslint/parser": "^5.10.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.26.0",
    "eslint-plugin-jest": "^24.3.6",
    "gulp-babel": "^8.0.0",
    "gulp-eslint": "^6.0.0",
    "typescript": "^4.5.4",
    "@babel/core": "^7.14.0",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-typescript": "^7.16.7"
}

.eslintrc

{
  "settings": {
  },
  "plugins": ["jest"],
  "parser": "babel-eslint",
  "env": {
    "node": true,
    "es6": true,
    "jest": true
  },
  "rules": {},
  "overrides":[{
    "files": ["*.ts"],
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
      "quotes": [2, "double"]
    }
  }]
}

tsconfig.json

{
  "extends": "@tsconfig/node16/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "noEmit": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "outDir": "lib/",
    "sourceMap": true,
    "esModuleInterop": true,
    "isolatedModules": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

.babelrc

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        },
        "useBuiltIns": "usage",
        "corejs": "3"
      },
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties"
  ]
}