Best VS Code extensions for Nuxt/Vue Projects
Tags: nuxt, jamstack, vue, javascript
Published: 2021-05-28 08:51:17

---
canonical_url: https://www.ravsam.in/blog/best-vs-code-extensions-for-nuxt-vue-projects/
date: 2021-05-27 06:34:18 UTC
published: true
tags: nuxt,jamstack,vue,javascript
title: Best VS Code extensions for Nuxt/Vue Projects
---

#### Supercharge your Nuxt/Vue App Development by using these extensions in VS Code Editor.

> This blog was originally published on [RavSam’s blog](https://www.ravsam.in/blog/best-vs-code-extensions-for-nuxt-vue-projects/). We publish our articles on Dev after a week.

Using the right set of tools can make us a happy and better developer. Right tools reduce friction and help us develop applications faster. In this blog, we will take a look at some of the best VS Code extensions that we can use for developing Nuxt/Vue apps. These extensions help us with things like linting, formatting, debugging, and more.

#### 1. Vetur

![Vetur Extension VS Code](https://cdn-images-1.medium.com/max/1024/0*CWlf4RE8s5csF9PZ.png)

**Vetur** is the king of all extensions we need as a Vue/Nuxt Developer. It is a Vue tooling for VS Code. It comes with Vue Language Server and other features like syntax highlighting, formatting, intellisense, debugging, and more.

[Source](https://marketplace.visualstudio.com/items?itemName=octref.vetur).

#### 2. Vue Discovery

![Vue Discovery VS Code](https://cdn-images-1.medium.com/max/680/0*cFQWqDWDKhQQqb6S.gif)

**Vue Discovery** is a great plugin that adds to the powers of Vetur. This extension discovers Vue components in our workspace and provides IntelliSense for them. It provides intellisense for components in the template section, allow us to automatically import, register and expand required props, and more.

In Short: _Vue component name completion across a project_

[Source](https://marketplace.visualstudio.com/items?itemName=Maantje.vue-discovery)

#### 3. Vue Peek

![Vue Peek Extension VS Code](https://cdn-images-1.medium.com/max/747/0*K6-WXB_SywSTGYPe.gif)

**Vue Peek** allows us to go to the definition for Vue components. It allows us to look under the hood of the Vue component declarations. It allows us to quickly jump to or peek into files that are referenced as components (from template), or as module imports (from a script).

The extension supports all the normal capabilities of symbol definition tracking and does it for CSS selectors — classes and IDs — as well.

In Short: _Peek inside Vue SFCs_

[Source](https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek)

#### 4. HTML CSS Class Completion

![HTML CSS Class Completion Extension VS Code](https://cdn-images-1.medium.com/max/758/0*yCk5st__5FbNJJex.gif)

**HTML CSS Class Completion** is an amazing Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in our workspace or external files referenced through the link element. It is extremely handy while designing the UI of the application as it gives us quick access to the CSS classes available.

In Short: _CSS class completion in your HTML template_

[Source](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)

#### 5. Import Cost

![Import Cost Extension VS Code](https://cdn-images-1.medium.com/max/838/0*-WRMC5ecHkIsj-mS.gif)

As a developer, our primary concern is to make sure that the application size doesn’t go beyond a certain limit. **Import Cost** extension displays the size of the imported package inline in the editor.

It currently supports

- Default importing: import Func from ‘utils’;

- Entire content importing: import \* as Utils from ‘utils’;

- Selective importing: import {Func} from ‘utils’;

- Selective importing with alias: import {orig as alias} from ‘utils’;

- Submodule importing: import Func from ‘utils/Func’;

- Require: const Func = require(‘utils’).Func;

- Supports both Javascript and Typescript

In Short: _Tells you the size of your npm imports_

[Source](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

#### 6. Internationalization

Internationalization or **i18n** allows us to write our application text in different languages for different regions.

![i18n Extension VS Code](https://cdn-images-1.medium.com/max/1024/0*RTsR9wTD5U54CHZd.gif)

i18n supports multi-root workspaces, remote development, many popular frameworks, linked locale messages, and eliminates the need to use JSON files for i18n as is done traditionally.

In Short: _i18n toolset for multilingual support, works great with vue-i18n_

[Source](https://marketplace.visualstudio.com/items?itemName=Lokalise.i18n-ally)

#### 7. Path Intellisense

![Path IntelliSense Extension VS Code](https://cdn-images-1.medium.com/max/480/0*FpND-pOVR12Nt4NQ.gif)

One of the VS Code extension that we use at RavSam is **Path Intellisense**. It provides autocompletion for file paths present in your current VS Code workspace.

In Short: _File path completion_

[Source](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

#### 8. SVGO

![SVGO Extenstion VS Code - 1](https://cdn-images-1.medium.com/max/640/0*mRkd2i3KZxb7TKV1.png)

**SVGO** Extension for Visual Studio Code is built on the top of [SVGO NPM module](https://github.com/svg/svgo). It allows us to minify and prettify the SVG file in place.

In Short: _Minimize SVG files in two keystrokes_

[Source](https://marketplace.visualstudio.com/items?itemName=1000ch.svgo)

#### Connect with Me

I love writing for the community while working on my freelance and open source projects. Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) • [Email](mailto:ravgeetdhillon@gmail.com).

#### About RavSam Web Solutions

We are helping companies and startups to set up Web and Mobile Apps powered by modern JAMstack architecture. Reach out to us to know more about our services, pricing, or anything else. We are always looking forward to work on great ideas. If you are looking for [an application development company](https://www.ravsam.in/), you are most welcome to get in touch with us.

#### You might also enjoy reading

- [Offline Toast notification in Nuxt/Vue app](https://www.ravsam.in/blog/offline-toast-notification-in-nuxt-vue-app/)

- [Disable Submit button if Form fields have not changed in a Nuxt/Vue app](https://www.ravsam.in/blog/disable-submit-button-if-form-fields-have-not-changed-in-a-nuxt-vue-app/)

* * *