vue3 codemirror关于 sql 和 json格式化的利用以及深入了解codemirror 利用 ...

---

需求说明

   后端返回一个json字符串，里面有value1、value2指定字段渲染sql语句，其他渲染json语句。
  

---

0、安装

1. "codemirror": "5.53.2", // codemirror组件
2. "codemirror-editor-vue3": "2.4.1", // vue3的codemirror组件。该组件基于Codemirror 5开发，仅支持vue3。
3. "jsonlint": "^1.6.3", // 可以验证JSON格式是否有效的工具
4. "jsonlint-mod": "^1.7.6", // 用来验证和格式化 JSON 文件的工具
5. "script-loader": "0.7.2", // 全局上下文中执行一次 JS 脚本
6. "sql-formatter": "15.1.2", // 将未格式化的SQL语句转换为格式化的语句

复制代码

  jsonlint 和 jsonlint-mod 的区别
简朴明确：jsonlint校验json格式化是否有效，jsonlint-mod用来格式化后同时校验json格式化是否有效。
（1）JSONLint是一种可以验证JSON格式是否有效的工具。 它可以检查JSON对象是否符合JSON尺度，包括缺失逗号、引号不匹配、缺失括号等问题，并给出详细的错误信息。 这将输出JSON文件是否有效的信息，以及任何错误消息。 如果JSON文件有效，则不会表现任何错误消息。
（2）jsonlint-mod是一个用来验证和格式化JSON 文件的工具。 它可以资助开发职员检查JSON 文件是否符合语法规范，并对文件进行格式化，使得JSON 代码更加整洁易读。 如果文件中有语法错误，jsonlint-mod 将会陈诉错误信息，并给出指向错误地点位置的指针。
（3）区别：jsonlint 是一个比较早期的工具，通常是作为一个命令行工具利用。它可以资助你验证JSON数据的精确性，并且在数据不符合规范时提供错误信息。jsonlint 也可以作为一个Node.js模块来利用，这样可以在JavaScript代码中直接调用其功能。
jsonlint-mod 是基于原始的jsonlint的一个修改版（或者说是一个fork）。它可能包罗了一些额外的特性或者对原始工具的一些改进。开发者可能会选择jsonlint-mod来获取更好的性能、更详细的错误信息或者是一些特定的功能，这些可能在原始的jsonlint中不可用。
  1. 导入js脚本

   看到下面的代码，你就了解为什么必要导入script-loader（全局上下文中执行一次 JS 脚本），即执行下面所有的脚本

1. // sql 编辑器
2. import * as sqlFormatter from "sql-formatter";
3. import Codemirror from 'codemirror-editor-vue3';
4. import 'codemirror/mode/sql/sql.js';
5. import "codemirror/mode/javascript/javascript.js";
6. // language
7. import 'codemirror/mode/javascript/javascript.js';
8. // theme 主题
9. import 'codemirror/theme/monokai.css';
10. // 折叠功能
11. import 'codemirror/addon/fold/foldcode.js';
12. import 'codemirror/addon/fold/foldgutter.js';
13. import 'codemirror/addon/fold/foldgutter.css';
14. import 'codemirror/addon/fold/brace-fold.js';
15. // 自动提示
16. import 'codemirror/addon/hint/show-hint.js';
17. import 'codemirror/addon/hint/show-hint.css';
18. import 'codemirror/addon/hint/javascript-hint.js';
19. // 代码校验 lint
20. import 'codemirror/addon/lint/lint.js';
21. import 'codemirror/addon/lint/lint.css';
22. import 'codemirror/addon/lint/json-lint';
23. import jsonlint from 'jsonlint-mod';
25. // 其他
26. import 'codemirror/addon/edit/matchbrackets.js';
27. import 'codemirror/addon/edit/closebrackets.js';
28. import "codemirror/addon/lint/json-lint.js";
29. (window as any).jsonlint = jsonlint;

复制代码

  *问题: import jsonlint from ‘jsonlint-mod’;如果你是typescript+ vue3+ vite的项目，这里会提示找不到模块“jsonlint-mod”或其相应的范例声明。
办理：根目录的src文件夹下创建 文件：vite-env.d.ts，添加declare module ‘jsonlint-mod’ 即可。

   2.设置

   注意点： sql和json的区别在于 mode: 'sql' 和 mode: 'application/json'

