uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.67k stars 132 forks source link

如何格式化? #394

Closed kingcwt closed 1 year ago

kingcwt commented 2 years ago

如果value是字符串 如何格式化代码 而不是一行展示

jaywcjlove commented 2 years ago

@kingcwt 编辑器并不代格式化功能,这需要你自己编写,类似 https://github.com/kufii/sql-formatter-plus

也许你可以在官方论坛寻找答案 https://discuss.codemirror.net

jaywcjlove commented 2 years ago

https://discuss.codemirror.net/t/how-to-set-json-formatter-of-codemorrir-next/4090/2

zerosoul commented 11 months ago

我找到了一种格式化的方式,其实我就是想简单的做个自动缩进,但是不知道如何获取到这个editor实例 https://codemirror.net/2/demo/formatting.html image

jaywcjlove commented 11 months ago

@kingcwt 这是 v6 版本之前的示例, v6 版本 codemirro 作者说,不会为你做这件事情 -> https://discuss.codemirror.net/t/how-to-set-json-formatter-of-codemorrir-next/4090/4

那如何做格式化代码的功能呢?你可以参考我的 css 格式化工具 https://wangchujiang.com/tools/#/css-formatter

这是使用的是 prettier 进行格式化的

https://github.com/jaywcjlove/tools/blob/eb5fc6f384f21085ca9b944e412f34a72210b65a/packages/css-formatter/src/index.tsx#L29-L35

它可以格式化 ts/js/css/html/markdown 等,你可以研究一下

"./parser-babel": "./plugins/babel.js",
"./parser-flow": "./plugins/flow.js",
"./parser-typescript": "./plugins/typescript.js",
"./parser-espree": "./plugins/acorn.js",
"./parser-meriyah": "./plugins/meriyah.js",
"./parser-angular": "./plugins/angular.js",
"./parser-postcss": "./plugins/postcss.js",
"./parser-graphql": "./plugins/graphql.js",
"./parser-markdown": "./plugins/markdown.js",
"./parser-glimmer": "./plugins/glimmer.js",
"./parser-html": "./plugins/html.js",
"./parser-yaml": "./plugins/yaml.js",
yunnan-tibet commented 4 months ago

JSON.stringify(value, null, 2)即可