Webstorm Settings

Vue Plugin

Webstorm comes bundled with a Vue plugin bundled. Presence of the Vue NPM package within your package.json automatically activates this plugin.

Prettier

In order to maintain code consistency throughout our code base, we enforce coding standards through ESLint and Prettier.

Webstorm comes with a Prettier plugin bundled. We have to add a file watcher so that our files are automatically formatted upon saving.

Preferences > Tools > File Watchers

Click the plus sign and select Prettier. Default settings should be fine. Click ok.

Do this once for javascript files and once for vue template files.

Semicolons

In line with Vue coding standards, we do not use semicolons in our code. Pretter and ESLint are configured to remove them. Webstorm has a default inspection that contradicts these code standards. We need to disable this:

Preferences > Editor > Code Style > Inspections > Javascript > Code Style Issues > Unterminated statement

HTML Code Style

Change the default indentation to 2:

Preferences > Editor > Code Style > HTML > Tabs and Indents

Do not indent children of <script> and <style> tags:

Preferences > Editor > Code Style > HTML > Tabs and Indents > Do not indent children of:

Click the plus and add script and style.

CSS/SCSS Code Style

Change the default indentation to 2:

Preferences > Editor > Code Style > Style Sheets > CSS > Tabs and Indents
Preferences > Editor > Code Style > Style Sheets > SCSS > Tabs and Indents

Javascript Code Style

Change the default indentation to 2:

Preferences > Editor > Code Style > Javascript > Tabs and Indents

In the Punctuation tab select Don't use semicolon to terminate statements always. Use single quotes always Trailing comma Remove

Import aliases

Vue CLI does not use a webpack.config file in the project root. This file is generated. A resolved version of this can be found at <PROJECT DIR>/node_modules/@vue/cli-service/webpack.config.js. We need to point webstorm at this file in order to resolve import aliases (e.g. import SomeComponent from '@component/SomeComponent').

Preferences > Languages & Frameworks > Javascript > Webpack

File template

Whenever we create a new Vue Single File Component (SFC), a template is automatically scaffolded for us. We need to adjust the template to adhere to recommended Vue standards.

Preferences > Editor > File and Code Templates > Vue Single File Component

Paste the following template:

<template>
  <div></div>
</template>

<script>
export default {}
</script>

<style scoped></style>

Note the extra linebreak at the end.

Live coding templates

We need to adjust the live coding templates for code snippets, since the default snippets do not adhere to the recommended Vue standards.

vbase

Preferences > Editor > Live Templates > Vue > vbase

In the template text, copy the following template:

<template>
  <div></div>
</template>

<script>
export default {}
</script>

<style scoped></style>

Note the extra linebreak at the end.

vimport-export

Preferences > Editor > Live Templates > Vue > vimport-export

In the template text, copy the following template:

import $Name$ from '@/components/$Name$.vue';

export default {
 components: {
  $Name$
 },
}