# Tools of ScandiPWA

## VSCode

The tools and editors are essential. For PHP - there is a standard “PHPStorm” for React development we encourage using [VSCode](https://code.visualstudio.com/). This is a very popular code editor, with a powerful extension API. We even [have our own](https://github.com/scandipwa/scandipwa-development-toolkit) to help you develop your store faster. You can check out our in-depth instructions [here](https://docs.scandipwa.com/how-to-tutorials-intermediate/vscode-extensions).

{% embed url="<https://youtu.be/hmzcmb611x0>" %}
How to use VSCode Extensions
{% endembed %}

VSCode extension overview:

* [Better comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) - the comment highlights
* [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - write without typos
* [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - remote debugger for chrome
* [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - JS code-style validator
* [GitLense](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - better Git integration
* [ScandiPWA VSCode snippets](https://github.com/scandipwa/scandipwa-development-toolkit) - ScandiPWA extension helper
* [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - SCSS code-style validator
* [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) - left-over spaces highlighter

## ESLint and StyleLint - code-style validators

Matching code-style is very important. Consistent tabulation, proper imports, everything matters! We even made [our own ESLint plugin](https://www.npmjs.com/package/@scandipwa/eslint-plugin-scandipwa-guidelines) (for the next ScandiPWA version)! You can check out our dedicated doc [here](https://docs.scandipwa.com/how-to-tutorials-intermediate/eslint-and-stylelint).

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

It is mandatory to install ESLint and StyleLint if you want to work with ScandiPWA! This will help a lot later, when inspecting the source code or contributing! Please do not skip this step!
{% endhint %}

{% embed url="<https://youtu.be/3nO6m4zDnqs>" %}
Using ESList and StyleLint
{% endembed %}

## Chrome remote Debugging

Configuring the remote debugging can be quite challenging. Debugging in the browser requires additional tools. Watch the tutorial video, [read the doc](https://docs.scandipwa.com/how-to-tutorials-intermediate/debugging-in-chrome) and configure your Chrome and VSCode for remote debugging.

Chrome extensions mentioned in this video:

* [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) - the component state & props inspector
* [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) - the global state inspection tool

## GraphQL Playground

Knowing the GraphQL schema is important. Using reliable tools from the very beginning is crucial for fast delivery. Read our [doc](https://docs.scandipwa.com/how-to-tutorials-intermediate/postman-and-graphql-playground) and install them beforehand.

The tools mentioned in the video:

* [GraphQL Playground](https://github.com/prisma-labs/graphql-playground) - the best GraphQL schema editor
* [Postman](https://www.postman.com/) - the best API explorer


---

# 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:

```
GET https://scandipwa.gitbook.io/docs/how-to-tutorials-intermediate/tools-of-scandipwa.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.