Learn Vue JS course Learn Javascript and Vue JS Learn VueJS course Learn VueJS Tutorial

Visual Studio Code for Vue.js Developers

Auto Formatting Files in VS Code (Volar/Built-in or Prettier) thumbnail image

Get access to the most comprehensive Vue.js video library in the world. Over 300 video lessons including the newest Vue 3 features.

Auto Formatting Files in VS Code (Volar/Built-in or Prettier)

Offloading the work of formatting our code to the editor saves time and headache, plus keeps our code predictable and easy to read.

When working in a Vue.js project, it’s simple to rely on Volar for formatting .vue files and built in VS Code formatters for everything else. However, for a more portable and version control friendly solution consider using the popular formatter Prettier.

In this lesson, I’ll show you to get auto formatting on save setup with both built in formatters and Prettier.


Keyboard Shortcuts

  • Format File
    • Shift+Option+F (Mac)
    • Shift+Alt+F (Windows)
  • Undo
    • Cmd+Z (Mac)
    • Ctrl+Z (Windows)
  • Save
    • Cmd+S (Mac)
    • Ctrl+S (Windows)
  • Open Extensions Panel
    • Cmd+Shift+X (Mac)
    • Ctrl+Shift+X (Windows)