vsCode下开发vue3+typescript需要的插件及代码格式化

真的是被代码格式化搞烦了，在网上抄答案，但是发现大多数答案互相抄袭，还过时了。所以只能狠下心自己搞明白这些插件到底都什么用处。

选取插件的标准：尽可能还在维护
举个例子，vue代码格式化推荐最多的两个格式化插件“beautify”和“prettier”，我两个都尝试了，一度觉得“beautify”好用，但是总感觉差点意思，然后对比了一下，发现“beautify”好久不更新了，再看“prettier”还在更新，果断选择“prettier”

vue3开发必备插件

Vue Language Features (Volar)

刚开始不懂，看着网上的推荐，把vetur和这个都下了，也不知道干啥的，查了资料终于知道，Volar为vue3开发，vetur主要是vue2，所以，这下知道选哪个了，而且他们不能共存。

这个插件主要功能就是vue3的代码高亮及语法提示

额外配置：
官方推荐使用托管模式使用该插件
实测托管模式的代码提示比vs code自带的提示好一点。

Prettier - Code formatter

官方文档

前面提到了，目前最热门的代码格式化工具。但是默认的配置不好看，需要配置：

1. bracketSameLine 将>单独一行还是在最末尾

true的例子：
<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

false的例子：
<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

2. vueIndentScriptAndStyle 是否缩进 Vue 文件中的代码<script>和<style>标签，个人喜欢缩进的，所以这项填true
3. tabWidth 缩进字符数，默认两个，我喜欢4个的
4. printWidth设置行的长度，默认是80，如果不改，就会多很多没必要的换行，现在的屏幕都比较大了，设置个150。

所以总的配置如下：
全局配置的话，在

文件中添加：

    "prettier.bracketSameLine": true, // 但是这一项无法被识别，所以是无效的
    "prettier.vueIndentScriptAndStyle":true,
    "prettier.tabWidth": 4

再项目中配置：
在项目的根目录创建文件“.prettierrc”，然后添加一下内容：

{
    "bracketSameLine":true,
    "vueIndentScriptAndStyle":true,
    "tabWidth": 4,
    "printWidth":150
}

这样在项目中就可用了。其他配置可去官网看看。

PS：其他配置：

设置文件的默认格式化插件

以.vue文件为例，打开文件后，在空白处右键：



这样就可以了，这个设置仅针对.vue文件，其他文件也是同样的方式

PS：该插件也还有不满意的地方，比如链式调用他就全部换行，就不是很有必要，似乎没有配置支持配置这一项。只能用// prettier-ignore去忽略这一行的格式化了

设置保存文件时自动格式化

文件>首选项>设置，然后搜索“Format On Save”，将这一项勾上，然后保存文件时，就会自动格式化。

ESLint

代码规范提示插件，为了代码规范，得装上，不然被同行嫌弃

Path Intellisense

路径智能提醒，还是很有必要的，特别是对静态文件的引用时

HTML CSS Support

帮助写样式的

Bracket Pair Colorizer 2

给括号添加颜色，对多重括号的分辨有帮助，对其他语言也有效

Auto Close Tag

自动补充html 的tag

Auto Rename Tag

和上面那个一家的，这个自动重命名tag，就是修改其中一个tag，另一半也会跟着变。

npm

它作用于package.json。我主要用它来看看依赖的最新版本是什么，其他功能暂时觉得很鸡肋。
还可以 按F1之后输入npm执行命令，见文档