Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sdras/vue-vscode-extensionpack

The extensions I use when developing a Vue application with VS Code
https://github.com/sdras/vue-vscode-extensionpack

extension extension-pack vs-code-extension-pack vscode vscode-extension vue vue-extension-pack vuejs

Last synced: 18 days ago
JSON representation

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

Awesome Lists containing this project

README

        

# 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](https://marketplace.visualstudio.com/items?itemName=octref.vetur&WT.mc_id=marketplace-pack-sdras) - Includes support for .vue files, including but not limited to: Syntax-highlighting, Emmet, Linting / Error Checking, Formatting, Auto Completion, Debugging
- [Vue Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets&WT.mc_id=marketplace-pack-sdras) - These are my own snippets to supercharge Vue application development 🚀
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&WT.mc_id=marketplace-pack-sdras) - 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](https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle&WT.mc_id=marketplace-pack-sdras) 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](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer&WT.mc_id=marketplace-pack-sdras) - 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](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks&WT.mc_id=marketplace-pack-sdras) - 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](https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy&WT.mc_id=marketplace-pack-sdras) - 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](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense&WT.mc_id=marketplace-pack-sdras) - a plugin that autocompletes npm modules in import statements
- [ES6 Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets&WT.mc_id=marketplace-pack-sdras) - quickly spin up ES6 JavaScript with only 3 or 4 characters
- [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl&WT.mc_id=marketplace-pack-sdras) Syntax highlighting can be a very personal thing, so you might not want to use this, but I worked hard creating a theme you might like. Especially great for your eyes at night, this theme was developed especially with contrast and colorblindness in mind.

## Relevant Links

- [Github](https://github.com/sdras/vue-vscode-extensionpack)
- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack&WT.mc_id=marketplace-pack-sdras)

**Enjoy!**