Understanding how to set up linting for your workspace (javascript)
As software engineers we ask ourselves ‘how do I improve my code quality?’. There are things you could do to improve your code quality, one of them is linting.
Linting is the process of running a program to analyse code for the common mistakes we make ( potential errors ). In a javascript context the common mistakes can be :
- Missing semicolons at the end of a line.
- Curly braces without an if, for, while, etc.
- Code that is never run because of a return, throw, continue, or break.
- Case statements in a switch that do not have a break statement.
- Leading and trailing decimal points on a number.
- A leading zero that turns a number into octal (base 8).
- Comments within comments.
- Ambiguity whether two adjacent lines are part of the same statement.
- Statements that don’t do anything.
Setting up linting in your workspace.
This is 2016 and there is a lot of tooling around javascript. To a newbie this can be quite overwhelming, so I am going to keep things as simple as I can.
Make sure you have Nodejs installed on your system. A simple way to check if it is installed is through your terminal. Type node --version and you should see the version of node installed.
You will need a program to help you download packages to use in your project. You could use the default npm that comes with node, but i prefer yarn . Installing yarn is simple. Type npm install yarn -g . That will install yarn in the global scope so that you can use it from anywhere in your system.
Create a folder and name it whatever you like (I have named mine app). This will be your root directory of your project. Let’s initialize our app by typing yarn init . It will prompt you with a bunch of questions, fill them and continue. Under your root directory you should have a package.json file that looks like below.
Add a src directory and in it add a file app.js or whatever you like.
Setting up Eslint
We are going to use eslint to handle all the linting for us. It is a great flexible linting tool. Let’s install it as a dev dependency
yarn add eslint --dev
Let’s also install a coding style. There are three popular coding styles Google,Airbnb and Standard. Please go through them and see what floats your boat before you choose. (I am using the Standard coding style)
yarn add eslint-config-standard --dev
yarn add eslint-plugin-promise --dev
yarn add eslint-plugin-standard --dev
After the installation is done we need to amend our package.json file to include the linting. Here is what it looks like.
Take note of the the script object. We are simply calling eslint and giving it a directory to lint ./src/** . In the eslintConfig object is where we put our configurations for linting.
Let’s have some linting fun
In our app.js file let’s add some code and run linting on it to see of our linting is set correctly.
const hd = "smile man we are almost there";
The above code looks okay but let’s find out what eslint thinks. Running eslint yarn lint . Now eslint has some complaints about our code
From this point you now see where your code has problems, You can modify your code and then run yarn lint again.
The next thing you should be aware of are task runners. A task runner is a piece of software automates many of the things we do as software engineers like running tests, minification, bundling and linting.
Without a task runner you would have to perform those tasks one after another until you are done. i.e. you would do
yarn lint // and wait until it is done
yarn test // wait till all of your tests are run
yarn minify //wait till all assets are minified
...
Incase you are interested in learning how to automate tasks using a task runner. I gat you covered. I have an article covering that coming soon.
Top comments (0)