Configuring workspace monorepo to use prettier and eslint with typescript

#eslint #prettier #monorepo #yarn

What will be done?

We’ll learn how to configurate a yarn workspace monorepo to use prettier and eslint with typescript in our projects. A Monorepo project provides to you a global configuration that facilitates scalability, and prevent duplicate libraries installed. In addition to facilitating the maintenance and organization of the code.

Creating a monorepo

Start by creating a folder where your project will be located, and initializing yarn:

mkdir my-monorepo-project
cd my-monorepo-project
yarn init -y

Also, this project will have two sides, backend and fronted. So, i'll create two folders, cli and api:

mkdir cli
mkdir api

Now, in package.json add two configuration to use a monorepo. The private define if our parent path will be published, and workspaces define our paths.

"workspaces": [
    "cli",
    "api"
  ],
"private": true,

Installing prettier and eslint

Now, install prettier and eslint in all the workspaces with:

yarn add -D prettier eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

With it installed, create two configurate files, .prettierrc and .eslintrc:

//.prettierrc
{
  "semi": false,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "arrowParens": "avoid"
}

//.eslintrc
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parserOptions": { "ecmaVersion": 2018, "sourceType": "module" },
  "rules": {
    "no-unused-vars": "off"
  }
}