Visual Studio Code Vue

Posted on  by admin

This extension provides language grammar and syntax highlight for .vue files. The language grammar included in this extension provides precise information forVue HTML syntax (template DSL).

Following are some examples of syntax highlight. Use vue as language on fenced code blockfor embedding Vue SFC in markdown. Use vue-html as language on fenced code blockfor embedding Vue template DSL in markdown.

This extension provides detailed token and scope information which can beused to create better VS Code themes. Find more details on project wiki.

Have a question, or want to provide feedback?

Linting

Use repository discussions to ask questions, share bugs or feedback, or chat with other users in the Preview.

The VueDX team will respond as often as possible, but we also welcome you to share your experiences and help others in the community.

This extension is part of VueDX project, maintained by Rahul Kadyan.

You can 💖 sponsor him for continued development of this extension and other VueDX tools.

What is Vue.JS

Made with 💚 for Vue Developers.— Rahul Kadyan (znck0). 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.

We'll be using the Vue CLI for this tutorial. If you are new to the Vue.js framework, you can find great documentation and tutorials on the vuejs.org website.

To install and use the Vue CLI as well as run the Vue application server, you'll need the Node.js JavaScript runtime and npm (the Node.js package manager) installed.

npm is included with Node.js which you can install from Node.js downloads. Tip: To test that you have Node.js and npm correctly installed on your machine, you can type node --version and npm --version.

Hello World!

To install the vue/cli , in a terminal or command prompt type:. This may take a few minutes to install.

You can now create a new Vue.js application by typing:. where my-app is the name of the folder for your application.

[Vue VSCode Snippets] focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly.Source

You will be prompted to select a preset and you can keep the default (babel, eslint), which will use Babel to transpile the JavaScript to browser compatible ES5 and install the ESLint linter to detect coding errors.

Vetur extension

It may take a few minutes to create the Vue application and install its dependencies. Let's quickly run our Vue application by navigating to the new folder and typing npm run serve to start the web server and open the application in a browser:.

You should see "Welcome to your Vue.js App" on http://localhost:8080 in your browser. You can press Ctrl+C to stop the vue-cli-service server. To open your Vue application in VS Code, from a terminal (or command prompt), navigate to the my-app folder and type code .:.

VS Code will launch and display your Vue application in the File Explorer. Now expand the src folder and select the App.vue file.

Vue.JS vs other libraries

You'll notice that VS Code doesn't show any syntax highlighting and it treats the file as Plain Text as you can see in the lower right Status Bar.

You'll also see a notification recommending the Vetur extension for the .vue file type. The Vetur extension supplies Vue.js language features (syntax highlighting, IntelliSense, snippets, formatting) to VS Code.

From the notification, press Install to download and install the Vetur extension. You should see the Vetur extension Installing in the Extensions view.

Once the installation is complete (may take several minutes), the Install button will change to the Manage gear button.

Support

Now you should see that .vue is a recognized file type for the Vue language and you have language features such as syntax highlighting, bracket matching, and hover descriptions.

As you start typing in App.vue, you'll see smart suggestions or completions both for HTML and CSS but also for Vue.js specific items like declarations (v-bind, v-for) in the Vue template section:.

and Vue properties (methods, computed) in the scripts section:. VS Code through the Vue extension language service can also provide type definition information in the editor through Go to Definition (F12) or Peek Definition (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)).

Debugging

Put the cursor over the App, right click and select Peek Definition. A Peek window will open showing the App definition from App.js.

Press Escape to close the Peek window. Let's update the sample application to "Hello World!" In App.vue replace the HelloWorld component msg custom attribute text with "Hello World!"

How to get help

Once you save the App.vue file (⌘S (Windows, Linux Ctrl+S)), restart the server with npm run serve and you'll see "Hello World!"

Leave the server running while we go on to learn about Vue.js client side debugging. Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check the Auto Save option in the File menu to turn on Auto Save or directly configure the files.autoSave user setting.

Linters analyze your source code and can warn you about potential problems before you run your application.