DEV Community

Cover image for How I Setup ESLint, Prettier, and EditorConfig for Static Sites
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

How I Setup ESLint, Prettier, and EditorConfig for Static Sites

#eslint #prettier #setup #guide

Whenever I build simple static sites, I always find the need to set up ESLint, Prettier, and EditorConfig. These tools help with linting and formatting the code I write to follow better code standards and best practices. Each tool has its benefits and they can all work together to provide great flow when writing code.

ESLint - helps with analyzing my code and pointing out potential issues and best practices to follow to encourage better coding patterns

Prettier - helps with auto-formatting my code based on custom configurations I have set for the codebase

EditorConfig - helps with customizing my editor to enforce consistent styling for the codebase

All 3 of these tools are somewhat similar and they do overlap at times. This makes it very confusing for developers to know how to properly set them up. Honestly, there are times when I still get confused on what configuration to change to handle certain issues, that's I created this guide as a reference for myself and other developers to follow a standard setup guide when building a static website.

Table of Contents

Prerequisites

Before we get started, make sure you have latest version of Node.js installed along with VSCode and Terminal:

Setup Project and Initialize NPM

Create a new directory for your project:

mkdir <PROJECT_NAME>
cd <PROJECT_NAME>
Enter fullscreen mode Exit fullscreen mode

Initialize NPM in it:

npm init
Enter fullscreen mode Exit fullscreen mode

NPM Init

How To Set Up ESLint

Install ESLint package from NPM as a dev-dependency

npm install eslint --save-dev
Enter fullscreen mode Exit fullscreen mode

Install ESLint

Setup an ESLint configuration file

npm init @eslint/config
Enter fullscreen mode Exit fullscreen mode

Running the command above will walk through a list of questions to set up an ESLint configuration file. Since we are mainly concerned with handling a simple static website with HTML, CSS, and JavaScript files, we will keep it simple.

ESLint should check syntax, report problems, and enforce a popular coding style

ESLint Check Syntax, Find Problems, Enforce Code Style

Let's go with JavaScript ES Modules

ESLint Check Syntax, Find Problems, Enforce Code Style

We won't be using any framework as we are building a simple static site

ESLint No Framework

No TypeScript either, but if you want to use it, select "Yes"

ESLint No TypeScript

Our code will only be executed on the browser

ESLint Runs On Browser

We will use a popular style guide to enforce a set of coding standards

ESLint Use Style Guide

We will go with Airbnb's style guide as it is a common choice for most open source projects

ESLint Use Airbnb Style Guide

Save ESLint configuration file as a JavaScript file

ESLint Format JavaScript

Since we are using Airbnb's style guide, we'll need to install a few more dependencies

ESLint Install Dependencies

That's it! Now, we should have a .eslintrc.js file created on the root of the project...

// .eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'airbnb-base',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
  },
};
Enter fullscreen mode Exit fullscreen mode

Now, let's install the ESLint extension for VSCode. This extension is crucial as it highlights potential syntactical issues on the VSCode editor as we write code.

Create a .eslintignore file to ignore linting on certain files or directories

// .eslintignore

node_modules
Enter fullscreen mode Exit fullscreen mode

We'll include node_modules in here to specifically tell ESLint to not run any linting in it as it is not part of our code.

Finally, let's setup a lint script inside package.json to check for ESLint errors from the command line

"scripts": {
  "lint": "npx eslint ./"
},
Enter fullscreen mode Exit fullscreen mode

With this setup, now we can run npm run lint to ask ESLint to spit out any potential errors it finds within our entire project directory

Alright, that's all we need for ESLint. Let's jump to Prettier!

How To Setup Prettier

First, install the Prettier package from NPM as a dev-dependency:

npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode

Setup Prettier configuration file by creating a .prettierrc.json file on the root level

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

These are just a few sane defaults I use, feel free to customize more options from this exhaustive list.

