- personal software technology blog

Optimizing your Editor for Vue Development

For mature frameworks such as Vue.js, it can be very beneficial to spend a little time setting up your editing tools to make development more productive.

I use two major tools for Vue.js development:

For each of these editing tools there are some tips to establish a productive environment for editing Vue files.

The goals of these tips are:

It may sound silly, but with the amount of coding a develop using Vue.js is doing, no matter which tool you use your productivity gain will be worth it if you follow the steps for your editor.

Common tips to all editors

VS Code Tips

For this course, I strongly recommend watching the video and reading the transcript for editor setup from Vue Mastery. It should take under 20 minutes.

This shows how to establish Prettier for automatic syntax changes on Save.

IntelliJ IDEA Tips

Read the summary of Vue.js plugin capabilities here to get a feel for everything IntelliJ’s Vue plugin can offer.

Install the Prettier plugin for IntelliJ.

Assuming you have set up a standard project, open IntelliJ Preferences and

ESLint Setup

Prettier Setup

This will see ESLint highlight mistakes during typing, and both work together to format and fix issues when a file is saved.