如何在浏览器中运行 prettier 来格式化代码?例如ReactJs 应用程序内部

2023-11-29

我的 ReactJS 应用程序中有代码编辑器(CodeMirror v6),并且希望使用 Prettier 格式化代码后期编辑。如何在浏览器中运行得更漂亮?

寻找类似的东西:

prettier.format(code)


这是经过一些测试并失败后发现的:

Prettier 有一个独立的包,它不需要 NodeJs 的任何东西。

它有一些限制:

它仅格式化代码,不支持配置文件、忽略文件、CLI 使用或自动加载插件。https://prettier.io/docs/en/browser.html

也在里面prettier.format所选插件和解析器必须手动设置。

在index.html中,添加独立的prettier + babel解析器,这足以从全局变量运行prettier:

// JS script, should be run after <script> tags load
const formatted = prettier.format("console.log( 'ok')", {
  parser: "babel",
  plugins: prettierPlugins,
});
console.log(formatted);
<!-- HTML -->
<script src="https://unpkg.com/[email protected]/standalone.js"></script>
<script src="https://unpkg.com/[email protected]/parser-babel.js"></script>

enter image description here

prettierPlugins也从这些脚本标签中暴露出来,它不是我的自定义代码。

enter image description here enter image description here

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在浏览器中运行 prettier 来格式化代码?例如ReactJs 应用程序内部 的相关文章

  • 什么时候使用useEffect?

    我目前正在查看 React 文档的 useEffect 示例 import React useState useEffect from react function Example const count setCount useState
  • 让浏览器缓存我的动态 PHP 样式表

    我想在 PHP 文件 styles php 中创建一个样式表 以便样式表变得动态 具体取决于请求的用户 对于每个单独的用户来说 样式表是不变的 因此应该缓存在他的客户端浏览器上 我读过 您可以通过设置内容类型和缓存控制等标头来实现此目的 但
  • React:如何从 Material-UI TextField 组件获取值

    我有一个小型应用程序 其中包含 Form 组件 SubmitButton 组件和我的父组件 App js 当用户单击提交按钮时 我想获取表单组件上 3 个字段的值并将它们传递给我的 App js 组件 我不确定如何使用触发事件onClick
  • 将 React 构建输出合并到单个 js 文件中

    这类似于这个问题 https stackoverflow com questions 49123097 generate single physical javascript file using create react app然而 这两
  • 启动 Firefox 并等待其关闭

    Question 我想启动 Firefox 网络浏览器作为访问特定网站的过程 然后等到它关闭 一种特殊情况是浏览器可能已经打开并正在运行 因为用户可能已经访问过某个网站 在这种情况下 浏览器可能会在现有窗口中打开一个新选项卡 并且新启动的进
  • 如何在 React Native 中做最后一个子选择器?

    我使用Scrollview 里面有3个视图 我在它们之间留了一个间隙 例如 marginRight 5 但我不希望在最后一个视图中出现这种间隙 这就是为什么我需要这种东西 你能帮助我吗 应用这个你就可以实现你在寻找什么 const styl
  • 如何从代码后面的 Blazor WebAssembly 项目打开浏览器窗口/选项卡:

    我正在将 UWP 应用程序转换为托管 ASP NET Core 的 Blazor WebAssembly 我的标记代码位于 Index razor 中 后面的代码位于 Index razor cs 中 在 UWP 项目中 我通过 oncli
  • 多个 BrowserRouter 显示多个组件

    我想用basename来分离组件 我也有全局 url 所以我最终使用了 3 个BrowserRouters 这会导致显示多个内容 如果我去 fruit search 它会显示以下内容Homepage组件和FruitSearch成分 我究竟如
  • 用于检查属性是否适用的 React 函数是什么? [复制]

    这个问题在这里已经有答案了 基于此问答 React 包装器 React 无法识别 DOM 元素上的 staticContext 属性 https stackoverflow com questions 49358560 react wrap
  • 如何发出HTTP请求将文件从reactjs上传到googledrive?

    我对文档有点困惑 我做了我的研究 资源很少 也许有人可以帮助我 我正在使用 CRNA create react app 我有一个按钮 可以使用 URI 将文件上传到 Google Drive 我已经有了 API 密钥 客户端 ID 启用 A
  • 如何在 Redux Toolkit 中订阅 React 组件之外的状态?

    我有以下切片 export const authenticationSlice createSlice name authentication initialState isFirstTimeLoading true signedInUse
  • React Native Tab 视图的高度始终等于最高选项卡的高度

    介绍 我有一个 FlatList 它在页脚中呈现一个选项卡视图 此选项卡视图允许用户在一个 FlatList 或另一个 FlatList 之间切换 所以 最后这些是同级 FlatList Problem 第一个 FlatList A 的高度
  • Material UI Drawer设置背景色

    如何简单设置Material UI的背景色Drawer 尝试过这个 但不起作用
  • 如何将 Redux DevTools 扩展添加到我的 React-Redux 商店?

    我正在尝试将 Redux DevTools Chrome 扩展添加到我的 redux 商店 并在此处进行描述 http extension remotedev io http extension remotedev io 这是我的商店 le
  • 如何在React中使用material-UI在onFocus事件的Textfield中选择部分文本?

    我在反应应用程序中有一个带有材质 UI TextField 的模态表单 我有一个默认值 es 一个文件 加载元素时我只会选择文件名而不选择扩展名 我在标签 TextField 中执行了以下代码
  • 如何在浏览器控件中隐藏 HtmlElement

    我有一个 webbbrowser 控件 可以导航到包含图像的页面 我想从我的网络浏览器中隐藏或删除该图像 我尝试在 DocumentCompleted 事件上设置以下方法 但没有成功 webBrowser1 Document GetElem
  • 反应超出最大调用堆栈大小

    如果用户未登录 我尝试将用户重定向到 TrapPage 这是我的代码 function requireAuth nextState replace if auth loggedIn replace pathname trap export
  • Material UI + Nextjs:抽屉

    我在 React Nextjs 项目中遇到了 Material UI Drawer 的实现问题 问题是 当我在导航器中重新加载页面时 抽屉和应用栏的样式崩溃 当我重新加载服务器时 这种情况没有发生 仅在页面重新加载时发生 目前我不知道我必须
  • 在 React 应用程序中使用 API 密钥

    我有一个使用两个第三方服务的 React 应用程序 该应用程序已开始使用react create app 这两项服务都需要 API 密钥 通过脚本标签提供一个密钥 如下所示 另一个 API 密钥在请求中使用 我将实际密钥存储在常量中并使用它
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果

随机推荐