ScandiPWA (deprecated)
User ManualGitHubSlack
  • ScandiPWA (deprecated)
  • React & PWA for dummies
    • Setting Up Environment and Talking Theory
    • Learning React Hands-on
    • Styling It
    • Learning ScandiPWA Way
  • START & UPGRADE
    • Linux Docker setup
    • Mac Docker setup
    • Setting up the theme with remote M2 server
    • Theme Upgrade to the latest version
    • Automated setup (BETA)
  • A TO Z OVERVIEW
    • Motivation
    • Challenges
    • File structure and UI components
    • Rewriting and Extending A Theme
  • DESCRIPTION OF CONTAINERS
    • Ngrok
  • FAQ
    • Development
    • Installation
    • Billing and license
    • Product support
    • What is PWA?
  • HOW-TO TUTORIALS - INTRODUCTORY
    • Base template
    • Connecting to the GraphQL resolver
    • Extension mechanism
    • Creating GraphQL resolver
    • Debugging and Inspecting
    • Setting Up Frontend
    • File Structure
    • Data Flow
    • Technology Stack
    • Changing environment
    • Theme Build and Configuration
    • Implementing Caching for New Caching Identities
    • Implementing a parent theme
  • HOW-TO TUTORIALS - INTERMEDIATE
    • Debugging in Chrome
    • Configuring XDebug
    • CLI in Docker
    • Postman & GraphQL Playground
    • VSCode Extensions
    • Plugins: implementing
    • Plugins: using and publishing
    • ESlint & StyleLint
    • How To Contribute
    • Migrating to a Newer Version
    • Installation on Existing Magento 2 Sever
    • BEM and Coding Standards
    • Tools of ScandiPWA
    • React Best Practices
  • FAQ
    • Untitled
Powered by GitBook
On this page
  • VSCode
  • ESLint and StyleLint - code-style validators
  • Chrome remote Debugging
  • GraphQL Playground
  1. HOW-TO TUTORIALS - INTERMEDIATE

Tools of ScandiPWA

PreviousBEM and Coding StandardsNextReact Best Practices

Last updated 4 years ago

VSCode

The tools and editors are essential. For PHP - there is a standard “PHPStorm” for React development we encourage using . This is a very popular code editor, with a powerful extension API. We even to help you develop your store faster. You can check out our in-depth instructions .

VSCode extension overview:

ESLint and StyleLint - code-style validators

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

Chrome extensions mentioned in this video:

GraphQL Playground

The tools mentioned in the video:

- the comment highlights

- write without typos

- remote debugger for chrome

- JS code-style validator

- better Git integration

- ScandiPWA extension helper

- SCSS code-style validator

- left-over spaces highlighter

Matching code-style is very important. Consistent tabulation, proper imports, everything matters! We even made (for the next ScandiPWA version)! You can check out our dedicated doc .

Configuring the remote debugging can be quite challenging. Debugging in the browser requires additional tools. Watch the tutorial video, and configure your Chrome and VSCode for remote debugging.

- the component state & props inspector

- the global state inspection tool

Knowing the GraphQL schema is important. Using reliable tools from the very beginning is crucial for fast delivery. Read our and install them beforehand.

- the best GraphQL schema editor

- the best API explorer

Better comments
Code Spell Checker
Debugger for Chrome
ESLint
GitLense
ScandiPWA VSCode snippets
stylelint
Trailing Spaces
our own ESLint plugin
here
read the doc
React Developer Tools
Redux DevTools
doc
GraphQL Playground
Postman
VSCode
have our own
here
How to use VSCode Extensions
Using ESList and StyleLint