I’m writing a web extension to use at work that converts text into formatted code blocks using Prism and Prettier. We primarily use TypeScript and Java. Since the TypeScript plugin is included in Prettier, implementing that was easy enough. However, the Java plugin is 3rd-party and I cannot find any instructions on how to implement it with standalone Prettier.
No matter what I try, the farthest I’ve gotten is seeing ConfigError: Couldn't resolve parser "java". Plugins must be explicitly added to the standalone bundle. in the browser console.
The included plugins can be simply imported with a require() statement. However, trying this with the java plugin throws Error: Can't walk dependency graph: Cannot find module 'prettier-plugin-java' from 'C:UserschrisWebstormProjectsagility-code-chunksformat.js' during the build. I have tried both require("prettier-plugin-java") and require(./node_modules/prettier-plugin-java).
From there, I pivoted to trying a .prettierrc.json/.prettierrc.js, but it doesn’t seem to register either, I assume because I am using the API and not the CLI.
Here is my current state (testing in a dummy HTMl before implementing in the extension):
codeblock.html
<html style="background-color: #fff">
<head>
<link href="themes/prism.css" rel="stylesheet"/>
<title>Code Block</title>
<header></header>
<script src="bundle.js"></script>
</head>
<body>
<header data-plugin-header="show-language"></header>
<pre><code class="language-java">
<!-- Purposefully formatted poorly to ensure Prettier is working -->
package com.example;
public class Main {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
</code></pre>
<script src="prism.js"></script>
</body>
</html>
format.js
const prettier = require("prettier");
const typescript = require("./node_modules/prettier/plugins/typescript");
const babel = require("./node_modules/prettier/plugins/babel");
const estree = require("./node_modules/prettier/plugins/estree");
const html = require("./node_modules/prettier/plugins/html");
const markdown = require("./node_modules/prettier/plugins/markdown");
const postcss = require("./node_modules/prettier/plugins/postcss");
const yaml = require("./node_modules/prettier/plugins/yaml");
/* Takes in code string and language and attempts to reformat using Prettier API */
async function formatCode(code, language) {
try {
let parser = language;
return await prettier.format(code, {
organizeImportsSkipDestructiveCodeActions: true,
parser: parser,
plugins: [typescript, babel, estree, html, markdown, postcss, yaml],
tabWidth: 2,
useTabs: true,
semi: true,
singleQuote: false,
trailingComma: "none",
bracketSpacing: true,
arrowParens: "always",
});
} catch (error) {
console.error("Error formatting code:", error);
return code;
}
}
/* Grabs the code chunk from the HTML, parses the code (text) and language from it, and calls formatCode() */
setTimeout(async () => {
for (const code of document.querySelectorAll("code")) {
const language = code.className.replace("language-", "");
if(language != null && language.trim() !== "") {
code.parentElement.style.setProperty("--before-content", `'${language.toUpperCase()}'`);
code.innerText = await formatCode(code.innerText, language);
}
}
Prism.highlightAll();
}, 1000)
build.js
const browserify = require('browserify');
const fs = require('fs');
browserify(['format.js'])
.transform('babelify', { presets: ['@babel/preset-env'] })
.bundle((err, buf) => {
if (err) {
console.error(err);
} else {
fs.writeFileSync('bundle.js', buf);
}
});
package.json
{
"name": "agility-code-chunks",
"version": "1.0.0",
"description": "web extension to format code chunks in agility",
"main": "popup.js",
"scripts": {
"build": "node build.js",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "nop990",
"license": "MIT",
"devDependencies": {
"@babel/preset-env": "^7.25.2",
"babelify": "^10.0.0",
"browserify": "^17.0.0",
"google-java-format": "^1.3.2",
"prettier": "3.2.5",
"prettier-plugin-java": "2.6.4",
"prettier-plugin-organize-imports": "4.0.0"
},
"dependencies": {
"java-parser": "^2.3.2"
}
}