Create a Multi-Page JavaScript Boilerplate with Webpack 5, Babel, ESLint and Prettier (Part 5)

This is a continuation of Part 4.

In Part 5, we will set up ESLint and Prettier.

ESLint and Prettier

We want to enforce best practices and formatting throughout the project.

npm install --save-dev eslint-webpack-plugin eslint @babel/eslint-parser

eslint — It helps to catch error and fix errors. It is the actual linter. We will configure ESlint using .eslintrc file in project directory

eslint-wepack-plugin — It is a webpack plugin for running ESLint during webpack build process

babel/eslint-parse — It is a parser for ESLint that allows ESLint to lint JavaScript code that uses features from recent version. It helps ESLint when babel is involved in transpilation process.

Initialize eslint-webpack-plugin in webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin');

{
/*...*/
    plugins: htmlPluginEntries.concat([
        new MiniCssExtractPlugin({
            filename: '[name].css'})
        ],
        new ESLintPlugin({
            failOnError: false,
            failOnWarning: false,
            emitWarning: false,
            emitError: false,
        }),
    ),
}

Add .eslintrc file for defining ESlint configs in the project directory

touch .eslintrc

Add rules in the .eslintrc file

{
   "parser": "@babel/eslint-parser",
   "extends": ["eslint:recommended"],
   "rules": {
     "quotes": [1, "single"]
   },
   "env": {
     "browser": true,
     "node": true
   }
}

Add .eslintignore file

touch .eslintignore

We don’t want to run ESLint on /dist, node_modules and webpack.config.js file
Add this in .eslintignore file

/dist
/node_modules
webpack.config.js

Update package.json file, add lint and lint:fix in script object to run Eslint

"script: {
    "dev": "webpack serve --mode=development & webpack --mode development",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
}

We are done!

Run linter npm run lint to check ESLint errors or warnings in the code base.
Use command npm run lint:fix to fix ESLint errors that can be fixed automatically.

Configure Prettier

Prettier is used to format your code for you so that developers can get rid of the task of correcting formatting all the time.

Install prettier

npm install --save-dev prettier

Add .prettierrc file

touch .prettierrc

Add config file for prettier in the project directory

{
 "singleQuote": true,
 "bracketSpacing": true,
 "printWidth": 80,
 "tabWidth": 2,
 "semi": true,
 "trailingComma": "all"
}

Add .prettierignore file

touch .prettierignore

Add folders and files you don’t want prettier to scan for formatting

./dist
.babelrc
.eslintrc
README.md

Update package.json file, add prettier and prettier:fix command in script object to run prettier using npm

{
 "script": {
   /*...*/
   "prettier": "prettier . --check",
   "prettier:fix": "prettier . --write"
 }
}

Run prettier npm run prettier and it will check formatting issues in the project files
Run command npm run prettier:fix to fix all the formatting issues

We set up the JavaScript Multi-Page boilerplate.

Next, we’ll configure husky and github-actions.