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>
  1. vueIndentScriptAndStyle 是否缩进 Vue 文件中的代码

你可能感兴趣的:(前端,vsCode,volar,插件,vue3,typescript)