laziel / vuejs-extension-pack

Popular VS Code extensions for Vue.js development.

Vue.js Extension Pack

This extension pack adds features for Vue.js development.

Note

Please read the Recommended Settings section to enable all features.

Recommended-Settings

Setup VS Code

Enable FormatOnSave & Eslint for .vue files:

"editor.formatOnSave": true,
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue"
]

Setup ESLint

Install following packages:

npm install --save-dev eslint-plugin-vue
npm install --save-dev eslint-config-prettier

Create/update eslint config file (.eslintrc.js or .eslintrc.json) in your project folder:

// Sample `.eslintrc.js`

module.exports = {
  plugins: ['vue'], // enable vue plugin
  extends: ['plugin:vue/essential', 'prettier'], // activate vue related rules
}

Extensions Included in this pack

• vetur - Vue tooling for VSCode
• vue-peek - Allows peek and goto definition for Vue single-file components
• auto-rename-tag - Auto rename paired HTML/XML tag
• auto-close-tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
• npm - npm support for VS Code
• JavaScript (ES6) Snippets - Code snippets for JavaScript in ES6 syntax
• NPM IntelliSense - Visual Studio Code plugin that autocompletes npm modules in import statements
• Path IntelliSense - Visual Studio Code plugin that autocompletes filenames
• ESLint - Integrates ESLint into VS Code.
• Prettier - Code formatter - VS Code plugin for prettier/prettier
• Formatting toggle - A VS Code extension that allows you to toggle the formatter on and off with a simple click

Credits

All credits goes to original authors of the above mentioned extensions.

Happy Coding!