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!