初始化vue3项目

创建Vue3项目：vue create item

image.png

选3.x
class-style 选N
jsx选Y
history选N
linter/format选eslint+prettier

image.png

image.png

vscode中打开项目，插件安装：prettier

prettier在保存js时，自动要规范格式化文件
项目根目录新建一个.prettierrc文件，配置如下

{
    "semi": false,    // 使用分号, 默认true
    "singleQuote": true,   // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "bracketSpacing": true,   // 对象中的空格 默认true
    "arrowParens": "always", // avoid 能省略括号的时候就省略 例如x => x // always 总是有括号
    "trailingComma": "all" // 在对象或数组最后一个元素后面是否加逗号（选es5则是ES5中加尾逗号）
}

此时保存，ts文件并未格式化，需要设置vscode为自动保存时格式化

image.png

如果未成功，那应该是没有设置默认格式化程序，右键文件-点击“格式化文档” ，会提示选择默认格式化程序，选prettier就OK了

另外：vscode的tab制表符默认是4个空格，改成2个即可

---

开发vue3项目是否使用TS

vue 对 TypeScript 进行全面支持，这并不代表我们应该在任何情况下都无条件的使用 TypeScript
TS 的优势主要在于 静态类型检查和环境声明，但同时它也会为你的项目增加复杂度。如果你的项目需要使用到以上两点，那么我推荐你使用 TS 。否则只是增加了无谓的复杂度而已。
决定我们应该使用哪种技术的唯一条件，就是我们的目标。 我们需要做的是在可以 完成目标 的基础上，寻找最简单的实现方案。

---

vscode插件使用volar，记得卸载vetur