– 前言: 经过三天的挣扎,终于翻阅所有资料,找到了寻找解决codeMirror实现的格式化功能,怎么说呢,本次项目以及codemirror都为最新版本,寻找解决的资料很少,一开始有原生的codemirror实现格式化,不是让链入json格式化就是sql格式化等,这些都是让下插件或者啥的,其实我就是想实现 不管什么类型的语言,当然,这个可以在代码里配置,不需要链入各种链接去实现格式化就可。
– 漫长的的翻阅资料中。。。
终于找到一个插件,其实是我下载项目时就已经配置好的 prettier 插件,别看这个很熟悉,就这个引入的过程相当费劲,这个其实和项目版本有关,下的是最新版的 “prettier”: “^3.1.0”,这个大概是23年7月份发布的,所以有些资料对于prettier可能是基于老版本引入的,尤其是对plugins的解析,今天,突发奇想,竟然就找到了解决办法,哈哈哈
实现用codemirror 继承的编辑器,在外部点击格式化按钮实现格式化功能
用 prettier 实现,依赖于 prettier 官网, 尤其是对于版本的变话,这是我的踩坑点,版本记录网址:https://www.prettier.cn/blog/2023/07/05/3.0.0.html
核心重点:
import { format } from "prettier/standalone";
- import prettierPluginBabel from "prettier/parser-babel";
+ import * as prettierPluginBabel from "prettier/plugins/babel";
+ import * as prettierPluginEstree from "prettier/plugins/estree";
console.log(
- format(code, {
+ await format(code, {
parser: "babel",
- plugins: [prettierPluginBabel],
+ plugins: [prettierPluginBabel, prettierPluginEstree],
})
);
package.json
"prettier": "^3.1.0",
html
import * as prettier from 'prettier'
import * as prettierPluginBabel from 'prettier/plugins/babel'
import * as prettierPluginEstree from 'prettier/plugins/estree'
// 格式化功能
const formattedHandle = async () => {
// 使用 Prettier 进行格式化
const formattedCode = await prettier.format(expressionVal.value, {
parser: 'babel',
plugins: [prettierPluginBabel, prettierPluginEstree],
// 其他 Prettier 选项
})
console.log('formattedCode', formattedCode)
expressionVal.value = formattedCode
}
参考官网地址:https://www.prettier.cn/docs/api.html
prettier.format 是 Prettier 库的一个主要方法,用于格式化代码。它接收两个参数:要格式化的代码字符串和一个选项对象。
以下是 prettier.format 方法的一些主要选项:(最好是对应官网地址查阅:https://www.prettier.cn/docs/options.html)