vite-vue3配置prettier

Vite是一个由Vue.js官方推出的高效、快速的前端构建工具，而Prettier是一款自动格式化代码的工具，可以保持代码风格的一致性。要在Vite项目中集成Prettier并配置它来管理Vue 3的代码风格，你可以按照以下步骤操作：

1. **安装依赖**:
首先，在项目根目录下运行以下命令安装`vite-plugin-prettier` 和 `prettier`：

   npm install --save-dev vite-plugin-prettier prettier @vue/prettier

或者使用Yarn：

   yarn add -D vite-plugin-prettier prettier @vue/prettier

2. **配置Vite插件**:
在`vite.config.ts` 或 `vite.config.js` 文件中添加`vite-plugin-prettier` 插件配置：

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import prettierPlugin from 'vite-plugin-prettier';

   export default defineConfig({
     plugins: [
       vue(),
       // 添加prettier插件
       prettierPlugin({
         printWidth: 80, // 可选，设置代码行宽，默认值为80
         singleQuote: true, // 使用单引号代替双引号
         semi: false, // 结束符选择，默认false， Vue 3项目通常不需要分号
         // 更多选项，参考 Prettier 官方文档 https://prettier.io/docs/en/options.html
       }),
     ],
   });

3. **启用Prettier自动格式化**:
Vite会自动检测到`.vue`文件，并在保存时应用Prettier的规则进行格式化。如果想在编写时实时检查，可以在终端运行 `npm run dev` 或 `yarn dev`，Vite会在编译时运行Prettier。

4. **全局配置Prettier**:
如果你想在项目之外也统一Prettier的规则，可以在项目根目录下创建`.prettierrc.js` 或 `.prettierrc.json` 文件，配置Prettier的基本样式选项。