In this article I would like to start very easily and go into more depth from topic to topic. In the first step we will use simple rules and options. Then we will learn the correct use of configs and plugins. During the whole learning process you will get useful tips and information so you will be able to build your own ESLint and Prettier environment.

How it all began#

Actually I did not want to use ESLint and Prettier because I never felt the need for it because Angular, which i use in my daily life, brings a linting tool and a simple code formatter. But in the end several other things made my decision to use ESLint and Prettier in a more professional way.

First the endless discussions how code should be written or formatted. This is a really annoying subject, for me at least. Personal preferences should go away here. There are more important things to consider.

Secondly, if I want to introduce this to the team, team members will definitely ask me questions and I don’t want to stand there helplessly. It can happen that colleagues lose interest if you do not answer questions or if you cannot promote it.

Thirdly, the power of these tools. It helps you to focus on the essentials in your daily life instead of consistently being forced out of your flow because of for example code has been formatted incorrectly which is mostly reported by a colleague in a code-review.

At the end of the day its all about business no matter how much fun we have in what we do. It is just waste of time. You can spend your time better.

As you can see, for a developer there are many disruptive factors in daily business. Let’s eliminate these disturbances together based on established web tools.

Info: There will be maybe no TSLint with Angular in the near future because TypeScript decided to support ESLint instead of TSLint. The Angular Team is currently working on a migration from TSLint to ESLint. See here.

What is ESLint and how can it help us?#

ESLint is a tool which can analyze written code. Basically it is a static code analyzer and it can find syntax errors, bugs or styling improvements. In other languages such as Go is the a core part of the programming language.

What do I need to get started with ESLint?#

I assume that you have node and npm installed on your operating system and are familiar with it.

Create a playground directory#

You should change into a directory where your JavaScript or TypeScript project is or like me create a test directory “lint-examples” where we can work on it according to this article. On a Linux-based operating system just type mkdir lint-examples in the command-line and then change to this directory with cd lint-examples.

Install ESLint#

Now let’s create a package.json so we can install ESLint. Execute the following command: npm init create a package.json which is required for installing eslint in your directory.

Add eslint to your npm scripts#

{
  "name": "eslint-examples",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "eslint": "eslint"
  },
  "devDependencies": {
    "eslint": "7.1.0"
  }
}

Tip: "eslint": "eslint" in scripts is a shortcut for node_modules/.bin/eslint

Create test.js#

Now let’s create a simple JavaScript file in lint-examples directory where we can apply ESLint on. Don’t worry about why the code sample is weirdly formatted. We need this as a starting point.

var foo = 1
console.log(foo)
var bar
bar = 1
function test(

    ) {
  console.log(baz)
}
var baz = 123

#javascript #eslint #prettier #typescript