My Vue Setup 2021

April 14th, 2021

When my code looks like this:

<template>
<h1 class='big-header'>HI!</h1>
<h3>This is a very useful component!</h3>
<p class='info' >I contain valuable information.</p>
</template>

<script>
export default{
data(){
return{
light:false,
fluff:null
}
}
};
</script>

<style scoped>
.big-header{
font-size:500em;
}
</style>

I want my editor automatically to make it look like this:

<template>
  <h1 class="big-header">HI!</h1>
  <h3>This is a very useful component!</h3>
  <p class="info">I contain valuable information.</p>
</template>

<script>
export default {
  data() {
    return {
      light: false,
      fluff: null,
    }
  },
}
</script>

<style scoped>
.big-header {
  font-size: 500em;
}
</style>

When I started working with Vue, it took me a minute to get it formatted properly. Fighting the linter is no way to make progress on a project. So, I thought I'd share my setup.

I'm using VSCode.

I'm using Vue 3, with ESLint and Prettier. I have ESLint config in the package.json (configuring ESLint), and a separate prettier config file at the root (configuring Prettier). Why? This has given me the best results.

//package.json
{
  ...
  //in dev dependencies
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

//prettierrc.js
module.exports = {
    singleQuote: true,
    semi: false
}

I also have the Vetur extension installed on VSCode. It handles syntax highlighting and all the tooling for Vue in the editor.

Once you get it all set up, you may need to quit VSCode and restart it in order for these changes to take effect.

With our formatter configured, we can ignore our linter and get our projects off the ground.

I hope this helps you on your way!