unplugin-preprocessor-directives
unplugin-preprocessor-directives copied to clipboard
Conflict with app.config.compilerOptions.whitespace = 'preserve', lost whitespace.
In Vue SFC file, with the following code
<template>
<jy-form-dialog ref="form" v-model:entity="entity" v-bind="options" max-col="4">
<jy-form-item label="输入控件配置说明" col="2">
<pre>
{
"tag": "jy-dict", //
"data": {
"props": {
"type": "radio", // 显示类型:radio、单选按钮;checkbox、多选按钮;其他取值为下拉框
"dict": "Common_YesNo", // 字典编码或者字典项列表如:["所属机构", "系统名称", "不显示名称" ]
"dataType": "String" // 如果取值为字符串,需要指定为为String,否则会当做数值类型处理
}
}
}</pre
>
</jy-form-item>
</jy-form-dialog>
</template>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
name: 'SettingDetail'
})
</script>
And in vite.config.ts file, use this plugin
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import PreprocessorDirectives from 'unplugin-preprocessor-directives/vite'
// https://vitejs.dev/config/
export default defineConfig((configEnv:any) => {
return {
plugins: [PreprocessorDirectives({ /* options */ }), vue()], // with PreprocessorDirectives plugin, the pre tag display not ok
// plugins: [vue()] // use this line, the pre tag display ok
}
})
I want to keep the whitespace in pre tag content for indentation display, if use PreprocessorDirectives plugin, the indentation lost.
I used following versions: "vue": "^3.4.24", "@vitejs/plugin-vue": "^5.0.4", "unplugin-preprocessor-directives": "^1.0.3", "vite": "^5.2.10",
抱歉,最近没有时间来更新这个插件,您可以临时这样实现来保留缩进(运行时):
<pre>{{ JSON.stringify({...}, null, 2) }}</pre>
通过JSON.stringify的方式,没法保留行尾的注释说明,这个本意是想通过样例说明讲解传达如何使用属性。
我现在临时通过 PreprocessorDirectives({include: /src/common/plugins/./}) 的方式,仅包含极个别使用了条件宏定义的源码文件来规避过去。