VSCode Extensions
Topics covered in this tutorial:
ScandiPWA Recommended Extensions
Better Comments Extension - lets you highlight comments in your code using different colors. This is handy to use for setting priorities and really highlighting something.
Code Spell Checker - corrects your code’s grammar so you can write error-free. Works well with camelCase.
Debugger For Chrome - lets you debug JavaScript code in the Google Chrome browser. Read more about debugging ScandiPWA in Chrome here.
GitLens - allows you to quickly see why, when and by whom a line of code was changed. Harness the power of
git
in VSCode.GitHub Pull Requests and Issues - handy if you work in a large team and need to handle multiple pull requests and issues.
ScandiPWA Development Toolkit - lets you simplify work with ScandiPWA internals by providing you with code snippets and command presets.
stylelint - helps you avoid errors and stick to conventions in your styles. Used on CSS, SCSS and Less files.
Trailing Spaces - highlights trailing spaces and lets you delete them instantly, unlike ESLint which only tells you about some space being there, without tracking it down.
ScandiPWA VSCode Extension Set-Up
Download this extension either from VisualStudio marketplace or GitHub.
If you’re installing from VisualStudio marketplace launch VisualStudio Code and press ctrl + P
, this will open the VSCode Quick Open. Paste in the following command and press enter.
ext install ScandiPWA.scandipwa-development-toolkit
If you’re installing from GitHub, clone the scandipwa-development-toolkit
repo. Decide where you want to clone and change your directory. Clone the repo with the following command:
git clone https://github.com/scandipwa/scandipwa-development-toolkit.git
Now go to the ScandiPWA Developer Tools folder:
cd scandipwa-development-toolkit-2.0
If you open this folder in VSCode, you’ll see the README file which contains the requirements for the usage of this extension, as well as some tips.
Requirements:
NodeJS v10 or higher + npm v6.8 or higher
VSCode v1.45 or higher
You can check what version each of these programs has by typing:
node -v # NodeJS version
npm -v # Node Package Manager version
code -v # VSCode version
Set-Up Command Overview
Overview of commands that need to be executed while scandipwa-development-toolkit-2.0
directory is open in VSCode:
ctrl + shift +
`npm ci
npm i -g vsce
vsce package
ctrl + p
and type> Install from VSIX
Select
scandipwa-development-toolkit-1.0.1.vsix
If you already have the scandipwa-development-toolkit-2.0
folder open in VSCode, you can press ctrl + shift +
` or go to ‘Terminal’ -> ‘Open New Terminal’.
You can run pwd
in the terminal to make sure that you’re in the right directory. If the output is /<your>/<path>/scandipwa-development-toolkit-2.0
, you’re in the right place and you can run:
npm ci
This will install node modules. npm ci
will look into the package-lock.json
file for any specific modules needed.
Next, install vsce
which is the official VSCode extension packaging tool. The flag -g
means that the installation will be global.
npm i -g vsce
The following command will generate a .vsix
file, which essentially is the extension, which then can be installed.
vsce package
After this launch VSCode Quick Open by hitting ctrl + p
on your keyboard and type in the search bar > install from VSIX
, which will then open the scandipwa-development-toolkit-2.0
folder, where the scandipwa-development-toolkit-1.0.1.vsix
file should be.
Reload VSCode and the extension should become available. Press ctrl + p
and type > ScandiPWA
you should be able to preview all of the presets.
At the moment, ScandiPWA Developer Tools extension is very specific about the file structure that it needs to acces, so if you select any of the presets while in the wrong directory, you’ll see an error:
ScandiPWA directory is not recognized!
Working With ScandiPWA Developer Tools
Ultimately you need to open your theme folder. Go to ./../../../../vendor/scandipwa/source/
and open it in VSCode.
It is recommended to add this as an additional workspace. You can do this by clicking ‘File’ -> ‘Add Folder To Workspace’.
In order to make the extension work, we also need to make an app
folder inside pwa/src
. So, the finished structure would look like this:
📂pwa
┣ 📂Magento_Theme
┣ 📂...
┣ 📂src
┃ ┣ 📂app # this is the folder we need to add
┃ ┣ 📂config
┗ ┗ 📂public
Now we can try out the extension. This is a list of the available commands:
Prefix
Template
exdf
Default export declaration for IndexJS
comp
Creates new ScandiPWA component
ecomp
Extends Source ScandiPWA component
cont
Creates new ScandiPWA container class
econt
Extends Source ScandiPWA container class
con
Connects component to redux
mstp
Declares mapStateToProps
mdtp
Declared mapDispatchToProps
qc
Creates new ScandiPWA query
eqc
Extends ScandiPWA Source query
eroute
Extends ScandiPWA Source Route component
ecroute
Extends ScandiPWA Source Route container
crd
Creates reducer
erd
Extends ScandiPWA reducer
cdisp
Creates new ScandiPWA dispatcher
edisp
Extends ScandiPWA dispatcher
We recommend to check out the Extend source component
command first. Find this by pressing ctrl + p
and writing >extend source component
.
Select ScandiPWA: Extend source component
and you should see a list of extendable components.
We can look at a quick example. Select the Breadcrumbs
component and follow through with the prompts. This will create a new component in the newly created app
folder.
📂pwa
┣ 📂Magento_Theme
┣ 📂...
┣ 📂src
┃ ┣ 📂app # this is the folder we added
┃ ┃ ┗ 📂component
┃ ┃ ┗📜Breadcrumbs.component.js # this is the new component
┃ ┣ 📂config
┗ ┗ 📂public
Open Breadcrumbs.component.js
and start implementing your new component! Nonspecifically the file should look like this:
import <source> from <path>
export class <class-name> extends <source>{
// Override original methods
}
export default class <class-name> extends PureComponent {
More specifically our export
would look like this:
export class Breadcrumbs extends SourceBreadcrumbs{
// Override original methods
}
We can click on the SourceBreadcrumbs
link in VSCode and it’ll take us to the original class, in this case, the original Breadcrumbs.component.js
file. This is where we can see what we can extend.
To learn more about how to extend ScandiPWA take a look at our Extension doc.
Last updated