Now, install the Prettier - Code formatter extension for VSCode. Similar to the ESlint extension, this one is also super useful. Why? because it will automagically format your code as you make changes to it!

Let's set up VSCode to format our code on save:

On VSCode, go over to Settings from the bottom left corner

VSCode Settings

Then, type in format on the search setting input (up top)

VSCode Format On Save

  • Ensure Editor: Default Formatter => Prettier - Code formatter
  • Ensure Editor: Format On Paste checkbox is checked
  • Ensure Editor: Format On Save checkbox is checked

We can also setup a .prettierignore file to ignore auto formatting on certain files or directories

// .prettierignore

node_modules
Enter fullscreen mode Exit fullscreen mode

Finally, let's set up a format script inside package.json to auto-format all of our project files from the command line:

"scripts": {
  "format": "npx prettier --write ."
},
Enter fullscreen mode Exit fullscreen mode

With this setup, now we can run npm run format to instruct Prettier to auto-format all the files within our entire project directory.

Important!
Let's pause for a bit... our Prettier configuration is now all set and should be working, but there is a hidden problem. ESLint comes with a few default formatting rules out of the box that may collide with Prettier formatting rules. So, to get around it, we need to override those specific ESLint rules in favor of Prettier because Prettier deals with all formatting rules.

Let's go ahead and implement the prettier override...

Install the eslint-config-prettier package from NPM,

npm install eslint-config-prettier --save-dev
Enter fullscreen mode Exit fullscreen mode

This package disabled all ESLint rules that overlap with Prettier, so to enable the prettier rules, add "prettier" to the end of the extends array inside .eslintrc.js file...

extends: ['airbnb-base', 'prettier'],
Enter fullscreen mode Exit fullscreen mode

Now, we should be all good! Prettier should work together with ESLint to enforce coding standards and formatting rules at the same time.

EditorConfig

While Prettier mostly takes care of code formatting, EditorConfig can enforce additional restrictions on a developer's editor. In some cases, Prettier can also use EditorConfig configurations to auto-format our code as well if, (1) .prettierrc file is not provided and (2) the Prettier VSCode extension is already installed.

Let's create a .editorconfig file on the root level of our project:

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = tab
indent_size = 2
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false
Enter fullscreen mode Exit fullscreen mode

For additional configuration, feel free to use the exhaustive list

Auto Lint and Format On Commit with Husky

Husky is a great tool that enables us to integrate certain actions on Git hooks. This can come in handy for us when it comes to linting and formatting our code. As developers, we try to automate most of our repeated actions as much as possible. Here, we'll try to auto-lint and format our code on commits.

First, install husky from NPM as a dev-dependency:

npm install husky --save-dev
Enter fullscreen mode Exit fullscreen mode

Let's also initialize git inside ou project as well:

git init
Enter fullscreen mode Exit fullscreen mode

Then, run:

npx husky install
Enter fullscreen mode Exit fullscreen mode

After that, add a commit hook:

npx husky add .husky/pre-commit "npm run lint && npm run format && git add ."
git add .husky/pre-commit
Enter fullscreen mode Exit fullscreen mode

Now, whenever you commit any changes, it will first run npm run lint and npm run format as a pre-commit action. This will ensure that all your code is linted and formatted before it is committed to source control.

Before I leave, a few things…

  • 📑 bookmark this page in case you want to refer back to it later on
  • 👍 share this article with your peers or anyone who might need help setting up ESLint, Prettier, and EditorConfig
  • 💌 if I got anything wrong in this article, please leave a kind feedback

Resources:

Top comments (0)

Read next

8carroll profile image

Data Security and Cryptography on AWS

Brandon Carroll -

dbillion profile image

The Roadmap to Learning Java: A Beginner’s Guide

Oludayo Adeoye -

oarabiledev profile image

Expo Is The Peep Squeak To DroidScript.

Oarabile Koore -

krivanek06 profile image

Angular Clickable Component

Eduard Krivanek -