Automatically Check TypeScript Code for Errors With ESLint
Though VSCode includes TypeScript language support which helps us pick up TypeScript errors in our TypeScript code, we'll introduce more robust code checking with ESLint - a popular open-source JavaScript/TypeScript linting tool.
Linting with ESLint#
📝 This lesson's quiz can be found - here.
🗒️ Solutions for this lesson's quiz can be found - here.
Though VSCode includes TypeScript language support which helps recognize errors in our TypeScript code, we'll probably need more robust code checking. As an example of something we might want to forbid is preventing a variable from ever having the any
type. TypeScript won't stop us since any
is a valid basic type but as a preference, we probably don't want to have code built in our app that has the any
type since it removes the benefits of type checking.
This is where linting comes. Linting (i.e. code checking) is a process that analyzes code for potential errors. When it comes to linting JavaScript and/or TypeScript code, ESLint is the most popular library to do so. It's configurable, easy to introduce, and comes with a set of default rules.
To introduce linting into our app and take advantage of our code editor, we'll first install the VSCode ESLint extension. The VSCode ESLint extension allows us to integrate ESLint into VSCode to help provide warnings, issues, and errors in our editor.
Once the VSCode ESLint extension is installed, we'll go ahead and install a few other development dependencies that we'll need to enable ESLint configuration into our app. We'll install:
eslint
: the core ESLint library@typescript-eslint/parser
: parser that will allow ESLint to lint TypeScript code@typescript-eslint/eslint-plugin
: plugin when used in conjunction with@typescript-eslint/parser
contains many TypeScript specific ESLint rules.
server $: npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
.eslintrc.json#
We'll introduce an .eslintrc.json
configuration file in the root project directory. The .eslintrc.json
file is the configuration file that'll dictate the ESLint set up of our application. We'll look to introduce a couple of options to our ESLint configuration file.
parser
#
"parser": "@typescript-eslint/parser",
ESLint depends on a parser to read and translate JavaScript code for it to understand. The default ESLint parser (ESpree) doesn't recognize TypeScript code. The @typescript-eslint/parser
is probably the most widely used and supported parser for TypeScript code, and the one installed in our app.
parserOptions
#
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
The parserOptions configuration allows us to specify the language options we want ESLint to support. By default, ESLint supports ES5. We'll set the ecmaVersion
to 2018
to allow us the use of modern ES features in our app. sourceType: module
to declare that we're using ES6 modules in our app.
extends
#
"extends": ["plugin:@typescript-eslint/recommended"],
The extends
option allows us to extend the rules from a certain plugin with which we've picked @typescript-eslint/recommended.
env
#
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL