> For the complete documentation index, see [llms.txt](https://scandipwa.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://scandipwa.gitbook.io/docs/how-to-tutorials-intermediate/eslint-and-stylelint.md).

# ESlint & StyleLint

{% embed url="<https://youtu.be/3nO6m4zDnqs>" %}
Write code usign ESlint and StyleLint
{% endembed %}

## ScandiPWA Recommended Linters:

* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - linter for ECMAScript or JavaScript
* [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - linter for your styles - CSS, SCSS and Less

## Starting Out With Lint

Install and enable [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for VSCode and it’ll start to give you suggestions.

Open the `scandipwa-base/src/app/design/frontend/Scandiweb/pwa` folder.

For this extension to work, you need to install the ESLint library in your project’s folder, if it’s not there it’ll look for a global install. To install eslint run:

```bash
npm install eslint      # run this in the workspace folder
npm install -g eslint   # global install
```

Look for the `.eslintrc.sample` file. Remove the `.sample` postfix in orded to create our own ESLint configuration.

If the configuration file is not present you can press `ctrl + p` in VSCode and search for `>Create ESLint configuration` or run `eslint` in terminal.

For a global installation run `eslint --init`, for local - `./node_modules/.bin/eslint --init` for Linux and Mac.

Additionally, you can open up the terminal and run `npm run eslint` and this will scan the project for linter issues.

Run `npm run eslint -- --fix` to fix any issues, if they are found.

More of the available command presets can be seen in the `base-theme/package.json` file ‘script’ field. Some of these commands are:

```javascript
"eslint": "eslint ./src/app --ignore-pattern *.test.*",

"eslint:fix": "npm run eslint -- --fix",

"eslint:cache": "eslint ./src/app --cache --ignore-pattern *.test.*",

"stylelint": "stylelint ./src/**/*.scss",

"stylelint:fix": "npm run stylelint -- --fix",

"stylelint:cache": "stylelint --cache ./src/**/*.scss"
```

Just as with ESLint, you need to get the [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) extension and install stylelint locally in your project’s folder, or copy the `.stylelintrc` file from the `source` folder into your project’s folder.

## Linting In Practice

First you’ll need the ScandiPWA Developer Tools VSCode extension. Find out how to get started [here](https://docs.scandipwa.com/docs/vsc-extensions.html).

Press `ctrl + p` and search for `>ScandiPWA: Extend source component`.

Select `AddToCart`, skip class container and select ‘Extend them!’ which will only extend the styles. This will create and open the `AddToCart.override.style.scss` file which, at the moment, will look like this:

```javascript
.AddToCart{

}
```

This will create a stylelint pop-up that’ll say `Unexpected empty block`. If now we run in terminal `npm run stylelint:fix`, we can check if something can be fixed.

{% hint style="warning" %}
**Note:**

You can run ESLint and style lint in GitHub actions
{% endhint %}

Go to [ScandiPWA/base-theme actions](https://github.com/scandipwa/base-theme/actions) and you’ll see an ESlint workflow.

You can copy the configuration from `.github` folder, `main.yml` file and use the output commands to comment on the pull request.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://scandipwa.gitbook.io/docs/how-to-tutorials-intermediate/eslint-and-stylelint.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.