Vue.js Extension Pack

This extension pack adds features for Vue.js development.

Recommended ESlint setup

ESLint with vue and typescipt

Install following packages

npm install --save-dev eslint vue-eslint-parser @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier

Create/update eslint config

// enable vue in eslint

module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
  },
  plugins: ["vue", "@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/essential",
    "plugin:prettier/recommended",
  ],
};

ESLint with vue and javascript

Install following packages

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

Create/update eslint config

// enable vue in eslint

module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "babel-eslint",
  },
  plugins: ["vue"],
  extends: [
    "eslint:recommended",
    "plugin:vue/essential",
    "plugin:prettier/recommended",
  ],
};

Extensions Included in this pack

• vetur - Vue tooling for VSCode
• formulahendry.auto-complete-tag - Extension Packs to add close tag and rename paired tag automatically for HTML/XML
• JavaScript (ES6) Snippets - Code snippets for JavaScript in ES6 syntax
• 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
• Visual Studio IntelliCode - AI-assisted development
• Vue VSCode Snippets - Snippets that will supercharge your Vue workflow

Credits

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

Happy Coding!