getting typescript, babel, and eslint working together

2020-10-05

 | 

~2 min read

 | 

317 words

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:

babel.config.json
{
    "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:

.eslintrc.js
 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: {},
 };

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!