vue3项目中用codemirror实现格式化java代码及不太成熟的历程

本期只介绍创作的曲折历程,并不能解决实际问题,现有插件不支持,总结在了最后

一、案例效果

vue3项目使用preitter 搭配prettier-plugin-java 实现codemirror 格式化 java

二、步骤

1. 安装prettier和prettier-plugin-java,可以通过npm或yarn进行安装:
npm install --save-dev prettier prettier-plugin-java
yarn add --dev prettier prettier-plugin-java
2. 在你的项目中,你可以创建一个prettier的配置文件.prettierrc.js,并在其中添加如下配置
module.exports = {
  plugins: ["prettier-plugin-java"],
};
3. codemirror组件中使用prettier来格式化你的Java代码
import prettier from "prettier";
import javaPlugin from "prettier-plugin-java";

formatJavaCode(code) {
  const formattedCode = prettier.format(code, {
    parser: "java",
    plugins: [javaPlugin],
  });
  return formattedCode;
}

在你的codemirror组件中,你可以使用这个方法来格式化你的Java代码,例如:

this.code = this.formatJavaCode(this.code);

三、踩坑场景

1. 报错 process is not defined

在这里插入图片描述
这个问题是由于在浏览器环境中,process对象是不存在的,而prettier-plugin-java在某些地方使用了process对象,导致了这个错误。

解决这个问题的一种方法是在你的webpack配置中添加一个插件,来定义process对象。你可以使用webpack.DefinePlugin来实现这个功能:

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
      process: 'process/browser',
    }),
  ],
  // ...
};

这样,process对象就会被定义为process/browser,从而避免了ReferenceError: process is not defined这个错误。

另外,你也可以尝试使用prettier-plugin-java的最新版本,看看是否已经修复了这个问题。

2. 报错 browser is not defined

在这里插入图片描述
这个错误是因为process/browser被解析为process对象的browser属性,但是browser并没有被定义,所以会报错。

在webpack中定义process对象,应该使用DefinePlugin插件,将process对象的env属性设置为一个包含环境变量的对象,而不是直接将process设置为’process/browser’。

你可以修改你的webpack配置如下:

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env),
      }),
    ],
  },
};

这样,process.env就会被设置为一个包含所有环境变量的对象,你就可以在你的代码中使用process.env来访问环境变量了。

3. 报错 process is not defined

在这里插入图片描述
这个问题是由于在浏览器环境中,process对象是不存在的,而prettier-plugin-java在某些地方使用了process对象,导致了这个错误。

在 Vue CLI 项目中,你可以在vue.config.js文件中的configureWebpack或chainWebpack配置项中添加以下内容,来为前端代码注入process变量:

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
    ],
  },
};

这里使用了webpack.ProvidePlugin插件,它可以将模块作为一个变量,被 webpack 在其他每个模块中引用。这样就可以在任何地方使用process变量了。

然后,你需要安装process这个npm包:

npm install --save process

这个包提供了一个全局对象,用于访问,例如,环境变量等信息。

四、安装包版本

 "prettier": "2.3.1",
 "prettier-plugin-java": "^1.6.0",
 "java-parser": "^2.0.2",
 "process": "^0.11.10",

五、写在最后

这个历程有点艰难,主要是从prettier 官网好不容易找到了能够格式化java的插件,结果弄了一遭还不能用,此文章是为了记录创作历程,呈曲折式呈现

官网地址: https://prettier.io/docs/en/plugins.html
在这里插入图片描述

结论: 这个preitter 版本和prettier-plugin-java 的版本不统一,所以即使能编译解析java语言,但做不到格式化,因为prettier-plugin-java 最新版本是1.6.0,要求的prettier是2.3.1,而prettier现在已经达到了3.x版本。 preitter 2.3.1的版本会存在一些bug

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/347585.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Tomcat好帮手---JDK

目录 1、Tomcat好帮手---JDK 2、安装JDK 部署Tomcat参考博主博客 部署TOMCAT详解-CSDN博客 1、Tomcat好帮手---JDK JDK是 Java 语言的软件开发工具包,JDK是整个java开发的核心,它包含了JAVA的运行环境(JVMJava系统类库)和JAVA…

计算机网络 第5章(运输层)

系列文章目录 计算机网络 第1章(概述) 计算机网络 第2章(物理层) 计算机网络 第3章(数据链路层) 计算机网络 第4章(网络层) 计算机网络 第5章(运输层) 计算机…

基于vue实现计数器案例

一、需求 页面显示两个按钮,分别为:增加 和 减少;显示加减后的数字;加到10提示不能再加,减到0提示不能再减; 二、代码演示 1、实现步骤 data中定义数据: 比如 num 值为1methods中添加两个方法: 比如add…

技术标准引领文物预防性保护新篇章(文物预防保护,技术标准)

文物做为历史的见证和传承,背负着中华文化久远的文化与智慧。但是,随着时间推移,这类珍贵的文化遗产不可避免面临各种自然和人为伤害。为了保障这类珍贵的不可再生资源,文物预防性保护领域标准规范发展和应用至关重要。 一、现状…

蓝桥杯准备之路-Java基础复习

一、基本数据类型 int(32),long(64),float,double,boolean ,char 溢出判断: System.out.println("蓝桥杯练习第一天");Scanner scan new Scanner(System.in);int a scan.nextInt();System.out.println(a);int a1 Integer.MAX_VALUE;System.out.prin…

