Vue3脚手架实现（五、渲染jsx和prettier配置）本期我们讲解比较简单的两个配置的渲染，在之前脚手架渲染的基础之

本期我们讲解比较简单的两个配置的渲染

jsx配置

prettier配置

首先我们在template目录下新建一个config文件夹，用来存放一些配置类的渲染

jsx配置的渲染

实际项目中引入jsx，需要引入一下插件@vitejs/plugin-vue-jsx，然后在vite.config.js里面进行一下调用。

所以我们配置一下package.json

template/config/jsx/package.json

{
  "devDependencies": {
    "@vitejs/plugin-vue-jsx": "^4.1.1"
  }
}

然后需要在vite.config.js里面调用，所以我们需要配置下vite.config.js.data.mjs，暴露一下getData方法，和之前的数据进行合并

template/config/jsx/vite.config.js.data.mjs

export default function getData({ oldData }) {
  const vueJsxPlugin = {
    id: 'vueJsx',
    importer: "import vueJsx from '@vitejs/plugin-vue-jsx'",
    initializer: 'vueJsx()',
  }

  return {
    ...oldData,
    // vueJsx配置排在vue配置后面
    plugins: oldData.plugins.flatMap((plugin) =>
      plugin.id === 'vue' ? [plugin, vueJsxPlugin] : plugin,
    ),
  }
}

index.ts就需要加入代码，需要注意代码防止的位置，我们未来还会有更多配置，例如pinia，这个配置会影响到入口文件的，所以有关配置的渲染代码，我们放到添加入口文件之前

const create = async (name: string, options: Options) => {
  // 项目目录预处理
  ...

  // 询问用户需要的配置
  ...

  // 创建一下目录
  ...

  // 生成基础的package.json文件
  ..

  // 模板文件位置
  ...

  // 渲染基础项目
  ...
  
  // 添加对应的配置
  if (needsJsx) {
    render('config/jsx')
  }

  // 添加入口文件
  ...

  // 添加项目code
  ...

  // 收集所有的ejs的数据
  ...
  // 根据ejs数据渲染对应的模板文件
  ...
}

prettier的渲染

prettier的配置，我们其实之前在我们自己的项目进行配置的时候，就有讲过要增加哪些配置。主要有.vscode文件夹里面需要增加配置，还有.gitattributes文件，.prettierrc.json文件，然后就是package.json里面需要增加对应的format命令和prettier的包

template/config/prettier/.vscode/extensions.json：推荐安装prettier插件
```
{
  "recommendations": ["esbenp.prettier-vscode"]
}
```
template/config/prettier/.vscode/settings.json：prettier的vscode的配置，保存时候可以格式化代码
```
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```
template/config/prettier/_gitattributes：换行风格问题解决
```
* text=auto eol=lf
```

template/config/prettier/_prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

template/config/prettier/package.json

{
  "scripts": {
    "format": "prettier --write src/"
  },
  "devDependencies": {
    "prettier": "3.5.3"
  }
}

index.ts文件夹就需要增加相关逻辑

const create = async (name: string, options: Options) => {
  // 项目目录预处理
  ...

  // 询问用户需要的配置
  ...

  // 创建一下目录
  ...

  // 生成基础的package.json文件
  ..

  // 模板文件位置
  ...

  // 渲染基础项目
  ...
  
  // 添加对应的配置
  if (needsJsx) {
    render('config/jsx')
  }
  if (needsPrettier) {
    render('config/prettier')
  }
  
  // 添加入口文件
  ...

  // 添加项目code
  ...

  // 收集所有的ejs的数据
  ...
  // 根据ejs数据渲染对应的模板文件
  ...
}