At the beginning of January we discovered an interesting note in TypeScript's roadmap about linting:
Meanwhile, ESLint already has the more-performant architecture we're looking for from a linter. Additionally, different communities of users often have lint rules (e.g. rules for React Hooks or Vue) that are built for ESLint, but not TSLint.
Given this, our editor team will be focusing on leveraging ESLint rather than duplicating work. For scenarios that ESLint currently doesn't cover (e.g. semantic linting or program-wide linting), we'll be working on sending contributions to bring ESLint's TypeScript support to parity with TSLint. As an initial testbed of how this works in practice, we'll be switching the TypeScript repository over to using ESLint, and sending any new rules upstream.
At Artsy we've been using TSLint for a few years now; it's worked well for us, and we've even written our own custom rules. However, given the vastness of the JS ecosystem and how fast it moves, it's easy to recognize this announcement as an exciting moment for tooling simplicity.
With this in mind we wanted to give the new officially-sanctioned typescript-eslint project a spin and document our findings.
To get started, install the necessary dependencies:
Then create a new
.eslintrc.js and add a bit of setup:
1 2 3 4 5 6 7 8 9 10
parserOptions.project points to your
1 2 3
Next, add a bit of TypeScript to a file
and run the linter:
1 2 3 4 5 6
Now lets expand the example a bit and add something more sophisticated, which in Artsy's use-case is commonly GraphQL:
tsconfig.json and let it know we'll be using
node for imports:
1 2 3 4 5
.eslintrc.js add these rules (while noting the addition of
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
For GraphQL to know what to lint, we'll need a schema. Thankfully the Ethiopian Movie Database has our back :)
1 2 3 4
index.ts, add this bit of code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
And run the linter:
1 2 3 4 5 6
Ahh yes, I meant
Bonus: VSCode Integration
As developers, we like our tools to work for us, and in 2019 the tool that seems to do that best just happens to be a brilliant open source product from Microsoft. There were a couple unexpected configuration issues when we were setting this up, but thankfully they're easy fixes.
Then add a couple settings:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
Format on save, fix on save, autofix on save, tell ESLint to recognize
.tsx, for the React folks)
tslint so that
eslint can do its thing:
Now ESLint will show you right where your GraphQL error is from within VSCode. Pretty sweet.
Be sure to read The future of TypeScript on ESLint for more details.