VsCode工具开发vue项目必装插件清单(推荐!)

针对“VsCode工具开发vue项目必装插件清单(推荐!)”这个主题，我可以给出如下的完整攻略：

为什么需要安装插件

VsCode是一款非常优秀的编辑器，尤其在前端开发领域居功至伟。VsCode的威力并不仅仅来自于其“自带很多好用的功能”这个事实，还在于因为其开放性，有很多开发者一直在不断地为其开发各种插件，让VsCode变得更加完美。于是，对于vue项目的开发来说，选择合适的插件是必须的。接下来我会推荐一些我自己在vue项目中运用得较多的插件：

示例说明

下面将给出两个带有示例说明的插件的使用：

Vetur

Vetur在Vue.js项目中的使用非常便捷，下面给出一个示例，假设我们需要编写一段Vue组件：

<template>
  <div>
    <h1>{{  title  }}</h1>
    <p>{{  desc  }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'Hello World',
      desc: '这是一个Vue组件'
    }
  }
}
</script>

<style>
/* 样式代码 */
</style>

如果你安装了Vetur插件，那么VsCode会自动给你提供很多有用的提示，比如说在输入<符号时会自动帮你补全代码；在你输入组件标签时会弹出提示，方便你快速选择等。

Prettier

Prettier编写规范化的代码规范，在一个多人开发的团队中非常重要。假设你写了一段没有经过格式化处理的Vue组件：

<template><div class="">
<h2>{{title}}</h2></div></template>
<script>
export default {
  name: 'App',
  data(){
    return{
      title:'一个小Demo'
    }
  }
}
</script>

直接按下Prettier的快捷键shift + alt + F（默认快捷键），VsCode会自动进行格式化处理，输出：

<template>
  <div class="">
    <h2>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      title: "一个小Demo"
    };
  }
};
</script>

都是再简单不过的操作了，但是这些小技巧对我们提高编码效率帮助非常的大。