A simple way to configure Eslint to TypeScript

#typescript #tutorial #beginners

On this article, I will show you to configure eslint with typescript in a quick way.

I'll use yarn on the examples below, but it can be done with npm too.

First of all, you need to install eslint in your project by using the following command:

$ yarn add -D eslint

Start the Configuration

To create your configuration file and set TypeScript as enabled, you need to execute the following command in your project:

$ yarn eslint --init

After that, you will need to choose some options for the following questions:

How would you like to use ESLint?

To check syntax only;
To check syntax and find problems;
To check syntax, find problems, and enforce code style;

Choose option 3.

What type of modules does your project use?

JavaScript modules (import/export);
CommonJS (require/exports);
None of these;

Choose option 1 - JavaScript modules (import/export).

Which framework does your project use?

React;
Vue.js;
None of these;

In this case, to use NodeJS + TS, I'll choose option 3 - Node of These.

Does your project use TypeScript?

(y/N) - The option N is selected as a default

To accept TypeScript in your eslint configure, set y.

Where does your code run?

Browser;
Node;

If you enable the two options you can work in both.

In this example, I chose 2 - Node and disabled 1 - Browser.

Note: You can use the spacebar to enable/disable options in this section.

How would you like to define a style for your project?

Use a popular style guide;
Answer questions about your style;
Inspect your JavaScript file(s);

Personally, I like to use 1. Use a popular style guide and Standard.

What format do you want your config file to be in?

JavaScript;
YAML;
JSON;

I like to use the JavaScript format because it's easier when you need to import external files.

Would you like to install them now with npm?

(Y/n) - The option Y is selected as a default

Just press enter to install.

Note: Because I commonly use yarn, I wait to install the packages in this last part. After that, I delete the node_modules and install again using yarn to guarantee consistency.

Wrapping Up

I use this process in some projects of mine and this is the easiest way to configure and use the most updated packages to enable eslint in projects.

Was this process helpful to you? Feel free to comment below.