Linting For Beginners

2019/12/11

In today’s world we are sharing and working on more code together than ever before. Even in small teams within a company or maybe even in a collective group online you might be sharing code development opportunities. This code is most likely being stored in GitHub or another git repository. The problem is when you have multiple people working on code it starts looking different depending on who is writing the code. This is where linting comes in.

What is to lint?

Linting is the process of running a program that will analyze code for potential errors. You can read all about it on the Wikipedia Page. Essentially, it is a process to make sure that the code is all matching. So here we are going to configure a lint process on an existing project.

Install and Configure Lint

The first step we need to do is install lint to your workstation. You can everything about eslint on its site. In order to install lint, you will need to make sure you have npm installed on your workstation first.

Once npm is installed, open a command prompt in the directory for your project and run:

npm install eslint –save-dev

After the install, it is very possible that Visual Studio Code will warn you that you have too many changes and you should ignore the node_modules directory. This is a good idea.

Also, you may notice that this project does not have a packages.json file. This will cause some issues, so we need to go back and create one by running:

npm init

And go through the prompts. We can run the npm install command again and now it will run without any errors.

Now that we have installed lint to our projects, we can configure our lint environment

npx eslint –init

When you run the above command, it will start walking you through the configuration options. I am going to use the following options:

Then you can customize the newly created lint configuration file.

From this point, you can run something like the following to test your JS file:

eslint “C:\folder\location\file.js”

This will show you all the errors.

You can add a –fix to the end of the above command it eslint will fix all of the errors it can. However, it is even better to use eslint in Visual Studio Code. So you can add eslint as an extension to Visual Studio Code:

Once you have done that all of the code will light up in red that needs to be resolved.

Here, you can see there are a lot of problems to fix.

Fix All At Once?

So one of the great things about eslint is we can prevent people from uploading new code that has not been validated. Obviously this is the best solution because it would prevent people from adding code to your project that does not follow all of your rules.

To accomplish this we need to use something like githooks to force rules to happen on events. The easy solution is to use Husky for this. So the first step is we need to install Husky.

npm install husky –save-dev

So now that we have, we want to run the lint process each time we push staged files. To accomplish that, we need to use Lint Staged

npm install –save-dev lint-staged@beta

The last step is to update our packages.json to create a husky rule to run lint-staged on a commit. To do that we add this:

So now if someone tries to publish code to your project with an error, it will prevent you from publishing until you fix it.

And that is it! Now you have a shared repo that no one can publish code that does not follow the rules you setup.

Post Directory