This video is available to students only

Setting up ESLint and Prettier

In this lesson we will setup ESLint and Prettier.

ESLint is a tool that scans your code for common mistakes and bad practice that may cause bugs, or just checks whether your code follows a particular style. It has lots of plugins to extend its default set of rules. Nowadays it's a standard tool for any JavaScript / TypeScript project.

Prettier is a formatting tool that automatically formats CSS, JavaScript, TypeScript, HTML, Markdown and many other files for you. It has some opinionated defaults but is partially configurable. It can be used standalone or integrated with ESLint via a plugin. We will integrate it into our ESLint pipeline because it's more convenient for daily use.

Open package.json to add all the plugins we need. We're going to use react-app config, because it's proven to catch only problems that may lead to bugs. It's built of multiple plugins and presets so we need to include them all in our package.json.

We'll also need to add the prettier plugin for eslint and config, as well as prettier itself.

Now, let's run npm install to install them.

Next we need to add the actual config for ESLint and Prettier by adding the .eslintrc.json and .prettierrc.json files.

 

Start a new discussion. All notification go to the author.