vue3 + ts +volar + eslint + prettier + vscode 设置

date

Jul 3, 2023

slug

vue3+ts+volar+eslint+prettier+vscode设置

status

Published

根据 vue 官方推荐，使用 vscode 中的 volar 插件对 vue 文件进行代码高亮语法提示和 vue 单文件内的 TS 语法服务。

如果有安装 Vetur 则先禁用，然后安装 volar 和 TypeScript Vue Plugin , 重启 vscode

确认项目中 .vscode 文件夹内存在 extensions.json 文件

设置 Volar Takeover 模式来支持 Vue 的 TS 语言服务

在项目中增加 eslint 代码检查，新增依赖

新增 eslint.cjs 文件

新增 .eslintignore

在项目中新增 prettier 进行代码格式化，新增依赖

prettier eslint-config-prettier 主要用来解决和 eslint 的冲突

新增 .prettierrc.json 文件

新增 .prettierignore 文件

在设置中开启自动保存和格式化

在项目中 .vscode 文件夹内新增 settings.json 文件

（或者点左下角齿轮图标 => 设置 => 工作区（在左上角）=> 打开设置（在右上角））

引入插件 @vitejs/plugin-vue-jsx

在 vite.config.ts 中配置

重启 vscode