oligot / vue-vscode-extensionpack

The extensions I use when developing a Vue application with VS Code

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue VSCode Extension Pack

A collection of extensions for working with Vue Applications in VS Code

These are some of my favorite extensions to make Vue application development easier and fun.

Extensions Included

  • Vetur - Includes support for .vue files, including but not limited to: Syntax-highlighting, Emmet, Linting / Error Checking, Formatting, Auto Completion, Debugging
  • Vue Snippets - These are my own snippets to supercharge Vue application development 🚀
  • Prettier - Never worry about formatting your code ever again, keep everything consistent with ease. My suggestion is to add "editor.tabCompletion": true, "editor.formatOnSave": true, to your settings file in preferences.
  • Formatting toggle This one is a lifesaver! I love Prettier, but there are times I'm submitting PRs to repos with different formatting rules than I have. Rather than having to either shut off Prettier entirely, update my preferences to match theirs, or submit a noisy PR, I can use this extension to toggle formatting with a quickkey and get everything in! I love it.
  • Bracket Pair Colorizer - This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. Super handy!
  • Bookmarks - Adds a bookmark to places you designate in your file, and allows you to quickly jump between them. Super helpful. Type command + opt + K to create a bookmark and command + opt + J to jump between them 🔖
  • Jumpy - We lose a lot of time scanning with a mouse, time we can get back by using our keyboard instead. Jumpy provides fast cursor movement by giving you a couple of keys that offer a hook to get to another part of the document.
  • NPM Intellisense - a plugin that autocompletes npm modules in import statements
  • ES6 Snippets - quickly spin up ES6 JavaScript with only 3 or 4 characters
  • Copy Relative Path - copies the relative path of any file right from the sidebar by right-clicking.
  • Material Palenight Theme Syntax highlighting can be a very personal thing, so you might not want to use this, but I'm including it because I quite like using it, and it matches well with the Bracket Pair Colorizer plugin included above

Relevant Links

Enjoy!

About

The extensions I use when developing a Vue application with VS Code

License:MIT License