JetBrains provides a lot of wonderful IDE solutions for most of the programming languages. WebStorm is one of the JetBrains products and it is also one of the best-known IDEs for web development. It provides a lot of flexibility and useful tools for developers. There are many plugins that can be used in WebStorm. It makes the process of development much easier. Developing a Vue js project with WebStorm saves you some time. But of course, if you are experienced, you might work fast enough with a text editor and CLI.
Probably the best thing about any IDE is that it lets you to use back-end and front-end frameworks very easily. You can see all your files in the same place and you can run your project in a matter of button (or command).
Because WebStorm is an integrated development environment that focuses on programming with JavaScript technologies it is, not a surprise that WebStorm supports Vue.js.
Let’s see how to use Vue js in WebStorm.
Creating a simple Vue js project in WebStorm
Let’s start by launching WebStorm. If you just had installed WebStorm, you will probably see a dashboard with different options – Create New Project, Open and Check out from Version Control.
If that is not the first time you are using WebStorm, just go to File -> New -> Project to get a new project configuration window opened.
There are some prerequisites before we can create a Vue project:
- Node.js installed on your machine
- NPM (well, obviously if you want to install Vue CLI)
- Vue CLI
As I already mentioned in my introduction to Vue article, IDE will not install this for you. After a clean installation of the WebStorm, you will still have to download and install Node, npm, and Vue CLI manually.
You can get Node js and npm from the official website. And you can install CLI with this command:
npm install -g @vue/cli
If you are using WebStorm on Linux, this is how everything should look like when you have all the mentioned prerequisites installed. The picture below shows where are the Node and CLI installed. These are the default Node and CLI module locations on Linux:
After you had installed prerequisites on Windows, the locations of it should look something like this:
There is a Project template selection, the best idea is to set it as a webpack. In case you are not familiar with Webpack – it is a module bundler. An unsophisticated explanation is that Webpack generates a file where you define project rules, plugins, dependencies.
After you had set Node interpreter and Vue CLI, click next and you will need to select a preset. Because of this, we can see that it’s Vue CLI turn to shine because you get asked to pick a preset. And if you are familiar with Vue CLI, you know that you get this asked when running vue create command. Just leave it as it is now – “default (babel, eslint)”, and click Next. After a moment your project will be created.
How good is this IDE for Vue applications development?
Overall, WebStorm provides many handy features for Vue development, such as:
- Built-in debugger
- Code completion
- Unused code detection
- Git/Github support
- Support for Vue libraries
- … and many more.
Probably the biggest drawback might be the price of WebStorm. Even though you can try it for 30 days, if you want to use WebStorm further, you need to pay for the subscription.
If you are serious about web development with JavaScript-based technologies, you might want to consider buying WebStorm. However, if you are just starting programming, the better approach is to do everything manually – create a project with CLI, serve it, etc. This way you will get hands-on experience and will understand how everything works.
JetBrains provides its product for free if you are a student. Check if you are eligible for this.
If you are professional, WebStorm is an irreplaceable (or hardly replaceable) tool that makes your life a lot easier. Is it necessary to have WebStorm if you want to be a good Vue js developer? Probably not. But it saves you some time. If you can access one of the best IDEs for the web development, consider creating your next Vue js project with WebStorm