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.