Typescript + ESLint and StandardJS

#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. Just follow the README instructions and you will be setup with the config described in this article.

Now that Typescript linting is moving from TSLint to ESLint it is time to adjust our configuration. If you are like me you probably love using StandardJS 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. 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

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

{
  "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"
  ]
}