# Setup a polyrepo

Execute the following steps to setup Stylelint for a polyrepo solution (single project per repository).

Open a terminal at the root of the solution and install the following packages:

pnpm add -D @workleap/stylelint-configs stylelint prettier

yarn add -D @workleap/stylelint-configs stylelint prettier

npm install -D @workleap/stylelint-configs stylelint prettier

First, create a configuration file named .stylelintrc.json at the root of the solution:

root
├── src
├──── ...
├── package.json
├── .stylelintrc.json

Then, open the newly created file and extend the default configuration with the shared configurations provided by @workleap/stylelint-configs:

{
    "$schema": "https://json.schemastore.org/stylelintrc",
    "extends": "@workleap/stylelint-configs"
}

Stylelint can be configured to ignore certain files and directories while linting by specifying one or more glob patterns.

To do so, first, create a .stylelintignore file at the root of the solution:

root
├── src
├──── ...
├── package.json
├── .stylelintrc.json
├── .stylelintignore

Then, open the newly created file and paste the following ignore rules:

**/dist/*
node_modules
storybook-static
!.storybook

Since we choose to stick with ESLint for JavaScript and JSON stylistic rules, a .prettierignore file must be added at the root of the solution to ignore everything but CSS files.

To do so, first, create a .prettierignore file at the root of the solution:

root
├── src
├──── ...
├── package.json
├── .stylelintrc.json
├── .stylelintignore
├── .prettierignore

Then, open the newly created file and paste the following ignore rules:

*
!**/*.css

Prettier offers built-in rules for configuring the indentation style of a codebase. However, there's a catch: when VS Code auto-formatting feature is enabled, it might conflict with the configured indentation rules if they are set differently.

To guarantees a consistent indentation, we recommend using EditorConfig 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 Prettier and VS Code.

First, create a .editorconfig file at the root of the solution:

root
├── src
├──── ...
├── package.json
├── .eslintrc.json
├── .eslintignore
├── .prettierignore
├── .editorconfig

Then, open the newly created file and paste the following configuration:

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

Finally, install the EditorConfig.EditorConfig VS Code extension.

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 package.json file:

{
    "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}".

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 page to understand how to override or extend the default configurations. Remember, no locked in ❤️✌️.

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:

pnpm lint:stylelint

yarn lint:stylelint

npm run lint:stylelint

The terminal should output a linting error.