One of the saviours for JS developers is how best we can utilize the tools to minimize our errors in development time, starting from common issues that are caused by our muscle memory, to having unique coding standard across a team of developers, we will need to follow this to make our lives easier.

We are in excellent hands with some of the amazing toolchains that make JS development easier than ever. The common solution we use for this include Eslint & Prettier.

You can add them to your existing project using

npm install eslint prettier --save-dev

or if you use yarn

yarn add eslint prettier --dev

Prettier

Code Formatter that can integrate almost all popular editors out there, supporting multiple languages as well. Automate Prettier on save and be done with it.

Configuring Prettier

Once you have installed prettier, they give plenty of options to help you with how you configure the code style. You can create .prettierrc file in the root of your project. The common settings we use in our team is

{
  "singleQuote": true, // Replace double quotes with single quote
  "arrowParens": "always", //Example: `(x) => x`
  "bracketSpacing": true, //Print spaces between brackets.
}

Formatting on Save with VS Code

In your fav editor, you will have the option to automate prettier on save, I will discuss how we do in our VS Code. You will need to install this extension in VS Code first, the link is here

Or you can simply run

ext install esbenp.prettier-vscode

Once you have installed, you can open your settings.json and add these lines

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

with this, you will see the magic that prettier keeps doing every time you save your file. For other editors, you can find the documentation here.

Eslint

Find problems during development, auto-fix most problems and fix the remaining ones before they come back to bite you.

Tslint is typescript version of this, but typescript team confirmed that they are migrating from tslint to eslint, you can refer here. This makes all the more reason for us to set up to any JS project that you are working on.

Configuring Eslint

You can extend many popular companies coding standards, the commons ones include google, Airbnb.

Depending on React/Angular/Vue, you might want to add your eslint config one after another.

For example, for a nodejs/angular project, You can include the dependencies mentioned first,

npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier-eslint --save-dev

or if you are using yarn

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier-eslint --dev

Once done, you can create a file similar to how we created for prettier, the file name would be .eslintrc.json. You can also create rc file instead.

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {},
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-const-assign": "error"
  },
  "settings": {}
}

Linting on Save with VS Code

You will need to install Eslint extension in vs code. You can do that using

ext install dbaeumer.vscode-eslint

You can find more on that extension here

You can run eslint on save files here as well. In your vs code settings, you will need to add these lines.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

This will fix all your auto-fixable issues on save.

Ignoring files from Eslint & Prettier

There are ways in which you can tell eslint & prettier to stop working on some files.

Prettier ignore

Create a .prettierignore file and follow similar syntax on how you will use for .gitignore. Example would be

// file name -> .prettierignore
styles-tailwind.css

Eslint ignore

Similarly, you can create .eslintignore and it will skip that corresponding files specified there as well. Example would be

// file name -> .eslintignore
package.json
package-lock.json
yarn.lock
dist/
node_modules/

Using them on Pre-commit hooks.

Once you have set up eslint & prettier, you can make sure you are using them effectively by running a pre-commit hook to make sure you are not missing any errors. You can find more on that on my other blog here.

Using Eslint & Prettier in Javascript