Webstorm configuration

ESLint

Enabling linting errors/warnings in Webstorm

1. In Webstorm go to File > Settings
2. In the settings menu go to Languages & Frameworks > JavaScript > Code Quality Tools > ESLint
3. Check Enable
4. Browse the ESLint package by clicking the '...' Button
5. Locate the current project root and go to node_modules > eslint
6. Enable 'Automatic Search'
7. Close the settings window by clicking 'Apply' and then 'OK'

TSLint

Enabling linting errors/warnings in Webstorm

1. In Webstorm go to File > Settings
2. In the settings menu go to Languages & Frameworks > TypeScript > TSLint
3. Check Enable
4. Browse the TSLint package by clicking the '...' Button
5. Locate the current project root and go to node_modules > tslint
6. Enable 'Search for tslint.json'
7. Close the settings window by clicking 'Apply' and then 'OK'

Stylelint

Enabling linting errors/warnings in Webstorm

1. In Webstorm go to File > Settings
2. In the settings menu go to Languages & Frameworks > Stylesheets > Stylelint
3. Tick the enable checkbox and make sure the Node interpreter and Stylelint paths are resolved correctly.

Prettier

Prettier is used for formatting the code. You can run yarn prettify to format all your code but a better solution is to add an external tool that only format the file you are working in.

1. In Webstorm go to File > Settings
2. In the settings menu go to Tools > External Tools
3. Click the '+' to add an external tool
4. Fill in a name 'Prettify' for example
5. In Tool Settings use the following settings:
   • Program: C:\Users<your user name>\AppData\Roaming\npm\prettier.cmd (This is only avialable when Prettier is installed globally. Use npm install prettier -g to install it globally)
   • Parameters: --write --print-width 100 --tab-width 2 --single-quote --trailing-comma all $FilePathRelativeToProjectRoot$
   • Working directory: $ProjectFileDir$
6. Click OK
7. In the settings menu go to Keymap
8. In the tree structure navigate to External Tools > External Tools > <Name used in step 4>
9. Right click the item and select Add Keyboard Shortcut
10. Press the desired keyboard shortcut (Ctrl + Alt + P for example). If the shortcut is already in use remove it before assigning it to the prettify external tool.
11. Click OK
12. Close the settings window by clicking 'Apply' and then 'OK'

Trailing spaces

ESlint/TSLint doesn't like trailing spaces and developers don't like to remove trailing spaces. Luckily Webstorm has a feature that can automatically remove trailing spaces on save.

1. In Webstorm go to File > Settings
2. In the settings menu go to Editor > General
3. Select 'All' in the dropdown after 'Strip trailing spaces on Save':
4. Disable 'Always keep trailing spaces on caret line'
5. Close the settings window by clicking 'Apply' and then 'OK'

Hot Reloading Issues

It can happen that webpack doesn't compiles or automatically updates/refreshes the website when a change to a file is made. This is caused by the 'safe write' setting of Webstorm so it's best to disable 'safe write'.

1. In Webstorm go to File > Settings
2. In the settings menu go to Appearance & Behavior > System Settings
3. Disable 'Use "safe write" (save changes to a temporary file first)'
4. Close the settings window by clicking 'Apply' and then 'OK'

Live templates

Live templates are awesome and could save you a lot of time! There are a few sets available for download!

1. Download the live template configuration files
   1. Essentials.xml
   2. VueEssentials.xml
   3. VueSkeleton.xml
2. Paste the xml files in the template directory
   • OSX: users/{user}/Library/Preferences/{WebStormVersion}/templates/
   • Windows: {user}/.{WebStormVersion}/config/templates/
3. Restart WebStorm and the new templates should be active

Note: if templates are not active after restart, go to Settings > Editor > Live Templates and enable the new template groups

Essential shortcuts

Shortcut	Description
ce	Console.error
ci	Console.info
cl	Console.log
class	Create a class
interface	Create a interface
cm	Console.log method
cw	Console.warn
enum	Create enum
fn	Private function
for	For loop
method	Create a method
pfn	Create a public function
pm	Private method
prfn	Protected function
prm	Protected method
pum	Public method
qsa	QuerySelectorAll
qs	QuerySelector
qsaa	QuerySelectorAll to Array

Vue essential shortcuts

Shortcut	Description
vco	Create the computed object for a Vue component
vdo	Create the data object for a Vue component
vmo	Create the methods object for a Vue component
vpo	Create the props object for a Vue component
vwo	Create the watch object for a Vue component
:c	Add a scoped class reference
:l	Add a localized attribute

Vue skeleton shortcuts

Shortcut	Description
vsConfig	Get the config manager
vsGateway	Get the gateway