Node.js (Express) with TypeScript, Eslint, Jest, Prettier and Husky — Part 2

On this part we are going to configure ESLint, Prettier and Husky.

Part 1 can be found on dev.to: https://dev.to/ornio/node-js-express-with-typescript-eslint-jest-prettier-and-husky-part-1-1lin

ESLint

What is ESLint? ESLint is an linter for ECMAScript. Definition of a linter is:

lint, or a linter, is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

Let’s get started, easiest way to setup ESLint is by using NPX:

npx eslint --init

And answer the questions as wanted, here are my answers for this project:

• How would you like to use ESLint?
  To check syntax, find problems, and enforce code style.
• What type of modules does your project use?
  JavaScript modules (import/export)
• Which framework does your project use?
  None of these
• Does your project use TypeScript?
  Yes
• Where does your code run?
  Node
• How would you like to define a style for your project?
  Use a popular style guide
• Which style guide do you want to follow?
  Standard
• What format do you want your config file to be in?
  JSON
• Would you like to install them now with npm?
  Yes

Here is the `.eslintrc.json` file that will be generated for us:

And here are the packages that will be installed (added to your package.json file):

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard

Depending on your use case I strongly recommend to take a look on the ESLint rules (https://eslint.org/docs/rules/) and configure them based on your wishes.

Prettier

Ohh dear! Prettier is just pretty!

So what is Prettier?

Prettier is an opinionated code formatter that supports a lot of different programming languages

Let installed by:

npm install — save-dev — save-exact prettier

Then we need to do some configuration by creating a config file .prettierrc.json:

Create also (if needed) one another file, named .prettierignore to let Prettier know what files/folders not to format, in our case we will add build folder into it:

You can run Prettier manually by executing following command:

prettier --config .prettierrc.json --write src/**/*.ts

You can also combine Prettier with ESLint so your code editor will let you know on errors beforehand. Shout out if you need help with this.

Lets continue with our latest part:

Husky & pretty-quick

Husky, not the 🐶 is a tool to help you create Git hooks easily!

We will be using Husky and pretty-quick to run Prettier before each commit, lets install the packages:

npm i -D husky pretty-quick

And then we need to configure it by editing our `package.json`-file and add following Husky configuration:

And we are done, on you next commit (before), Husky will run “pretty-quick” which will then run Prettier by respecting our configuration.

pretty-quick will also respect any .editorconfig settings you may have :)

Thats all for now. Until next time happy coding :)

Source code

ornio-no/post-nodejs-express-typescript-howto

Need help?

Comment here or ping me on Twitter and I will gladly try to help you :)

Whats next?

• Testing using Jest and Supertest (Part 3)