Tools of ScandiPWA
VSCode
The tools and editors are essential. For PHP - there is a standard “PHPStorm” for React development we encourage using VSCode. This is a very popular code editor, with a powerful extension API. We even have our own to help you develop your store faster. You can check out our in-depth instructions here.
VSCode extension overview:
Better comments - the comment highlights
Code Spell Checker - write without typos
Debugger for Chrome - remote debugger for chrome
ESLint - JS code-style validator
GitLense - better Git integration
ScandiPWA VSCode snippets - ScandiPWA extension helper
stylelint - SCSS code-style validator
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 (for the next ScandiPWA version)! You can check out our dedicated doc here.
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!
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 and configure your Chrome and VSCode for remote debugging.
Chrome extensions mentioned in this video:
React Developer Tools - the component state & props inspector
Redux DevTools - 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 and install them beforehand.
The tools mentioned in the video:
GraphQL Playground - the best GraphQL schema editor
Postman - the best API explorer
Last updated