Autoformatting Cell Source

... with prettier

jsreference

import prettier from "https://unpkg.com/prettier@2.3.0/esm/standalone.mjs";
import parserBabel from "https://unpkg.com/prettier@2.3.0/esm/parser-babel.mjs";

console.log(
  prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
    parser: "babel",
    plugins: [parserBabel],
  })
);

jstest> js #formatted

return (async fn => { // intentionally [sic] badly formatted 
const p = await import(

'https://unpkg.com/prettier@2.3.0/esm/standalone.mjs')
           
              const b = await 
          import('https://unpkg.com/prettier@2.3.0/esm/parser-babel.mjs')
const format 
= p.default.format
const babelPlugin 
= b.default


  const thisCellsSource = this.children[0].children[0].data.value


return format(thisCellsSource, { parser: "babel",plugins: [babelPlugin]})
})()

jsformattedUpdated 140.7w ago

return (async (fn) => {
  // intentionally [sic] badly formatted
  const p = await import("https://unpkg.com/prettier@2.3.0/esm/standalone.mjs");

  const b = await import(
    "https://unpkg.com/prettier@2.3.0/esm/parser-babel.mjs"
  );
  const format = p.default.format;
  const babelPlugin = b.default;

  const thisCellsSource = this.children[0].children[0].data.value;

  return format(thisCellsSource, { parser: "babel", plugins: [babelPlugin] });
})();

Implementing as a transformer !plugin see Transformers

js../plugins/transformers/prettier.jsplugintype=transformerof=prettierid=prettier

export const transformer = async ({
  node,
  src,
  codeSource,
  rawSource,
  originalSource,
}) => {
  const lines = src.split("\n");
  let [first, ...rest] = lines;
  let middle = rest.slice(0, -1);
  const [last] = rest.slice(-1);
  const body = middle.join("\n");

  const p = await import("https://unpkg.com/prettier@2.3.0/esm/standalone.mjs");
  const b = await import(
    "https://unpkg.com/prettier@2.3.0/esm/parser-babel.mjs"
  );

  const format = p.default.format;
  const babelPlugin = b.default;
  try {
    const result = format(body, { parser: "babel", plugins: [babelPlugin] });
    if (body !== result) {
      console.log("prettier transformed source", { body, result });
    }
    return [first, result, last].join("\n");
  } catch (err) {
    console.error(err);
    lit.file.message(err.message);
    return src;
  }
};

jstransformer=prettier

// make me
         // prettier
//...
                          // thanks

return async fn=>{}

Edit and save the above cell to have it automatically formatted by Prettier using the transformer !plugin implemented above.

Autoformatting Cell Source

... with prettier

Backlinks (1)