Frontend developer from Czech republic
Published on 11/16/2019
If you have ever been part of a development team, you probably know that every single one of us has a different code formatting, semantics standards (and that's totally fine 😅). However, when you are all developing on one thing, it's very handy to follow one strict pattern so the codebase isn't a mixture of everything.
However, it would be pretty hard and inefficient for all developers to get used to one pattern (because we have side-projects where we use different style-guide and so on).
Eslint is a tool, which forces the developer to format their code according to selected rules.
E.g. rule: don't use semicolons in your code.
// The semicolon below would be underlined and showing error on hover
console.log("I shouldn't be using semicolons there")
So this way, all developers would have errors in their IDE/Text editor if they had semicolons in their code, but for some reason, they might ignore that errors/warnings and still commit changes. Fortunately, eslint can handle even that and automatically fix the errors on file save!
Unfortunately, developers might not have prepared their IDE/Text editor to work with eslint and wouldn't see those errors, but we can still create an eslint script which will run on our CI. That way we can ensure only correctly formatted code will be merged. 🙌
You probably heard of typescript, it's basically javascript with types (but there is much more in it!). It adds another layer of certainty to your code. However, it is a little bit tricky to make it work with eslint so let's dive into it!
First of all, we need to "teach" our editor to understand eslint 😄 So we'll install this extension.
After installation, we need to explicitly tell eslint extension to watch typescript files for linting errors (by default it lints only javascript and JSX files). Follow these instructions:
Ctrl+Shift+P
or Shift+Cmd+P
Preferences: Open Settings (JSON)
{
"eslint.validate": ["typescript", "typescriptreact"]
}
Note that if you hit Ctrl+Shift+P
or Shift+Cmd+P
in VS Code and type eslint it will show you all commands available for this extensions! However, the commands won't work because we haven't installed eslint dependency, let's do it now!
We have two options now:
# using npm
npm install -g eslint
# using yarn
yarn global add eslint
# Go to the root of the project (where package.json lives)
cd my-project
# using npm
npm install -D eslint
# using yarn
yarn add -D eslint
It's your choice which one of these you want to use
Eslint by default doesn't understand Typescript syntax. That's why you might hear of tslint
, which is (was) used instead of eslint for Typescript project, but the backers of this package announced earlier this year deprecation of tslint
in favour of typescript-eslint
project (which is monorepo, so we are gonna install few packages from it).
# using npm
npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
# using yarn
yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
We'll make configuration file for eslint. It can be of three different types:
eslintConfig
field in package.json
Create .eslintrc
file in the root of your project and paste this code inside:
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"rules": {
"semi": ["error", "never"],
"quotes": [2, "single"]
}
}
We are adding the @typescript-eslint/parser
(which will parse typescript files, so eslint understands them correctly). Then under plugins
, we add @typescript-eslint
plugin which gives us the possibility to add rules specific to typescript code. Under rules
we added some sample rules (no semicolons allowed, and use single quotes instead of double)
With this, if you create anywhere file with .ts or .tsx
extension and write code like this:
console.log("This shows errors")
You should see the string being underlined and the semicolon too. Showing you what rules this code violates.
Cool, now editor shows error when we type something that violates our eslint rules and we can manually fix them, but that's time-consuming, we can do better with automatic fixing!
All we need to do is to tell our VS Code eslint extension to run eslint --fix
command on file save.
Ctrl+Shift+P
or Shift+Cmd+P
Preferences: Open Settings (JSON)
{
"eslint.validate": [
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
],
"eslint.autoFixOnSave": true
}
Now whenever you save typescript file with eslint errors, it will be automatically fixed. Awesome!
We are almost finished, the last piece of work we need to do is to set up a script that will run eslint check.
The script might be executed on your CI to ensure that pushed code is correctly formatted.
To check code on your command line is very easy with eslint, look at this:
# Scans from the root of the project
eslint .
# Scans only src directory of the project
eslint src/*
However, there is a little gotcha in these commands. Do you know why? 🤔
It scans only javascript files by default, so typescript files will be ignored. So if you didn't have any javascript file in your project and only typescript files, you would see something like this:
Oops! Something went wrong! :(
ESLint: 6.6.0.
No files matching the pattern "." were found.
Please check for typing mistakes in the pattern.
So to lint typescript file we need to add an argument --ext <comma-seperated-list-of-file-extensions-to-watch. So with this in mind, the command would look like this:
# Scans from the root of the project
eslint --ext ts,tsx .
# Scans only src directory of the project
eslint --ext ts,tsx src/*
That's all, you have now configured eslint with typescript! 😎