1. // sql的配置
2.   const sqlOptions = {
3.     autorefresh: true, // 是否自动刷新
4.     smartIndent: true, // 自动缩进
5.     tabSize: 4, // 缩进单元格为 4 个空格
6.     mode: 'sql', //编辑器的编程语言
7.     line: true, // 是否显示行数
8.     viewportMargin: Infinity, // 高度自适应
9.     highlightDifferences: true,
10.     autofocus: false,
11.     indentUnit: 2,
12.     readOnly: true, // 只读
13.     showCursorWhenSelecting: true,
14.     firstLineNumber: 1,
15.     matchBrackets: true,//括号匹配
16.     lineWrapping: true, //是否折叠
17.     gutters: [
18.       "CodeMirror-linenumbers",
19.       "CodeMirror-foldgutter",
20.       "CodeMirror-lint-markers",
21.     ],
22.     lineNumbers: true, //是否显示左边换行数字
23.     lint: true,  // 打开json校验
24.   }
25.   // json的配置
26.   const jsonOptions = {
27.     autorefresh: true, // 是否自动刷新
28.     smartIndent: true, // 自动缩进
29.     tabSize: 4, // 缩进单元格为 4 个空格
30.     mode: 'application/json', //编辑器的编程语言
31.     line: true, // 是否显示行数
32.     viewportMargin: Infinity, // 高度自适应
33.     highlightDifferences: true,
34.     autofocus: false,
35.     indentUnit: 2,
36.     readOnly: true, // 只读
37.     showCursorWhenSelecting: true,
38.     firstLineNumber: 1,
39.     matchBrackets: true,//括号匹配
40.     lineWrapping: true, //是否折叠
41.     gutters: [
42.       "CodeMirror-linenumbers",
43.       "CodeMirror-foldgutter",
44.       "CodeMirror-lint-markers",
45.     ],
46.     lineNumbers: true, //是否显示左边换行数字
47.     lint: true, // 打开json校验
48.   }

复制代码

3.html处利用

1. <!-- 我的是在for循环中，所以v-model的值也是用原数据list[index]进行渲染的，这里为例不误导直接使用了value -->
2. <codemirror v-if="key === 'value1'
3. || key==='value2'" v-model:value="value" :options="sql
4. Options"  />
5. <codemirror v-else v-model:value="value" :options="jsonOptions"  />

复制代码

4.js处理数据

（1）json格式化处理

1. value = JSON.stringify(JSON.parse(value), null ,2) // 数组对象格式化的逻辑
2. // JSON.stringify的第三个属性就是让我们格式化代码用的，直接传入数字x（10以内），就表示前面是x个空格的距离，我用的是2，也可以用'\t'，这样就是一个tab的距离了。

复制代码

（2）sql格式化处理

   sqlFormatter.format sql格式化处理的方法

1. value = sqlFormatter.format(value)

复制代码

5.剩余问题：

问题1: 虽然有效果了，但是如果是数组对象数组对象的数据就没有格式化，一层嵌套的就可以格式化，不知道那里错了。(已包揽理)
------------------------ 2024-01-29---------------------------
   办理json对象没有格式化问题：在debugger n小时后发现，实在是由于在处理数据的时候，判断该对象是否为object和array数据范例数据的时候，多嵌套了一层json.stringify 的方法导致渲染的时候我的数据是字符串，以是没有格式化成功。
  ------------------------ 2024-01-29---------------------------
问题2: 一开始会定义错误，背面不知道改了那里，即使格式化错误也不会提示报错了。(于2024-01-27已包揽理) 详情请看第6步
⬇️
6. 办理问题1:json格式化错误提示报错

   问题： 一开始会定义错误，背面不知道改了那里，即使格式化错误也不会提示报错了。
直接看效果：

  （1）打开官网

codemirror 官网地址CodeMirror 5：https://codemirror.net/5/
（2）打开官网

首先我们知道json-lint是校验json格式化是否错误的，直接搜刮json-lint

（3）查看官网示例

（4）右键demo点击查看源代码发现关键代码

（5）json格式化错误提示报错的关键代码

1. lineNumbers: true,
2. mode: "javascript", // codemirror的编辑器类型
3. gutters: ["CodeMirror-lint-markers"], 显示行旁边的红x
4. lint: true, // 打开json校验

复制代码

  在option里面就可以看到json格式化数据错误提示报错的了。也就是第（1）步

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。