Visual Studio Code Vuejs Example

Visual Studio Code is a lightweight but powerful & fast cross platform source code editor. Although It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP, Go) and runtimes (such as .NET and Unity).

The example above has a great workflow. However, there is an alternative option where you can use the native debugger statement directly in your code. If you choose to work this way, it’s important that you remember to remove the statements when you’re done. Welcome to the Vue.js Series. In this blog series, we are going to go through a detailed example of how to use Vue.js to create a fully functional client application that consumes the.NET Core 2.0 Web API server.NET Core Web API Section. If you want to learn how to create the server part of this series please visit ASP.NET Core 3.1 Web API. Vue.js is a popular JavaScript library for building web application user interfaces and Visual Studio Code has built-in support for the Vue.js building blocks of HTML, CSS, and JavaScript. For a richer Vue.js development environment, you can install the Vetur extension which supports Vue.js IntelliSense, code snippets, formatting, and more.

In this post I will explain how to get best possible development experience for VueJs using VSCode using available extensions and configuration options.

Install Vue.js Extension Pack from the VSCode Market Place, which will automaticaly install all the required extensions.

Open VSCode and search for Vue.js Extension Pack in the extension store. Click install, wait for all the dependdies to finish install and then Restart VSCode.

Setup ESLint

ESLint is a configurable linter tool for identifying and reporting on patterns in JavaScript and HTML/VUE files.

Visual Studio Code Vuejs Example

ESLint Installation

Visual studio code vue js example free

Add these to dev dependies of your project package.json.

Visual Studio Code Vuejs Example

This will install ESLint and required ESLint plugins to enable linting support. You can also install these packages globallay using npm install -g pakcage_name

Configure ESLint

Now we need to configure ESLint to enable linting support for .vue files. There are two necessary steps to do this:

Visual studio code vue js example key

VSCode user settings

Open user settings from the menu (Ctrl + , to open) and add the following settings.

Visual Studio Code Vue Js Example Java

Adding .eslintrc.json (in root of the project folder)

Visual Studio Code Vuejs Example

Now we need to add a rule configuration file for the ESLint in our project. This can be either done manualy, but recomended to use command line in VSCode. Press CTRL + Shift + p to open command panel in VSCode, search eslint and select Create .eslintrc.json File in the list.

Make changes to .eslintrc.json file to enable vue eslint plugin make it look like this:

Visual Studio Code Vue Js Example Key

What’s next

Now you are ready to devlop using VueJs with best support from VSCode for Code Format, Intellisense, Snippets, Tag Editing and Linting support.