diff --git a/docs/eslint/setup-monorepo-2.md b/docs/eslint/setup-monorepo-2.md deleted file mode 100644 index 70097926..00000000 --- a/docs/eslint/setup-monorepo-2.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -order: 90 -label: Setup a monorepo 2 -meta: - title: Configure a monorepo - ESLint -toc: - depth: 2-4 ---- - -# Setup a monorepo - -!!!warning -This monorepo setup is intended to be used with [PNPM workspaces](https://pnpm.io/workspaces). You may need a different setup for [NPM workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces) or [Yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) because by default, those package managers **hoist dependencies** rather than installing them in isolation like PNPM. -!!! - -To lint a monorepo solution (**multiple projects** per repository), [ESLint](https://eslint.org/) must be setuped to lint the files at the root of the solution (the monorepo **workspace**) and the files of every project of the monorepo. Execute the following steps to setup ESLint for a monorepo solution. - -## Setup the workspace - -### Install the packages - -Open a terminal at the root of the solution workspace (the **root** of the repository) and install the following packages: - -+++ pnpm -```bash -pnpm add -D @workleap/eslint-plugin eslint typescript @typescript-eslint/parser -``` -+++ yarn -```bash -yarn add -D @workleap/eslint-plugin eslint typescript @typescript-eslint/parser -``` -+++ npm -```bash -npm install -D @workleap/eslint-plugin eslint typescript @typescript-eslint/parser -``` -+++ - -### Configure ESLint - -First, create a configuration file named `.eslintrc.json` at the root of the solution workspace: - -``` !#8 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json -├── .eslintrc.json -``` - -Then, open the newly created file and extend the default configuration with the `monorepo-workspace` shared configurations: - -```json !#4 .eslintrc.json -{ - "$schema": "https://json.schemastore.org/eslintrc", - "root": true, - "extends": "plugin:@workleap/monorepo-workspace" -} -``` - -#### .eslintignore - -ESLint can be configured to [ignore](https://eslint.org/docs/latest/use/configure/ignore) certain files and directories while linting by specifying one or more glob patterns. - -To do so, first, create a `.eslintignore` file at the root of the solution workspace: - -``` !#9 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json -├── .eslintrc.json -├── .eslintignore -``` - -Then, open the newly created file and paste the following ignore rules: - -```bash .eslintignore -**/dist/* -node_modules -*.md -*.yml -*.yaml -``` - -### Configure indent style - -ESLint offers [built-in rules](https://eslint.org/docs/latest/rules/indent) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently. - -To guarantee a consistent indentation, we recommend using [EditorConfig](https://editorconfig.org/) on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and [VS Code](https://code.visualstudio.com/). - -First, create a `.editorconfig` file at the root of the solution workspace: - -``` !#10 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json -├── .eslintrc.json -├── .eslintignore -├── .editorconfig -``` - -Then, open the newly created file and paste the following configuration: - -```bash .editorconfig -root = true - -[*] -charset = utf-8 -end_of_line = lf -trim_trailing_whitespace = true -insert_final_newline = true -indent_style = space -indent_size = 4 - -[*.md] -trim_trailing_whitespace = false -``` - -### Add a CLI script - -At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace `package.json` file: - -``` !#7 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json <------- (this one!) -├── .eslintrc.json -├── .eslintignore -├── .editorconfig -``` - -```json package.json -{ - "lint:eslint:": "eslint . --max-warnings=1 --cache --cache-location node_modules/.cache/eslint" -} -``` - -> The script definition may vary depending of your needs and your application configuration. For example, you might want to specify specific file extensions such as `--ext .js,.ts,.tsx`. - -## Setup a project - -### Install the package - -Open a terminal at the root of the project (`packages/app` for this example) and install the following package: - -+++ pnpm -```bash -pnpm add -D @workleap/eslint-plugin -``` -+++ yarn -```bash -yarn add -D @workleap/eslint-plugin -``` -+++ npm -```bash -npm install -D @workleap/eslint-plugin -``` -+++ - -### Configure ESLint - -First, create a configuration file named `.eslintrc.json` at the root of the project: - -``` !#7 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├────── .eslintrc.json -├── package.json -├── .eslintrc.json -├── .eslintignore -├── .editorconfig -``` - -Then, open the newly created file and extend the default configuration with one of the [shared configurations](/eslint/#available-configurations) provided by `@workleap/eslint-plugin` :point_down: - -#### `web-application` - -For an application developed with TypeScript and React, use the following configuration: - -```json !#4 packages/app/.eslintrc.json -{ - "$schema": "https://json.schemastore.org/eslintrc", - "root": true, - "extends": "plugin:@workleap/web-application" -} -``` - -#### `react-library` - -For a TypeScript library developed **with** React, use the following configuration: - -```json !#4 packages/app/.eslintrc.json -{ - "$schema": "https://json.schemastore.org/eslintrc", - "root": true, - "extends": "plugin:@workleap/react-library" -} -``` - -#### `typescript-library` - -For a TypeScript library developed **without** React, use the following configuration: - -```json !#4 packages/app/.eslintrc.json -{ - "$schema": "https://json.schemastore.org/eslintrc", - "root": true, - "extends": "plugin:@workleap/typescript-library" -} -``` - -## Custom configuration - -New projects shouldn't have to customize the default configurations offered by `@workleap/eslint-plugin`. However, if you are in the process of **migrating** an existing project to use this library or encountering a challenging situation, refer to the [custom configuration](custom-configuration.md) page to understand how to override or extend the default configurations. Remember, **no locked in** :heart::v:. - -## Try it :rocket: - -To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. `var x = 0;`), then save. Open a terminal at the root of the solution and execute the [CLI script added earlier](#add-a-cli-script): - -+++ pnpm -```bash -pnpm lint:eslint -``` -+++ yarn -```bash -yarn lint:eslint -``` -+++ npm -```bash -npm run lint:eslint -``` -+++ - -The terminal should output a linting error. diff --git a/docs/eslint/setup-monorepo.md b/docs/eslint/setup-monorepo.md index dcca3c3a..ff71a2ba 100644 --- a/docs/eslint/setup-monorepo.md +++ b/docs/eslint/setup-monorepo.md @@ -3,6 +3,8 @@ order: 90 label: Setup a monorepo meta: title: Configure a monorepo - ESLint +toc: + depth: 2-4 --- # Setup a monorepo @@ -13,7 +15,9 @@ This monorepo setup is intended to be used with [PNPM workspaces](https://pnpm.i To lint a monorepo solution (**multiple projects** per repository), [ESLint](https://eslint.org/) must be setuped to lint the files at the root of the solution (the monorepo **workspace**) and the files of every project of the monorepo. Execute the following steps to setup ESLint for a monorepo solution. -## 1. Install the workspace packages +## Setup the workspace + +### Install the packages Open a terminal at the root of the solution workspace (the **root** of the repository) and install the following packages: @@ -31,7 +35,7 @@ npm install -D @workleap/eslint-plugin eslint typescript @typescript-eslint/pars ``` +++ -## 2. Configure ESLint for the workspace +### Configure ESLint First, create a configuration file named `.eslintrc.json` at the root of the solution workspace: @@ -56,7 +60,7 @@ Then, open the newly created file and extend the default configuration with the } ``` -## 3. Ignore files +#### .eslintignore ESLint can be configured to [ignore](https://eslint.org/docs/latest/use/configure/ignore) certain files and directories while linting by specifying one or more glob patterns. @@ -84,7 +88,7 @@ node_modules *.yaml ``` -## 4. Configure indent style +### Configure indent style ESLint offers [built-in rules](https://eslint.org/docs/latest/rules/indent) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently. @@ -122,7 +126,7 @@ indent_size = 4 trim_trailing_whitespace = false ``` -## 5. Add a CLI script +### Add a CLI script At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace `package.json` file: @@ -147,7 +151,9 @@ workspace > The script definition may vary depending of your needs and your application configuration. For example, you might want to specify specific file extensions such as `--ext .js,.ts,.tsx`. -## 6. Install the project package +## Setup a project + +### Install the package Open a terminal at the root of the project (`packages/app` for this example) and install the following package: @@ -165,7 +171,7 @@ npm install -D @workleap/eslint-plugin ``` +++ -## 7. Configure ESLint for the project +### Configure ESLint First, create a configuration file named `.eslintrc.json` at the root of the project: @@ -185,7 +191,7 @@ workspace Then, open the newly created file and extend the default configuration with one of the [shared configurations](/eslint/#available-configurations) provided by `@workleap/eslint-plugin` :point_down: -### web-application +#### `web-application` For an application developed with TypeScript and React, use the following configuration: @@ -197,7 +203,7 @@ For an application developed with TypeScript and React, use the following config } ``` -### react-library +#### `react-library` For a TypeScript library developed **with** React, use the following configuration: @@ -209,7 +215,7 @@ For a TypeScript library developed **with** React, use the following configurati } ``` -### typescript-library +#### `typescript-library` For a TypeScript library developed **without** React, use the following configuration: @@ -221,17 +227,13 @@ For a TypeScript library developed **without** React, use the following configur } ``` -## 8. Repeat for every project - -If you already have multiple projects in your monorepo solution, repeat the steps [6](#6-install-the-project-package) and [7](#7-configure-eslint-for-the-project) for every project. - -## 9. Customize configuration +## Custom configuration New projects shouldn't have to customize the default configurations offered by `@workleap/eslint-plugin`. However, if you are in the process of **migrating** an existing project to use this library or encountering a challenging situation, refer to the [custom configuration](custom-configuration.md) page to understand how to override or extend the default configurations. Remember, **no locked in** :heart::v:. -## 10. Try it :rocket: +## Try it :rocket: -To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. `var x = 0;`), then save. Open a terminal at the root of the solution and execute the [CLI script added earlier](#5-add-a-cli-script): +To test your new ESLint setup, open a JavaScript file, type invalid code (e.g. `var x = 0;`), then save. Open a terminal at the root of the solution and execute the [CLI script added earlier](#add-a-cli-script): +++ pnpm ```bash diff --git a/docs/stylelint/setup-monorepo-2.md b/docs/stylelint/setup-monorepo-2.md deleted file mode 100644 index 043939ab..00000000 --- a/docs/stylelint/setup-monorepo-2.md +++ /dev/null @@ -1,245 +0,0 @@ ---- -order: 90 -label: Setup a monorepo 2 -meta: - title: Setup a monorepo - Stylelint -toc: - depth: 2-4 ---- - -# Setup a monorepo - -!!!warning -This monorepo setup is intended to be used with [PNPM workspaces](https://pnpm.io/workspaces). You may need a different setup for [NPM workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces) or [Yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) because by default, those package managers hoist dependencies rather than installing them in isolation like PNPM. -!!! - -To lint a monorepo solution (**multiple projects** per repository), [Stylelint](https://stylelint.io/) must be setuped to lint the files at the root of the solution (the monorepo **workspace**) and the files of every project of the monorepo. Execute the following steps to setup Stylelint for a monorepo solution. - -## Setup the workspace - -### Install the packages - -Open a terminal at the root of the solution workspace (the **root** of the repository) and install the following packages: - -+++ pnpm -```bash -pnpm add -D @workleap/stylelint-config stylelint prettier -``` -+++ yarn -```bash -yarn add -D @workleap/stylelint-config stylelint prettier -``` -+++ npm -```bash -npm install -D @workleap/stylelint-config stylelint prettier -``` -+++ - -### Configure Stylelint - -First, create a configuration file named `.stylelintrc.json` at the root of the solution workspace: - -``` !#8 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json -├── .stylelintrc.json -``` - -Then, open the newly created file and extend the default configuration with the shared configurations provided by `@workleap/stylelint-configs`: - -```json .stylelintrc.json -{ - "$schema": "https://json.schemastore.org/stylelintrc", - "extends": "@workleap/stylelint-configs" -} -``` - -#### .stylelintignore - -Stylelint can be configured to [ignore](https://stylelint.io/user-guide/ignore-code#files-entirely) certain files and directories while linting by specifying one or more glob patterns. - -To do so, first, create an `.stylelintignore` file at the root of the solution workspace: - -``` !#9 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json -├── .stylelintrc.json -├── .stylelintignore -``` - -Then, open the newly created file and paste the following ignore rules: - -```bash .stylelintignore -**/dist/* -node_modules -``` - -#### .prettierignore - -Since we choose to [stick with ESLint for JavaScript and JSON stylistic rules](../eslint/default.md#prettier), a `.prettierignore` file must be added at the root of the solution workspace to ignore everything but CSS files. - -To do so, first, create a `.prettierignore` file at the root of the solution workspace: - -``` !#10 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json -├── .stylelintrc.json -├── .stylelintignore -├── .prettierignore -``` - -Then, open the newly created file and paste the following ignore rules: - -``` .prettierignore -* -!**/*.css -``` - -### Configure the indent style - -Prettier offers [built-in rules](https://prettier.io/docs/en/options#tab-width) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently. - -To guarantee a consistent indentation, we recommend using [EditorConfig](https://editorconfig.org/) on the consumer side. With EditorConfig, the indent style can be configured in a single file and be applied consistently across various formatting tools, including ESlint and VS Code. - -First, create a `.editorconfig` file at the root of the solution workspace: - -``` !#10 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json -├── .stylelintrc.json -├── .stylelintignore -├── .editorconfig -``` - -Then, open the newly created file and paste the following configuration: - -```bash .editorconfig -root = true - -[*] -charset = utf-8 -end_of_line = lf -trim_trailing_whitespace = true -insert_final_newline = true -indent_style = space -indent_size = 4 - -[*.md] -trim_trailing_whitespace = false -``` - -### Add a CLI script - -At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace `package.json` file: - -``` !#7 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json <------- (this one!) -├── .stylelintrc.json -├── .stylelintignore -├── .editorconfig -``` - -```json package.json -{ - "lint:stylelint:": "stylelint \"**/*.css\" --cache --cache-location node_modules/.cache/stylelint" -} -``` - -> The script definition may vary depending on your needs and your application configuration. For example, you might want to specify additional file extensions such as `"**/*.{css,scss,sass}"`. - -## Setup a project - -### Install the packages - -Open a terminal at the root of the project (`packages/app` for this example) and install the following package: - -+++ pnpm -```bash -pnpm add -D @workleap/stylelint-config -``` -+++ yarn -```bash -yarn add -D @workleap/stylelint-config -``` -+++ npm -```bash -npm install -D @workleap/stylelint-config -``` -+++ - -### Configure Stylelint - -First, create a configuration file named `.stylelintrc.json` at the root of the project: - -``` !#7 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├────── .stylelintrc.json -├── package.json -├── .stylelintrc.json -├── .stylelintignore -├── .editorconfig -``` - -Then, open the newly created file and extend the default configuration with the shared configurations provided by `@workleap/stylelint-configs`: - -```json packages/app/.stylelintrc.json -{ - "$schema": "https://json.schemastore.org/stylelintrc", - "extends": "@workleap/stylelint-configs" -} -``` - -## Custom configuration - -New projects shouldn't have to customize the default configurations offered by `@workleap/stylelint-configs`. However, if you are in the process of **migrating** an existing project to use this library or encountering a challenging situation, refer to the [custom configuration](custom-configuration.md) page to understand how to override or extend the default configurations. Remember, **no locked in** :heart::v:. - -## Try it :rocket: - -To test your new setup, open a CSS file, type invalid code (e.g. `color: #fff`), then save. Open a terminal at the root of the solution and execute the [CLI script added earlier](#add-a-cli-script): - -+++ pnpm -```bash -pnpm lint:stylelint -``` -+++ yarn -```bash -yarn lint:stylelint -``` -+++ npm -```bash -npm run lint:stylelint -``` -+++ - -The terminal should output a linting error. diff --git a/docs/stylelint/setup-monorepo.md b/docs/stylelint/setup-monorepo.md index cab26b78..af1e6353 100644 --- a/docs/stylelint/setup-monorepo.md +++ b/docs/stylelint/setup-monorepo.md @@ -3,6 +3,8 @@ order: 90 label: Setup a monorepo meta: title: Setup a monorepo - Stylelint +toc: + depth: 2-4 --- # Setup a monorepo @@ -13,7 +15,9 @@ This monorepo setup is intended to be used with [PNPM workspaces](https://pnpm.i To lint a monorepo solution (**multiple projects** per repository), [Stylelint](https://stylelint.io/) must be setuped to lint the files at the root of the solution (the monorepo **workspace**) and the files of every project of the monorepo. Execute the following steps to setup Stylelint for a monorepo solution. -## Install the workspace packages +## Setup the workspace + +### Install the packages Open a terminal at the root of the solution workspace (the **root** of the repository) and install the following packages: @@ -31,7 +35,7 @@ npm install -D @workleap/stylelint-config stylelint prettier ``` +++ -## Configure Stylelint for the workspace +### Configure Stylelint First, create a configuration file named `.stylelintrc.json` at the root of the solution workspace: @@ -55,7 +59,7 @@ Then, open the newly created file and extend the default configuration with the } ``` -## Ignore files +#### .stylelintignore Stylelint can be configured to [ignore](https://stylelint.io/user-guide/ignore-code#files-entirely) certain files and directories while linting by specifying one or more glob patterns. @@ -80,7 +84,7 @@ Then, open the newly created file and paste the following ignore rules: node_modules ``` -## Configure Prettier +#### .prettierignore Since we choose to [stick with ESLint for JavaScript and JSON stylistic rules](../eslint/default.md#prettier), a `.prettierignore` file must be added at the root of the solution workspace to ignore everything but CSS files. @@ -106,7 +110,7 @@ Then, open the newly created file and paste the following ignore rules: !**/*.css ``` -## Configure indent style +### Configure the indent style Prettier offers [built-in rules](https://prettier.io/docs/en/options#tab-width) for configuring the indentation style of a codebase. However, there's a catch: when [VS Code auto-formatting](https://code.visualstudio.com/docs/editor/codebasics#_formatting) feature is enabled, it might conflict with the configured indentation rules if they are set differently. @@ -144,7 +148,7 @@ indent_size = 4 trim_trailing_whitespace = false ``` -## Add a CLI script +### Add a CLI script At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace `package.json` file: @@ -169,7 +173,9 @@ workspace > The script definition may vary depending on your needs and your application configuration. For example, you might want to specify additional file extensions such as `"**/*.{css,scss,sass}"`. -## Install the packages for a project +## Setup a project + +### Install the packages Open a terminal at the root of the project (`packages/app` for this example) and install the following package: @@ -187,7 +193,7 @@ npm install -D @workleap/stylelint-config ``` +++ -## Configure Stylelint for the project +### Configure Stylelint First, create a configuration file named `.stylelintrc.json` at the root of the project: @@ -214,11 +220,7 @@ Then, open the newly created file and extend the default configuration with the } ``` -## Repeat for every project - -If you have multiple projects in your monorepo solution, repeat the steps [#7](#install-the-packages-for-a-project) and [#8](#configure-stylelint-for-the-project) for every project. - -## Customize configuration +## Custom configuration New projects shouldn't have to customize the default configurations offered by `@workleap/stylelint-configs`. However, if you are in the process of **migrating** an existing project to use this library or encountering a challenging situation, refer to the [custom configuration](custom-configuration.md) page to understand how to override or extend the default configurations. Remember, **no locked in** :heart::v:. diff --git a/docs/typescript/setup-monorepo-2.md b/docs/typescript/setup-monorepo-2.md deleted file mode 100644 index 87522b24..00000000 --- a/docs/typescript/setup-monorepo-2.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -order: 90 -label: Setup a monorepo 2 -meta: - title: Setup a monorepo - TypeScript -toc: - depth: 2-4 ---- - -# Setup a monorepo - -!!!warning -This monorepo setup is intended to be used with [PNPM workspaces](https://pnpm.io/workspaces). You may need a different setup for [NPM workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces) or [Yarn workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) because by default, those package managers **hoist dependencies** rather than installing them in isolation like PNPM. -!!! - -To lint a monorepo solution (**multiple projects** per repository), [TypeScript](https://www.typescriptlang.org/) must be setuped to lint the files at the root of the solution (the monorepo **workspace**) and the files of every project of the monorepo. Execute the following steps to setup TypeScript for a monorepo solution. - -## Setup the workspace - -### Install the packages - -Open a terminal at the root of the solution workspace (the **root** of the repository) and install the following packages: - -+++ pnpm -```bash -pnpm add -D @workleap/typescript-configs typescript -``` -+++ yarn -```bash -yarn add -D @workleap/typescript-configs typescript -``` -+++ npm -```bash -npm install -D @workleap/typescript-configs typescript -``` -+++ - -### Configure TypeScript - -First, create a configuration file named `tsconfig.json` at the root of the solution workspace: - -``` !#8 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json -├── tsconfig.json -``` - -Then, open the newly created file and extend the default configuration with the `monorepo-workspace` shared configurations: - -```json !#2 tsconfig.json -{ - "extends": "@workleap/typescript-configs/monorepo-workspace.json", - "exclude": ["packages", "node_modules"] -} -``` - -### Add a CLI script - -At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace `package.json` file: - -``` !#7 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├── package.json <------- (this one!) -├── tsconfig.json -``` - -```json package.json -{ - "lint:types": "pnpm -r --parallel --include-workspace-root exec tsc" -} -``` - -## Setup a project - -### Install the package - -Open a terminal at the root of the project (`packages/app` for this example) and install the following package: - -+++ pnpm -```bash -pnpm add -D @workleap/typescript-configs typescript -``` -+++ yarn -```bash -yarn add -D @workleap/typescript-configs typescript -``` -+++ npm -```bash -npm install -D @workleap/typescript-configs typescript -``` -+++ - -### Configure TypeScript - -First, create a configuration file named `tsconfig.json` at the root of the project: - -``` !#7 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├────── tsconfig.json -├── package.json -├── tsconfig.json -``` - -Then, open the newly created file and extend the default configuration with one of the [shared configurations](default.md/#available-configurations) provided by `@workleap/typescript-configs` :point_down: - -#### `web-application` - -For an applications developed with React, use the following configuration: - -```json !#2 tsconfig.json -{ - "extends": ["@workleap/typescript-configs/web-application.json"], - "exclude": ["dist", "node_modules"] -} -``` - -#### `library` - -For a library project developed with or without React, use the following configuration: - -```json !#2 tsconfig.json -{ - "extends": ["@workleap/typescript-configs/library.json"], - "exclude": ["dist", "node_modules"] -} -``` - -## Custom configuration - -New projects shouldn't have to customize most of the default configurations offered by `@workleap/typescript-configs`. However, if you are in the process of **migrating** an existing project to use this library or encountering a challenging situation, refer to the [custom configuration](custom-configuration.md) page to understand how to override or extend the default configurations. Remember, **no locked in** :heart::v:. - -### Compiler paths - -If any projects of your solution are referencing other projects of the monorepo workspace (e.g. `"@sample/components": "workspace:*"`), chances are that you'll need to define [paths](https://www.typescriptlang.org/tsconfig#compilerOptions) in their `tsconfig.json` file. - -Given the following solution: - -``` !#3,8,13 -workspace -├── packages -├──── app -├────── src -├──────── ... -├────── package.json -├────── tsconfig.json -├──── components (@sample/components) -├────── src -├──────── index.ts -├────── package.json -├────── tsconfig.json -├──── utils (@sample/utils) -├────── src -├──────── index.ts -├────── package.json -├────── tsconfig.json -├── package.json -├── tsconfig.json -``` - -If the `packages/components` project is referencing the `packages/utils` project, and the `packages/app` project is referencing the `packages/components` project, you'll need to add the following `compilerOptions.paths`: - -```json !#4-7 packages/app/tsconfig.json -{ - "extends": "@workleap/typescript-configs/web-application.json", - "compilerOptions": { - "paths": { - "@sample/components": ["../components/index.ts"], - "@sample/utils": ["../utils/index.ts"] - } - }, - "exclude": ["dist", "node_modules"] -} -``` - -```json !#4-6 packages/components/tsconfig.json -{ - "extends": "@workleap/typescript-configs/library.json", - "compilerOptions": { - "paths": { - "@sample/utils": ["../utils/index.ts"] - } - }, - "exclude": ["dist", "node_modules"] -} -``` - -## Try it :rocket: - -To test your new TypeScript setup, open a TypeScript file, type invalid code (e.g. `import { App } from "./App"`), then wait for the IDE to flag the error. Fix the error (e.g. `import { App } from "./App.tsx"`), then wait for the IDE to remove the error. diff --git a/docs/typescript/setup-monorepo.md b/docs/typescript/setup-monorepo.md index c9a6bdfb..81d77df8 100644 --- a/docs/typescript/setup-monorepo.md +++ b/docs/typescript/setup-monorepo.md @@ -3,6 +3,8 @@ order: 90 label: Setup a monorepo meta: title: Setup a monorepo - TypeScript +toc: + depth: 2-4 --- # Setup a monorepo @@ -13,7 +15,9 @@ This monorepo setup is intended to be used with [PNPM workspaces](https://pnpm.i To lint a monorepo solution (**multiple projects** per repository), [TypeScript](https://www.typescriptlang.org/) must be setuped to lint the files at the root of the solution (the monorepo **workspace**) and the files of every project of the monorepo. Execute the following steps to setup TypeScript for a monorepo solution. -## 1. Install the workspace packages +## Setup the workspace + +### Install the packages Open a terminal at the root of the solution workspace (the **root** of the repository) and install the following packages: @@ -31,7 +35,7 @@ npm install -D @workleap/typescript-configs typescript ``` +++ -## 2. Configure TypeScript for the workspace +### Configure TypeScript First, create a configuration file named `tsconfig.json` at the root of the solution workspace: @@ -55,7 +59,7 @@ Then, open the newly created file and extend the default configuration with the } ``` -## 3. Add a CLI script +### Add a CLI script At times, especially when running the CI build, it's useful to lint the entire solution using a single command. To do so, add the following script to your solution's workspace `package.json` file: @@ -76,7 +80,9 @@ workspace } ``` -## 4. Install the project package +## Setup a project + +### Install the package Open a terminal at the root of the project (`packages/app` for this example) and install the following package: @@ -94,7 +100,7 @@ npm install -D @workleap/typescript-configs typescript ``` +++ -## 5. Configure TypeScript for the project +### Configure TypeScript First, create a configuration file named `tsconfig.json` at the root of the project: @@ -112,7 +118,7 @@ workspace Then, open the newly created file and extend the default configuration with one of the [shared configurations](default.md/#available-configurations) provided by `@workleap/typescript-configs` :point_down: -### web-application +#### `web-application` For an applications developed with React, use the following configuration: @@ -123,7 +129,7 @@ For an applications developed with React, use the following configuration: } ``` -### library +#### `library` For a library project developed with or without React, use the following configuration: @@ -134,11 +140,7 @@ For a library project developed with or without React, use the following configu } ``` -## 6. Repeat for every project - -If you already have multiple projects in your monorepo solution, repeat the steps [4](#4-install-the-project-package) and [5](#5-configure-typescript-for-the-project) for every project. - -## 7. Customize configuration +## Custom configuration New projects shouldn't have to customize most of the default configurations offered by `@workleap/typescript-configs`. However, if you are in the process of **migrating** an existing project to use this library or encountering a challenging situation, refer to the [custom configuration](custom-configuration.md) page to understand how to override or extend the default configurations. Remember, **no locked in** :heart::v:. @@ -197,6 +199,6 @@ If the `packages/components` project is referencing the `packages/utils` project } ``` -## 8. Try it :rocket: +## Try it :rocket: To test your new TypeScript setup, open a TypeScript file, type invalid code (e.g. `import { App } from "./App"`), then wait for the IDE to flag the error. Fix the error (e.g. `import { App } from "./App.tsx"`), then wait for the IDE to remove the error.