Skip to content

Editor and tools

Modern code editors can not only speed up the development process but also provide you with an extensive set of tools that reduce the number of steps you need to take in order to accomplish certain tasks.

Choosing your code editor is really a matter of personal preference – there’s no ‘one size fits all’ type of answer here. I personally reccommend Visual Studio Code, but you may use what ever editor you prefer.

Visual Studio Code

Visual Studio Code is a free, open-source and cross-platform code editor developed by Microsoft. Visual Studio Code is one of the most popular code editors being used.

It features a comprehensive suite of editing and debugging tools, lightweight integration with other services and it’s also very extensible.

Additionally, VS Code features a solid Git Integration, powerful Intelisense, syntax highlighting for some of the most popular languages and many more awesome features.

If that’s not enough, you can easily enhance and customize VS Code using an extensive collection of available plugins provided by Microsoft or created by the community.

Download a version for your operating system here from: https://code.visualstudio.com/

!Visual Studio code and vetur

Vetur Extension

Vetur provides vue tooling for VS Code.

When you open up the editor, you’ll notice a set of five icons in a toolbar on the left-hand side of the window. If you click the bottom of these icons (the square one), a search bar will open up that enables you to search the VS Code Marketplace.

Type “Vetur” into the search box and select the package authored by Pine Wu. Then hit Install.

Vetur gives you a number of features:

  • syntax highlighting
  • snippets
  • Emmet
  • linting/error checking
  • formatting
  • auto completion
  • debugging

ESLint extension

The vue-cli will show us errors when we try and run our vue app. Wouldn’t it’d be nicer if we could see them in our editor, too? Well, luckily we can.

In Visual Studio Code, click the extensions icon and type in “ESLint” (without the quotes). The top result should be for a package named ESLint by Dirk Baeumer. Install that and restart VS Code.

Depending on you VS Code version you might need to edit your VS Code preferences. Go to File > Preferences > Settings and edit the User Settings file and add the following configuration:

"eslint.validate": [
  "vue"
]

This will tell the ESLint plugin we just installed to perform validation for .vue files.

Vue Devtools

When using Vue, it is recommend to also install the Vue Devtools in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface.

You can find the download links for different browsers from: https://github.com/vuejs/vue-devtools#vue-devtools