DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Linting TypeScript files in Ember.js
Charles Fries
Charles Fries

Posted on

Linting TypeScript files in Ember.js

Do you have an Ember.js app that's written in TypeScript, but aren't sure how to get eslint to play well with TypeScript files? Read this tutorial to learn how.

First, let's make a new Ember app and immediately install TypeScript.

ember new my-app
ember install ember-cli-typescript@latest
Enter fullscreen mode Exit fullscreen mode

Now we have a brand new Ember app that is ready for TypeScript code. But you'll soon realize after generating some TypeScript files that writing obviously erroneous TypeScript code in these files doesn't yield any of the normal eslint messaging we get from .js files.

To fix this, we need to install a TypeScript parser and plugin, and let eslint know that we want to use this custom configuration. Here's how we do that:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
Enter fullscreen mode Exit fullscreen mode

This command will install two TypeScript eslint packages to your app. Now the only thing left to do is update your eslint configuration file so it can make use of these packages. In a standard Ember app, this file is located at /.eslintrc.js.

We're only changing three lines here--we just need to tell eslint that we have a custom parser and an additional plugin we want to utilize:

// .eslintrc.js

module.exports = {
  root: true,
- parser: 'babel-eslint',
+ parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      legacyDecorators: true,
    },
  },
- plugins: ['ember'],
+ plugins: ['ember', '@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:ember/recommended',
    'plugin:prettier/recommended',
+   'plugin:@typescript-eslint/recommended',
  ],
  ...
};
Enter fullscreen mode Exit fullscreen mode

The first change swaps the standard babel-eslint parser for a custom one that can handle .ts files. The other two changes tell eslint that, in addition to the normal eslint, prettier, and ember rules, we want to also lint using the rules provided by @typescript-eslint/recommended.

And that's it! You should be able to execute npm run lint or npm run lint:fix and have you entire project linted.

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await