getting typescript, babel, and eslint working together

Previously, I wrote about getting Typescript set up for a new project. Today, I want to discuss adding Babel and ESLint to the mix.

Getting Babel to work with ESLint has undergone a few changes. Since June 2020, however, the Babel team has been moving forward with a scoped package approach to work with ESLint.

Let’s start with ESLint:

yarn install --dev eslint

Now, we need to configure the project - fortunately, ESLint has a nice interactive setup:

./node_modules/.bin/eslint --init

Following the prompts, you should wind up with a new .eslint file.

Now, we need to install and configure Babel before combining them.

At a minimum, we’ll likely want @babel/core and @babel/preset-env. Since we’re working with Typescript, we’ll also want @babel/preset-typescript.

Beyond that, a few plugins I find useful are @babel/plugin-proposal-class-properties, and @babel/plugin-transform-runtime. The latter requires @babel/runtime.

So, let’s install these now:

yarn add --dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript @babel/runtime

The Babel team recommends using a babel.config.json file to store the config (though, previously I’d gotten good use out of a .babelrc), so let’s flesh that out now:

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

In this particular case, we’re specifying the target for @babel/preset-env to only look at the current version of Node.

Now that we have a start for ESLint and Babel, let’s combine them.

We need to install one more package:

yarn install --dev @babel/eslint-parser

Finally, updating our .eslintrc.js which was set up automatically based on answers to the interactive prompt, we add a parser and plugin:

 module.exports = {
   env: {
     browser: false,
     es2021: true,
   },
   extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
-  parser: ["@typescript-eslint/parser"],
+  parser: ["@typescript-eslint/parser", "@babel/eslint-parser"],
   parserOptions: {
     ecmaVersion: 12,
     sourceType: "module",
   },
-  plugins: ["@typescript-eslint"],
+  plugins: ["@typescript-eslint", "@babel"],
   rules: {},
 };