Improve Your Code Quality With Linter

A linter is a tool for analyzing source code to flag errors, bugs, code conventions, and verify code quality. Is a linter important for our projects? My answer is yes, it's important. With a linter, we're forced to learn and be disciplined in writing good and clean code, although it doesn't guarantee bug-free code. For large-scale projects, linters are highly recommended so that all contributors use the same code conventions and maintain consistency. This article will focus on two types of linters: JavaScript and CSS linters.

JavaScript Linter

Here's a list of popular and frequently used JavaScript linters:

• ESLint
• Prettier
• StandardJS
• JSLint
• JSHint

The linter commonly used in Bukalapak projects is ESLint. It's one of the fastest-growing linters with strong community support.

CSS Linter

Here's a list of popular and frequently used CSS linters:

• StyleLint
• SCSSLint
• Stylefmt
• CSSLint

For CSS linters, the one commonly used in Bukalapak projects is scss-lint because the base style used by Bukalapak Arin uses SCSS. However, I'll explain project integration using stylelint because this linter is very flexible and has many plugins and rules.

Integration Guide

ESLint Installation

Integrating ESLint into a project is not too difficult. If you already have a JavaScript project in the Bukalapak repository, the installation is quite easy—just run the script below.

### NPM
npm install -d eslint
### Yarn
yarn add --dev eslint

After installing ESLint, run the following command to initialize the project with the linter.

### NPM version >= v5.2.0
npx eslint --init

You'll see something like the image below.

We're given 3 options. The first option uses 3 commonly used configs:

• Airbnb
• Standard
• Google

The second option lets us define our own basic rules, and the third option inspects JavaScript files in the project. I recommend using the second option as it's easier and more flexible to customize. If you choose the third option, you'll be asked questions like in the image below.

Then a .eslintrc.js file will be created. Here's an example of its contents:

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 2015,
    sourceType: 'module',
  },
  rules: {
    indent: ['error', 4],
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
    semi: ['error', 'never'],
  },
}

In this file, we can customize our own rules or use rules provided by the community. The list of rules can be seen at this link. To see what commands ESLint can execute, use the command npx eslint --help.

After integrating with the project, when our editor supports ESLint, red or yellow underscores will appear like in the image below.

This indicates that the code we wrote doesn't comply with the rules defined by ESLint. We're forced to change the code to make the red underscore disappear. Also add a script in the package.json file like the script below.

/* package.json */
{
  // ...
  "scripts": {
    "lint:scripts": "eslint --fix --ext .js --ignore-path .gitignore ."
  }
  // ...
}

Once this script is added, we can run the command yarn lint:scripts or npm run lint:scripts in the terminal. If there are errors in the code we've written, errors or warnings will appear after running the linter. Here's an example of the error in the image below.

PS: The --fix flag automatically fixes code that can be repaired by the linter, while unfixable issues will only be displayed in the terminal output. The --ext flag filters files by extension that will be checked by ESLint.

ESLint and Single Vue Component

If we want ESLint to check files with a .vue extension, it's not too difficult.

• First, add eslint-plugin-vue with the following command: yarn add --dev eslint-plugin-vue
• Then edit the .eslintrc.js file in the extends property. The value of this property can be a String or Array. Since we'll be adding other rules for .vue files, we'll use an array value. Add 'plugin:vue/strongly-recommended' at index 1 as shown in the image below. Plugin rules can be found here.

• Then slightly edit the script for running ESLint in the package.json file. Add the .vue file type to the script. The final example will look like the image below.

After that, if we run yarn lint, errors will appear in .vue files, for example like the image below.

Then just follow the rules defined at the beginning by ESLint.

Stylelint Installation

Integrating Stylelint is not too difficult, similar to integrating ESLint earlier. We simply need to add stylelint dependencies and its configuration. Here's an example:

### NPM
npm install -d stylelint stylelint-config-standard
### Yarn
yarn add --dev stylelint stylelint-config-standard

I'm using stylelint-config-standard to make it easier to integrate with Codeclimate if you want to integrate with Codeclimate in the future. If you want to see the rules and plugins supported by Codeclimate, you can check this link.

After the dependencies are installed, we only need to add a .stylelintrc file to add the default config to stylelint. Here are the contents of the .stylelintrc file:

{
  "extends": ["stylelint-config-standard"]
}

If you want to add additional configs not available in stylelint, you can add them to the .stylelintrc file. To see what configs can be added, check this link. Then we can add a script to run stylelint in package.json. Here's the script to add to the package.json file.

"scripts": {
  //...
  "lint:style": "stylelint 'assets/styles/***.scss' --fix",
  "lint:vue": "stylelint '***.vue' --fix"
  //...
}

Two scripts are created so that when running lint for scss, it directly focuses on the specific folder defined in the script. Stylelint also supports linting css and scss in .vue files.

Bonus: Husky + Lint-Stage

Sometimes we forget to run the linter, so here I'll explain how to run the linter script when we commit in our project. We only need to add new dependencies: lint-staged and husky. To add them, we just need to run the script below in the terminal.

### NPM
npm install -d lint-staged husky
### Yarn
yarn add --dev lint-staged husky

After adding these dependencies, we can add a configuration to run the linter before committing in the package.json file. Here's what needs to be added.

"lint-staged": {
  "*.{js,vue}": [
    "yarn lint:vue ",
    "yarn lint:script",
    "git add"
  ],
  "*.{scss,css}": [
    "yarn lint:style",
    "git add"
  ],
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

In the lint-staged property, files are differentiated according to the type of file to be committed. The script will run depending on the files staged in git. If only .vue files are staged, only the *.{js,vue} linter will run. If both css and vue files are changed, both linters will run before committing. If any linter fails, the file will not be committed.

Blog

tutorial

7 min read

April 2, 2023

2 tags

TypeScript & React: Integration Guide & Best Practices

TypeScript in React application development and related best practices. Combining TypeScript with React improves code reliability, makes error detection easier, and helps with documentation. This article covers topics like setting up a React project with TypeScript, writing React components, using React Hooks, handling events, form handling, managing global state with Redux, testing components, and other best practices. By applying these techniques, you can improve the quality and reliability of code in your React applications.

#frontend#typescript

Read More

Tools

5 min read

May 2, 2020

2 tags

Getting to Know ESLint, JavaScript Linter

Lint or linter is a tool to analyze source code to mark errors, bugs, code conventions, and verify code quality.

#javascript#tools

Read More