ESLint, Prettier, and Husky

Code formatting with Eslint, Prettier, and Husky

A person fixing a wooden puzzle

As developers, we need to structure and organize our codes to look beautiful and readable, not just for our eyes but also for contributors who would go through it.
Also, people have preferences, some developers use double quotes, and others single quotes. Hence, it’s essential to maintain a pattern or style of writing codes to avoid ambiguity.
Good enough we have tools to help us do this easily, ESLint and Prettier

I will illustrate the concept of code formatting and linting using a TypeScript React Application but the methods also apply to any application. This article will clearly define the use of each package, setting up, configuration, and getting the package to function with each other.

ESLint

ESLint is a linter that supports both JavaScript and TypeScript, though there is TSLint specifically for TypeScript the recommended is ESLint. A linter is a tool that analyzes your codebase looking for problems to help you improve your codes. ESLint is a popular linting tool that runs through your codebase to enforce code quality rules checks.

To Set up ESLint

1. Install ESLint from scratch for a React Typescript App.
   N/B: If you are using Create-React-App, it comes with preinstalled ESLint so you would not need to do this.

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react —-dev
 
or
 
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react —-dev

eslint: The core ESLint linting library.
@typescript-eslint/parser: A package for parsing ESLint to lint TypeScript code.
@typescript-eslint/eslint-plugin: A plugin for setting up ESLint rules for TypeScript.
eslint-plugin-react : A plugin for setting up ESLint rules for React.

2. Create a .eslintrc.json file in your root folder with the following codes:

{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
],
"env": {
"es6": true,
"browser": true,
"jest": true,
"node": true
},
"settings": {
"react": {
"version": "detect"    
}
},
"rules": {
"@typescript-eslint/explicit-function-return-type": 0,
"@typescript-eslint/indent": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/no-var-requires": 0,
"@typescript-eslint/no-use-before-define": 0,
"@typescript-eslint/explicit-module-boundary-types": 0,
"no-console": [
2,
{
"allow": ["warn", "error"]
}
],
"@typescript-eslint/ban-ts-comment": 0,
"@typescript-eslint/no-empty-function": 0
}

parser: specifies the ESLint parser used.
extend: recommended rules and plugins that can be used with ESLint.
env : to specify global variables in the environment for ESLint to work with.
settings : the object detects the version of React to use.
rules : object stores ESLint rules for the codebase. you can find more rules here

3. Add .eslintignore to the root directory to prevent linting in certain files such as node_modules, and build folder.

//eslintignore file
build 
node_modules
coverage

Prettier

Prettier is a popular code formatting tool often used with ESLint. It re-arranges codes to make them readable.

To set up Prettier

1. To install prettier, run the code below

yarn add prettier eslint-config-prettier --dev
or
npm install prettier eslint-config-prettier --dev

prettier : The core Prettier Library.
eslint-config-prettier: A plugin to make Prettier work with ESLint and avoid conflicts in formatting.
--dev: Installs the package as a dev dependency.

2. Create a .prettierrc file to the project folder with the following codes or run echo {}> .prettierrc.jsonto create the file.

{
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always" 
}

You can add more formatting rules from the Prettier Config docs.

3. Add prettier to the .eslintrc.json config file like this

"extends": [
...
"prettier"
]

4. Create a .prettierignore file to and add the following files /folders to prevent them from formatting. Similar to the .eslintignorefile

build 
node_modules
coverage

5)Run the linter in two ways: CLI or on Save.

Run on CLI

Include the lint and format commands to the script object in the package.json file. The lint command runs through all the files with .js, .ts, and .tsx extensions and fixes all fixable errors and reports errors, while the Prettier runs through all files.

“scripts”: {
...
 "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
 "format": "prettier --write .",
}

Then run the above script on the terminal
npm run lint or yarn lint to run ESLint.
npm run format or yarn format to run Prettier.

yarn lint

yarn format

Run On Save

Automatic fixing can be done whenever a file is saved. You can set up ESLint or prettier to run every time you save your work. This setting can be done on VSCode settings. Go to File > Preferences > Settings

• For Prettier: Search for “format on save”. Check the “ format on save” option

formatting prettier on Save

• For ESLint: Search for “Code Actions On Save”. Click “Edit in settings.json” to add “source.fixAll.eslint” : true to the “editor.codeActionsOnSave”.

Formatting eslint on Save file

You can also use the Workspace settings to apply settings for all projects.

Pre-commit Hooks (Husky)

It’s a good practice to run ESLint and Prettier as a pre-commit hook. The pre-commit hook ensures that linting and formatting are completed, and the codebase is error-free before committing or pushing to Github or Continuous Integration(CI/CD).

To set pre-commit Hooks

1) We install husky and lint-staged by running the command below

npm install — save-dev husky lint-staged
or
yarn add --dev husky lint-staged

npx husky install

2) Run the command below to add husky to the script object in package.json.

npm set-script prepare "husky install"

3) Run the command below to create a .husky (pre-commit) config folder with a pre-commit file. Open the husky folder to see the pre-commit file created.

npx husky add .husky/pre-commit “npx lint-staged”

4) Add the codes below to package.json just after the devDependencies or dependencies object

"devDependencies":{
...
}
"lint-staged": {
"*.{ts,tsx,js}": "yarn lint",
"*.css": "yarn format"
}

With this, every time we run a git commit , the pre-commit hooks in the husky folder run the lint-staged script for eslint and prettier fixes. If an error is detected, the commit fails.

git commit output for pre-commit hooks using husky

Optional: Since we are using TypeScript we can also include a Type-Check on git push. The type check command will ensure that all variables are explicitly declared.
To do that, we run the command below to add the type-check script to the package.json and create a pre-push folder.

npm set-script type-check "tsc --noEmit"
npx husky add .husky/pre-push "npm run type-check"

The type-check command will run when we make a git push

Conclusion

ALRIGHT!!!!!!👏👏 That’s all ladies and gentlemen, I hope you do enjoy learning how to set up code formatting and linting for your project. Feel free to drop comments and suggestions.

Useful resources

Getting Started with ESLint
Prettier formatter
Husky documentation