If you are new to Javascript and want to increase the quality within your codebase, then adding linting to your project is a good idea. As humans, we are prone to making mistakes, typos, forgetting to remove unused references, forgetting to add the ';' at the end of a line, not adding the correct whitespace, the list could go on and on. Compilers are great for spotting these types of issues. This is what linting is all about. In this tutorial, I'll cover the step that you will need to follow to enable linting within your Javascript project. Sounds good? Read on.

ESLint

When it comes to Javascript and linting, the go-to tool to use is ESLint. ESLint is pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. You can enable ESLint for your project via NPM, using this command:

npm install eslint --save-dev
./node_modules/.bin/eslint --init

Full download instructions can be found here. After installation is complete, you should now see a new script in your package.json file, like this:

"scripts": {
 "eslint": "eslint *.js"
}

If you now run:

npm eslint

The linter will be triggered and it will tell you if your code passes the linting process, simple!

What Happens If I Forget To Run the Linter?

Now we have a way to tell the compiler to test if our code meets our coding linting standards, however, this approach has a big downside. You have to remember to run the ESLint command manually before you commit your code. In my way of seeing the world, anything you have to do manually, your deployment process is a bug and you should be automated.

The easy way to fix this problem is to get GIT/NPM to trigger ESLint before you are allowed to commit any code. If you want to consistently run a linter on your project, you need it to be run automatically before you even commit your code into source control. Having your code quickly linted before every commit and then being forced to fix the errors before you commit will ensure a higher-quality code base. Like doing commits, or, even releasing a website working in little increments often is a lot more simple and efficient, than doing a big bang limiting fix once every few months.

How Can I Add A Pre-hook?

One way to trigger ESLint before a commit is to add a GIT pre-hook. If you are new to creating a pre-hook look -assuming you use GIT and it's installed on your project - look inside the '.git/hooks' folder. In here you will see a number of disabled GIT scripts you can enable and use. One approach to enable linting is to enable the pre-commit hook and add some code inside it.

Personally, I don't really like putting scripts here. The majority of developers only have a basic grasp of GIT on the command-line and how its folder structure works. When you use GIT to run a pre-hook you end up with 'magic' in your solution that no one in the team really understands.

When it comes to enabling linting within a project, my preference is to tackle the problem in the same way we run any useful project script, do the work within our package.json file. As you will already have scripts and config items within your package.json file that people on the team use, adding your pre-hook scripts in here will make your project more consistent for the team.

As you would guess several packages already exist to allow you to do this:

pre-commit

pre-commit. Pre-commit allows you to run a script from your package.json before your GIT commit will be completed. To install pre-commit, you can run:

npm install --save-dev pre-commit

Full-instructions can be found in pre-commit. After installing pre-commit, you can configure your package.json like so:

"scripts": {
    "eslint": "eslint *.js"
}
"pre-commit": "eslint"

Every-time you make a GIT commit now every JS file in your project will be checked and linted. If any of those files fail your linting rules, then you will not be allowed to commit your changes until you have fixed everything.

Pre-commit is great on small projects. What happens if your solution contains 10,000 .js files. Run a full lint on every commit will make your development process very slow and cause a lot of frustrations as your project grows?

On big projects, you will only want your linting to be run against the specific files you want to commit. This can be done with another package called, lint-staged.

Lint Staged

Instead of running the linter against every Javascript file in the whole of your repo, lint-stage will run again your commits staged files. This makes your development workflow a lot quicker while still ensuring your code adheres to your project's quality gates. If you want to perform a lint against everything, you can do that in your Ci/CD pipeline. You can install lint-stages using:

npx mrm lint-staged

This command will install lint-staged and another package called husky. After installing lint-staged, you should update your package.JSON to look similar to this:

"scripts" {
    "lint-staged": "lint-staged",
},
"lint-staged": {
    "*.js": "eslint"
},
"pre-commit": "lint-staged"

That's it, you have now added linting to run automatically on your project!