PySide6/PyQt6中Qt窗口标志/窗口属性汇总,如何正确的设置窗口标志/窗口属性

文章目录 📖 介绍 📖🏡 环境 🏡📒 使用方法 📒📚 窗口标志汇总📚 窗口属性汇总📝 使用方法📝 注意事项⚓️ 相关链接 ⚓️📖 介绍 📖 在Qt框架中,窗口标志(window flags)是用于控制窗口的各种属性和行为的强大工具。它们通过设置窗口的属性,如边框…

阿赵UE学习笔记——解决UE资源不能正常显示缩略图的问题

阿赵UE学习笔记目录 大家好,我是阿赵。   这里分享一个虚幻引擎使用小技巧。在使用虚幻引擎的过程中,经常会遇到有些资源在重新打开项目的时候,会看不到缩略图,而是显示默认资源的图标: 这个时候,第一种…

vector迭代器失效

目录 迭代器失效的场景 insert插入元素时迭代器失效 erase删除元素时迭代器失效 本期我们主要进行vector迭代器失效问题的讨论。 迭代器失效的场景 insert插入元素时迭代器失效 先看代码: iterator insert(iterator pos, T val){assert(pos > _start);ass…

springboot农机电招平台源码和论文

随着农机电招行业的不断发展,农机电招在现实生活中的使用和普及,农机电招行业成为近年内出现的一个新行业,并且能够成为大群众广为认可和接受的行为和选择。设计农机电招平台的目的就是借助计算机让复杂的销售操作变简单,变高效。…

React(3): React 实现卖座App

React实现卖座App 娱乐项目,请勿当真 !!! 简介 之前在学习React的时候,在 bilibili 看到 React 学习视频,于是马上着手 React版本的卖座App 开发 技术栈 // 前端 React TypeScript Antd-Mobile Dayjs 3D…

《Linux高性能服务器编程》笔记08

Linux高性能服务器编程 本文是读书笔记,如有侵权,请联系删除。 参考 Linux高性能服务器编程源码: https://github.com/raichen/LinuxServerCodes 豆瓣: Linux高性能服务器编程 文章目录 Linux高性能服务器编程第08章 高性能服务器程序框架8.1 服务器…

Redis——list以及他的应用场景

介绍 :list 即是 链表。链表是一种非常常见的数据结构,特点是易于数据元素的插入和删除并且且可以灵活调整链表长度,但是链表的随机访问困难。许多高级编程语言都内置了链表的实现比如 Java 中的 LinkedList,但是 C 语言并没有实现…

如何学习VBA_3.2.12.13:VBA中工作表函数的利用

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的劳动效率,而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册,现在已经全部完成,希望大家利用、学习。 如果…

JavaScript进阶:WebAPIs重点知识整理1

目录 1 DOM修改元素内容 2 DOM修改元素常见属性 3 修改元素样式属性 3.1 通过style修改元素样式 3.2 通过类名className修改元素样式 3.3 通过classList修改元素样式 4 操作表单元素属性 5 自定义属性 6 定时器 7 事件监听 7.1 点击事件 click 7.2 鼠mouseenter和移…

Web网页生成桌面应用

前言:网页生成桌面指的是将一个网页保存为桌面应用程序的形式,使得用户可以在桌面上直接打开该网页,而不必通过浏览器打开。这种桌面应用程序一般具有独立的窗口、菜单、工具栏等界面元素,能够提供更加方便快捷的使用体验。 实现…

Vue 动态组件与异步组件:深入理解与全面应用

聚沙成塔每天进步一点点 本文内容 ⭐ 专栏简介1. 动态组件实现原理:用法示例: 2. 异步组件实现原理:用法示例: 3. 异步组件的高级应用a. 异步组件的命名:b. 异步组件的加载状态管理: ⭐ 写在最后 ⭐ 专栏简…

目标检测算法改进系列之添加C2f-DCN模块

DCNv2简介 可变形卷积网络的卓越性能源于其适应物体几何变化的能力。通过对其自适应行为的检查,我们观察到,虽然对其神经特征的空间支持比常规的 ConvNet 更接近对象结构,但这种支持可能远远超出感兴趣区域,导致特征受到不相关图…

使用KMP迁移Android app到IOS平台

使用KMP迁移Android app到IOS平台 如果你有一款Android app,你想将其迁移到IOS平台,但是你不熟悉Swift语言,那么你该如何做呢?辛亏JetBrains 推出 Kotlin Multiplatform 和 Compose Multiplatform ,突然间&#xff0c…

代码随想录算法训练营第十六天| 104.二叉树的最大深度 ● 111.二叉树的最小深度 ● 222.完全二叉树的节点个数

104.二叉树的最大深度 本题可以使用前序(中左右),也可以使用后序遍历(左右中),使用前序求的就是深度,使用后序求的是高度。 ●二叉树节点的深度:指从根节点到该节点的最长简单路径边…

Linux-Shell脚本基础

一、前言: 1.程序编程风格: 面向过程语言: 开发的时候 需要 一步一步 执行 做一件事情,排出个步骤,第一步干什么,第二步干什么,如果出现情况A,做什么处理,如果出现了情…