Typescript + ESLint and StandardJS
Tags: typescript, eslint, standardjs, configuration
Published: 2019-08-02 03:16:18

---
title: Typescript + ESLint and StandardJS
published: true
description: Typescript ESLint configuration file for reference.
tags: Typescript,ESLint,StandardJS,Configuration
---

**Update 12-9-2019** - I have created an ESLint plugin that does the same thing as this article but should make your ESLint config super simple.
The package can be found [here](https://www.npmjs.com/package/eslint-plugin-standard-typescript). Just follow the README instructions and you will be setup with the config described in this article. 


Now that [Typescript linting is moving](https://eslint.org/blog/2019/01/future-typescript-eslint) from [TSLint](https://palantir.github.io/tslint/) to [ESLint](https://eslint.org/) it is time to adjust our configuration. If you are like me you probably love using [StandardJS](https://standardjs.com/) as your official style when writing Typescript/Javascript.

When I was using TSLint I was using a package that made using StandardJS easy called [tslint-config-standard](https://www.npmjs.com/package/tslint-config-standard). Unfortunately, the setup for Typescript with ESLint is a little more involved so I thought I would share my config in hopes to save you a few hours of fumbling.

`npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard`

This is a lot of dependencies so I'll explain each one.
* @typescript-eslint/eslint-plugin - An ESLint-specific plugin which, when used in conjunction with @typescript-eslint/parser, allows for TypeScript-specific linting rules to run.
* @typescript-eslint/parser - An ESLint-specific parser which leverages typescript-estree and is designed to be used as a replacement for ESLint's default parser, espree.
* eslint - The actual tool that runs the linting rules.
* eslint-config-standard - Configuration for StandardJS rules.
  * eslint-plugin-import
  * eslint-plugin-node
  * eslint-plugin-promise
  * eslint-plugin-standard
All of the eslint-plugins under eslint-config-standard are required by that package, and I'm not sure why the package doesn't include them as dependencies... 😅

`.eslintrc.js`
```javascript
module.exports = {
  'parser': '@typescript-eslint/parser',
  'parserOptions': {
    'project': './tsconfig.json', // Required to have rules that rely on Types.
    'tsconfigRootDir': './'
  },
  'extends': [
    'plugin:@typescript-eslint/recommended', // Out of the box Typescript rules
    'standard' // Out of the box StandardJS rules
  ],
  'plugins': [
    '@typescript-eslint' // Let's us override rules below.
  ],
  'rules': {
    '@typescript-eslint/no-use-before-define': 'off', // Allows us to hoist variables and functions which I am a fan of, functions not variables that is.
    '@typescript-eslint/no-explicit-any': 'off', // Too strict for my case, sometimes I need an any type
    '@typescript-eslint/member-delimiter-style': ['error', { // Prevents us from using any delimiter for interface properties.
      'multiline': {
        'delimiter': 'none',
        'requireLast': false
      },
      'singleline': {
        'delimiter': 'comma',
        'requireLast': false
      }
    }],
    '@typescript-eslint/indent': 'off', // This is the job of StandardJS, they are competing rules so we turn off the Typescript one. 
    'no-unused-vars': 'off', // On the fence about using this one, sometimes we import a package that is never used directly. 
    'node/no-unsupported-features/es-syntax': 'off' // Allows us to use Import and Export keywords.
  }
}

```

For the curious here is my `tsconfig.json`
```json
{
  "compilerOptions": {
    "alwaysStrict": true,
    // TODO Needed because of Apollo https://github.com/apollographql/apollo-server/issues/1182, this should be considered a bug with Apollo
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "outDir": "dist",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "target": "es6",
    "rootDir": "./src",
    "lib": [
      "es5",
      "es6",
      "es7",
      "esnext.asynciterable"
    ],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strict": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts",
    "dist"
  ]
}

```

Hope this config helps or saves you some time, any follows on twitter is much appreciated [@itmazyiii](https://twitter.com/iTMayzIII)