WebStorm 2018.1 EAP, 181.3986: create new projects with Vue CLI

The new WebStorm 2018.1 Early Preview build (181.3986.8) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Create new project using Vue CLI in WebStorm

Now you can use Vue CLI to create new Vue projects right from WebStorm’s Welcome screen.

vue-project-wizard

vue-cli is an official tool for scaffolding Vue apps. You’ll need to install it first by running npm install --g vue-cli in the terminal. WebStorm will then use this package to create a new project.

With Vue CLI version 2, you can select one of 6 default project templates and then answer additional questions about tools like linters and test runner that can be added to the project.

Alternatively, you can use Vue CLI version 3 which is currently in beta.

Process and Debugger consoles in the Node.js debugger

When debugging a Node.js application in WebStorm, you can now see two console tabs – the Console and the new Debugger Console.

The Console shows the output of the node process itself – everything written to the process.stdout and process.stderr directly or logged using console.*.

node-console

The new Debugger Console, on the other hand, lets you do more: execute JavaScript, see the console.log messages, jump to the location where console.log was called, and use other features of the console provided by the Inspector debug protocol.

node-debug-console

Renaming default export

It’s a common pattern to use export default for a class and then import it with the same name in another file. Now, when you rename this class, WebStorm will also rename its usages with the same name (even though the import will work properly even with the old name).

rename-default-export

renamed-usages-of-defaut-export

Among other improvements:

You can find a full list of issues fixed in the WebStorm project in the Release Notes.

Please share your feedback and report issues on our tracker. Thank you!

WebStorm Team

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Early Access Preview and tagged , , . Bookmark the permalink.

13 Responses to WebStorm 2018.1 EAP, 181.3986: create new projects with Vue CLI

  1. Jozef says:

    WebStorm debug mode doesn’t hit breakpoints.

    Chrome@64
    WebStorm@2017.3.4
    vue/cli@3.0.0-beta.2
    node@8.9.4

    Thanks!

    • Ekaterina Prigara says:

      Could you please provide a bit more information on your debug configuration and where the breakpoints are. You can contact our tech support or report an issue on our tracker. Thank you!

      • Jozef says:

        Hint: A project (debugging) created with old version of vue-cli v.2 works fine.

        1. Create new project by vue/cli v.3
        – vue create my-project
        – Manualy select features [Router, Vuex, CSS Pre-processors, Unit Testing]
        – Pick a CSS pre-processor [SCSS/SASS]
        – Pick a unit testing solution [Mocha + Chai]
        – Prefer placing config [In dedicated config files]

        2. Open project
        – npm install

        3. Add new Run/Debug configuration
        – Javascript Debug [http://localhost:8080/, Chrome]

        4. npm run serve

        5. Add breakpoint & click Debug
        – In template: Click Me!
        – export default {
        methods:{
        doit(){
        console.log(‘go go go’); //STOP !?
        }
        }
        }

  2. Joseph Tam says:

    is there a step-by-step to get debug working for a vue.js project using typescript?

Leave a Reply

Your email address will not be published. Required fields are marked *