DEV Community

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

Posted on • Edited 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
cd my-app
ember install ember-cli-typescript
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: 'latest',
    sourceType: 'module',
    requireConfigFile: false,
    babelOptions: {
      plugins: [
        ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
      ],
    },
  },
  plugins: ['ember'],
  extends: [
    'eslint:recommended',
    'plugin:ember/recommended',
    'plugin:prettier/recommended',
  ],
  env: {
    browser: true,
  },
  rules: {},
  overrides: [
    ...
+   {
+     // typescript files
+     files: ['**/*.ts'],
+     plugins: ['@typescript-eslint'],
+     extends: ['plugin:@typescript-eslint/recommended'],
+     rules: {
+       '@typescript-eslint/explicit-module-boundary-types': 'error',
+     },
+   },
  ],
};
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.

Note: you can also now uninstall babel-eslint whose job is now handled by @typescript-eslint/parser.

npm uninstall babel-eslint
Enter fullscreen mode Exit fullscreen mode

Bonus: if you'd like more strenuous type checking, you can make the following changes to make eslint aware of the type system:

// .eslintrc.js

module.exports = {
  ...
  overrides: [
    ...
    {
      // typescript files
      files: ['**/*.ts'],
+     parserOptions: {
+       project: true,
+       tsconfigRootDir: __dirname,
+     },
      plugins: ['@typescript-eslint'],
-     extends: ['plugin:@typescript-eslint/recommended'],
+     extends: [
+       'plugin:@typescript-eslint/recommended',
+       'plugin:@typescript-eslint/recommended-requiring-type-checking',
+     ],
      rules: {
        '@typescript-eslint/explicit-module-boundary-types': 'error',
      },
    },
  ],
};
Enter fullscreen mode Exit fullscreen mode

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)