Early Access Program

WebStorm 2017.1 EAP, 171.3224: completion for Vue components, improved integration with ESLint

A new Early Access Preview build for WebStorm 2017.1 (171.3224) is now available! You can download it here and install it side-by-side with your current stable WebStorm version, or if you have the previous EAP build from the last week, you should soon get a notification in the IDE about a patch update.

Completion and navigation for Vue components

WebStorm now provides code completion for Vue components inside the template tag.
Cmd-click (or Ctrl-click on Windows and Linux) on the component name to jump to its definition.


Improved integration with ESLint

We’ve updated our integration with ESLint: now the IDE now communicates with ESLint as with a language service. We hope you’ll notice some performance improvements when working with ESLint.

Wrap variable declaration with single var

With a new code style option you can configure whether you’d like to keep long variable declarations with single var (or let, or const) on one line or on multiple lines.


This option is available under Preferences | Editor | Code Style – JavaScript or TypeScript – Wrapping and Braces – Variable declarations.

You can find the full list of issues addressed in this EAP build in the Release notes.

Learn more about other new features in WebStorm 2017.1:

  • WebStorm 2017.1 EAP, 171.1834: Run Mocha tests with the gutter icon; The test status is now shown right next to the test; Integration with the Angular language service; Linters are now detected and enabled by default for the new projects; Support for emoji in the editor; Zero-latency typing is now enabled by default.
  • WebStorm 2017.1 EAP, 171.2014: New intentions that convert forEach and for..in iterations over arrays to for..of; Code style options for quotes and ternary operators; New inspection Equality operator may cause type coercion.
  • WebStorm 2017.1 EAP, 171.2271: Standard code style; Completion in package.json.
  • WebStorm 2017.1 EAP, 171.2455: Improved integration with TSLint; Code style options for the use of semicolons in JavaScript and TypeScript.
  • WebStorm 2017.1 EAP, 171.2822: Initial support for Vue;  Code style options for trailing commas in JavaScript and TypeScript; Improvements in Dart support.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Your WebStorm Team

Comments below can no longer be edited.

10 Responses to WebStorm 2017.1 EAP, 171.3224: completion for Vue components, improved integration with ESLint

  1. Avatar

    serg says:

    February 17, 2017

    I have a problem with Resolve conflicts dialog. Generally all >> and << links are gone. It's not usable anymore!

    See screenshots

    • Avatar

      Dennis Ushakov says:

      February 19, 2017

      Thank you for reporting WEB-25509, we’ll take a look at this problem

  2. Avatar

    Arend says:

    July 7, 2017

    In my regular javascript.js files I have the context menu option: “Fix ESLint problems” however this context menu option is not available in .vue files. Even though I get ESLint warnings and errors just fine in .vue files. Also hitting Alt+Enter on the warning pops up the dialog and allows me to select a fix.

    (Webstorm 2017.1.4)

  3. Avatar

    Gregory says:

    December 23, 2018


    I use Vue with TypeScript and I separate my template files from components, so each template (which has a .vue extension) has a tag which points on TS component file.

    I’ve created a custom component and I want to use it in my template; I’ve imported it in @Component() decorator in my TS file, started to type its name in a template, got a correct autocompletion hint, chose it and…BOOM! autocomplete removed the link to my component file from the template script tag, and instead put there some TS code that it thinks should be there (including imports, @Component() decorator, class declaration etc). What should I do to stop this behavior?

    • Avatar

      lena_spb says:

      December 24, 2018

      Hi Gregory,

      can’t recreate.
      My App.vue:

      <div id="app">
      <img src="./assets/logo.png" alt="">
      <script lang="ts" src="./App.vue.ts"></script>

      import {Component, Vue} from 'vue-property-decorator';
      components: {
      export default class App extends Vue {

      When I start typing <Hello in App.vue, component is completed, but no additional code is added to the <script> section.
      Note that HelloWorld component is also defined in .ts file referenced from HelloWorld.vue.

      Please can you record a screencast that shows up the issue?

  4. Avatar

    Gregory says:

    December 24, 2018

    No problem. Where do you want me to send it? (264kb)

    • Avatar

      lena_spb says:

      December 24, 2018

      You can upload it to some file server and provide a link here. For example, you can put it on our ftp server (ftp://ftp.intellij.net/.uploads/ – anonymous login, .uploads directory has no permissions to list/download files, only for upload)

      • Avatar

        Gregory says:

        December 24, 2018

        The FTP is inaccessible (from my browser at least), so here you have a youtube link: https://youtu.be/pPLSsFm4Rk0

        • Avatar

          lena_spb says:

          December 25, 2018

          Can’t reproduce using similar steps and code:( Please can you share a sample project that shows up the issue?