首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我有一个用flutter编写的简单代码。现在我想格式化它。我用的是VSC,我安装了更漂亮的

代码插件Prettier,但是我不知道如何在VSC中配置它。请问应该怎么做?

在VSC中配置Prettier插件的步骤如下:

  1. 打开VSC,点击左侧的扩展按钮(或按下Ctrl+Shift+X)打开扩展面板。
  2. 在搜索框中输入"Prettier - Code formatter",找到并安装该插件。
  3. 安装完成后,点击左下角的齿轮图标,选择"设置"(或按下Ctrl+,)打开用户设置。
  4. 在用户设置中,搜索框中输入"format on save",找到"Editor: Format On Save"选项,勾选该选项,表示在保存文件时自动格式化代码。
  5. 在搜索框中输入"prettier config",找到"Prettier: Config Path"选项,点击"编辑 in settings.json"链接。
  6. 在settings.json文件中,可以配置Prettier的相关设置。例如,可以指定Prettier的配置文件路径,以及其他格式化选项。以下是一个示例配置:
代码语言:txt
复制
{
  "editor.formatOnSave": true,
  "prettier.configPath": ".prettierrc",
  "prettier.useEditorConfig": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all"
}

在上述示例中,"editor.formatOnSave"表示在保存文件时自动格式化代码,"prettier.configPath"指定了Prettier的配置文件路径为项目根目录下的".prettierrc"文件,"prettier.useEditorConfig"表示不使用.editorconfig文件中的配置,"prettier.singleQuote"表示使用单引号,"prettier.trailingComma"表示在对象和数组字面量中使用尾随逗号。

  1. 保存settings.json文件,配置即生效。

至此,你已经成功配置了VSC中的Prettier插件。在保存文件时,Prettier将自动格式化你的Flutter代码,使其更加漂亮和一致。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

20分钟,简单Python代码创建了一个完整区块链!想学吗?

接下来,将用不超过50行 Python 代码创建一个简单区块链,并给它取了一个名字叫SnakeCoin。以此帮助大家理解区块链。 一起动手创建一个极简区块链 首先,我们先对区块链进行定义。...区块链基本框架就这样搭建出来了。考虑到我们要做「区块链」,因此,我们还需要往链上加区块。之前提到过,其中每一个区块需要包含链上前一个区块哈希值。...下面,我们就简单一点,通过创建一个函数,让返回一个创世区块。这个区块索引为0,此外,它所包含数据以及前一个区块哈希值都是一个任意值。...实际上SnakeCoin不存在。我们需要挖掘新SnakeCoin区块把创造出来,一个区块被挖出后,一个SnakeCoin就会产生出来,作为奖励给与挖矿者。...运行完snakecoin代码后,在终端里运行以下命令(假设你cURL)。 1. 创建一个交易。

54210

一段简单代码讲述一个程序员悲伤故事?要讲十个!

1、刚开始学编程时候,课堂上老师说的话必须尊为圣旨,老师说“写好注释一个工作习惯”,所以就有了下面的代码,请注意看那一组组工工整整、清清楚楚123456……花去了比程序本身还要多时间。...1、刚开始学编程时候,课堂上老师说的话必须尊为圣旨,老师说“写好注释一个工作习惯”,所以就有了下面的代码,请注意看那一组组工工整整、清清楚楚123456……花去了比程序本身还要多时间。...后来秉持着此种良好注释习惯,工作了不到一个月,就被老板约谈了,约谈理由竟然工作效率低?!找谁说理去?...5、悲剧,做上面这个重构的人居然不知道还有*kwargs可用,世界上最遥远距离莫非就是你和下班之间距离? ?...7、你认为被炒鱿鱼最惨?不不不,这位发诈骗邮件小哥显然悲剧一些,显然他位新手,对待代码态度不够认真,否则怎么会引用了本地文件并且包含了自己名字还浑然不觉? ?

46420

吐血推荐珍藏Visual Studio Code插件

眼看这段经历要告一段落了,今天就来给大家分享一下常用一些VSC插件。 VSC插件安装方法很简单,只需要点击左侧最下方插件栏选项,然后就可以搜索你想要插件了。 ?...而Auto Import帮我解决了这个大问题,它可以自动识别,解析和增加一些对应包。就可以继续做ctrlCV工程师了。 ?...Indent-Rainbow Prettier — Code Formatter Prettier插件用来格式化代码。...符合代码规范代码可以说是一个工程师脸面,而Prettier可以说是专门帮你维护脸面的插件。,你在写代码时就可以肆无忌惮了,只需要在写完以后按一下对应快捷键。你代码就会马上变漂亮。 ?...虽然ST3也非常强大,可以用来写JS代码,但是觉得它还是比不上专业IDE,所以我喜欢把ST3当作「记事本」来用,如果你已经比较习惯了ST3快捷键,并且不想因为使用VSC而改变这个习惯,那么就可以使用这个插件

89320

2022-02-07:flutter weekly第5期

每周分享全球精彩文章、教程、插件和视频,如果您觉得有用,请不要吝啬您掌声、评论、赞赏或任何其他您想给予认可。 如果你任何关于 Flutter 或 Dart 消息想要与我分享,请联系。...该教程涵盖了一个完整app工程,其中状态管理GetX。地址:https://www.youtube.com/watch?...#CustomPainter 一个比Widget常用底层widget。虽然它不是真正widget,但是继承了 CustomPainter Object....所以你能够通过使用Canvas 和定义尺寸。通过这个教程,你可以实现很多超级漂亮自定义组件。地址:https://www.youtube.com/watch?...v=gggZvD1pxJU 插件 pigeon 代码生成工具,能够快速帮你类型安全原生代码flutter代码编写插件好帮手。

48620

用了这 7 个 VS Code 插件,写一辈子代码

正是由于 Visual Studio 市场上繁荣,太多扩展,让你目不暇接,因此将介绍 7 个让你事半功倍插件,这些插件让编写代码更加轻松。...这个一个安装量超过一百万插件,非常受欢迎,已被许多开发人员使用。已经这个插件很长时间了,觉得非常地帮,极大地提高了效率。 发送请求从未如此简单。...这个插件最好部分所有选项都是完全可自定义,例如缩进大小以及文件是否应以换行结尾。如果你使用多种编程语言编写代码,Beautify 可以根据每种编程语言自定义选项来帮助你格式化代码。...由于你在 VS Code 中花费了大量时间,因此一个漂亮令人舒适主题是非常重要。 Night Owl 主题许多开发人员使用漂亮主题之一。...根据对该主题描述,适合那些喜欢在深夜编写代码的人。 7.

1K30

Flutter —快速开发IDE快捷方式

我们花了一些时间来找出捷径,也许您不必再找出这些捷径,因为已经做了这些;并且整理了所有这些捷径,这些捷径可以在Flutter中更快,流畅地进行开发。 PS。...只需按Ctrl + Alt + L即可修复缩进并重新格式化代码。 查看您UI大纲 我们大多数小部件树上只有一个孩子。他们自己孩子树木,还有更多孩子。...当您打开时,看起来像这样: 现在,您可以清楚地看到哪个窗口小部件,它们在用户界面中排列方式以及哪些窗口小部件具有其他子窗口小部件。十分简单!...将代码提取到方法中 Flutter Outline一个非常有用工具。...也许您通常是手动删除它们,但由于我是为了简化您生活,因此这里一个非常漂亮键盘组合:Ctrl + Alt + O 什么都不记得了 如果您像这里Filip Hracek一样有时会忘记他快捷方式,

2.1K20

用了这 7 个 VS Code 插件,写一辈子代码

正是由于 Visual Studio 市场上繁荣,太多扩展,让你目不暇接,因此将介绍 7 个让你事半功倍插件,这些插件让编写代码更加轻松。...这个一个安装量超过一百万插件,非常受欢迎,已被许多开发人员使用。已经这个插件很长时间了,觉得非常地帮,极大地提高了效率。 发送请求从未如此简单。...这个插件最好部分所有选项都是完全可自定义,例如缩进大小以及文件是否应以换行结尾。如果你使用多种编程语言编写代码,Beautify 可以根据每种编程语言自定义选项来帮助你格式化代码。...由于你在 VS Code 中花费了大量时间,因此一个漂亮令人舒适主题是非常重要。 Night Owl 主题许多开发人员使用漂亮主题之一。...根据对该主题描述,适合那些喜欢在深夜编写代码的人。 7.

82520

AI制作应用

一种不熟悉语言和框架制作了多模态多功能移动应用程序 CrayEye,依靠现代大语言模型来编写代码,而不仅仅是代码片段,而是全部代码。...该技术对基于视觉用户体验影响不容小觑 - 曾经需要一个专门专家团队花费大量时间和资源事情,现在可以通过对多模态 LLM 简单调用以更高熟练度和细节来完成。...自从创建原生应用程序以来已经一段时间了,一直想再次尝试一下,而这种多模态多功能工具例提供了绝佳机会。...从最佳实践和工作流性能角度来看,这很有帮助,因为无需等待输出模块化拆分文件较小块。 现在,当将代码库传递给 LLM 时,由于内容位于单独模块中,需要区分不同文件/模块。...那时第一次遇到第一个重大挫折 - 在设置 Android 开发工具后,启动了 Flutter 模拟器并尝试在卓模拟器上运行应用。

5610

Flutter常见开发问题

但是 Flutter 社区中很多人喜欢代码方式,但这并不意味着无法实现拖拽。如果你完全喜欢拖拽,那么 Flutter Studio 推荐一个很棒资源,它可以帮助你通过拖放生成布局。.../ 它与基于 WebView 应用程序何不同? 简单地回答这个问题:您为 WebView 或类似运行应用程序编写代码必须经过多个层才能最终执行。...简而言之,这些文件夹整个应用程序,它们为 Flutter 代码运行奠定了基础。 为什么 Flutter 应用这么大? 如果您运行过 Flutter 应用程序,您就会知道速度很快。速度极快。...package允许您将新小部件或功能导入您应用程序。package和插件之间一个区别。包通常是纯粹 Dart 编写新组件或代码,而插件则可以使用本机代码在设备端提供更多功能。...DartFMT:dartfmt 格式化代码以保持干净层次结构和缩进。在您不小心移动了几个括号后,它会使您代码漂亮。 为什么我们将函数传递给小部件?

6.8K30

Flutter常见开发问题

简而言之,这些文件夹整个应用程序,它们为 Flutter 代码运行奠定了基础。 为什么 Flutter 应用这么大? 如果您运行过 Flutter 应用程序,您就会知道速度很快。速度极快。...如果编程新手,想从移动端开发入手,应该从 Flutter 开始吗? 这有更多两部分答案。 Flutter 非常适合编写代码,并且在相同页面上代码比 Android 或 iOS 应用程序少得多。...如果您想编写任何本机代码,您肯定需要在任一平台或两个平台上经验。 个人意见先学习一两个月 Android/iOS,然后从 Flutter 开始。 什么package和插件?...package允许您将新小部件或功能导入您应用程序。package和插件之间一个区别。包通常是纯粹 Dart 编写新组件或代码,而插件则可以使用本机代码在设备端提供更多功能。...DartFMT:dartfmt 格式化代码以保持干净层次结构和缩进。在您不小心移动了几个括号后,它会使您代码漂亮。 为什么我们将函数传递给小部件?

6.7K20

为什么 Go 最喜欢编程语言(2017)翻译

2012 年 Go 1.0 发布时,开始认真地使用这门语言,因为具有 Go 1 兼容性保证。仍然 2012 年编写代码在生产中运行,基本上没有动过。。 1....清晰 格式化 按照惯例,使用 gofmt 工具格式化代码。 程序格式化代码不是一个想法,但与其之前编程语言不同, gofmt 恰恰只支持一种规范风格。...此外,自动格式化代码审查中一个巨大时间节省,因为消除了以前可以审查代码整个维度:现在,你可以只让你持续集成系统验证 gofmt 没有产生差异。...有趣,让编辑器在保存文件时应用 gofmt ,改变了代码方式。曾经试图与格式化器所执行内容相匹配,然后让纠正错误。...现在尽可能快地表达想法,并相信 gofmt 会让变得漂亮输入例子,点击 Format )。 高质量代码 经常使用标准库(docs、source),见下文。

95430

开源项目——5种技术编写7个demo工程

android/ios/flutter/angular/java web 5种技术编写7个demo工程,有点,可以看看,github地址,https://github.com/ThinkerJack...CRUD,但是这种工作和私下学习分开学习方式对来说效果很不好,导致JAVA服务器端开发和前端开发都没有深入,其实自己现在也面临着这样问题,工作两年,java web,angualr,flutter...提高自己生产力,就是让自己值钱,接下来一年也会朝着专精一门方向发展,除却计算机基础知识学习外,在flutter和android上提高自己技术深度。争取在工作三年之际给自己一个满意答案。...这两年间自己大脑里已经了一张图谱,在面对新知识时候,会敏锐发现哪些知识和之前学知识类似,并将他们关联起来,哪些需要重点学习新概念,哪些不太重要知识。...项目分五个文件夹: 动画组件 工作中用到或是一些其他有趣组件 布局相关组件 学习FLutter编写练习或是测试代码 工具类,后面会单独写成一个项目 2.环境简介 语言:Dart fLutter版本

1K00

「 工具篇 」VS Code

背景 之前部门想要统一代码编辑器, 最后决定统一 VS Code,需要一篇比较系统介绍文章。 刚好之前也有写这篇文章想法,于是就主动报了名。...Visual Studio Code VSC 前身微软基于云端编辑器项目:Monaco 编辑器,作为微软云服务一部分,提供在线编辑源代码能力。 ?...Erich Gamma 由于云端编辑器种种限制,和微软近年来对Windows外平台态度转变,微软决定由扩展开发为一个全平台通用代码编辑器。...TypeScript VSC 主要代码都是 TypeScript 编写,目前 VSC 核心有 1100 多个 TS 文件,TypeScript 语言优势为多次重构提供了保障。...所以说了核心编辑器极速体验,加上良好扩展能力才成就了 VSC。 语言支持 VSC 制订了一套完善语言支持体系,方便支持新编程语言。 一个代码编辑器需要哪些功能来支持一种新语言?

2.9K30

Flutter为什么使用Dart?

以下一位移动应用程序开发人员对Flutter 热重载评价: 测试热重载,所以我改变了颜色,保存修改,结果……就喜欢上了❤! 这个功能真的很棒。...当我部署代码并花费很长时间时,分心了,做了其他事情,当我回到模拟器 / 设备时,就忘了测试内容。什么比花 5 分钟将控件移动 2px 更令人沮丧?Flutter,这不再存在。...这是Dart编写简单Flutter视图: Center(child: Column(children: [ Text('Hello, World!')...表面看来,这也是反应。使用视觉工具进行布局难道不是一件容易事。代码编写各种约束逻辑会不会使事情变得过于复杂? 结果不然。天啊,简直让大开眼界。 答案第一部分上面提到热重载。...他们结论: 招人变得容易多了。无论他们来自 Web、iOS 还是 Android,我们现在都希望接受最佳人选。 现在我们拥有 3 倍工作效率,因为我们所有的团队都集中在一个代码库上。

1.4K20

开源无止境,Flutter会成为跨平台开发领域里新搅局者吗?

于潇:个人认为现在移动平台软件开发行业一个精彩纷呈时代。与我刚开始进入这个行业时相比,卓和iOS移动软件数量已在它们各自软件商店里增长了八倍和四倍。...在过去这几年,极具想象力创意和创新思维如雨后春笋一般涌现在移动平台软件领域。几年前绝对无法想象现在的人们只需要一个手机就可以出门。...于潇:简单来讲,Flutter谷歌创造一套帮助大家用最快速度创造品质,表达力,原生移动体验SDK方案。...我们看到市面上其实跨平台框架种类很多,您觉得Google 这次推出Flutter优势在哪里? 于潇:现在市面上有许多很好跨平台框架。 但我们目标其实简单一些:创造最好移动软件开发方法。...反之,如果每一个组件背后都需要跟一个沉重HTML DOM部件,或者卓或iOS组件搭称的话,创作出一套轻巧,多层次UI组件会很难。

88310

前端开发工具总结

- 另外一款搭建PC网页UI库,越弄越好了 主要说上面一些,具体一些vue插件可以从下面这个链接找: Vue插件集合 React 因为平时react比较少,希望小伙伴在评论中进行补充,然后再添加进来...antd-pro - antd 阿里官方解决方案,拉了代码就可以,非常方便 其他小伙伴们补充一下吧,后续加进来,非常感谢。...社区中文资源 - 会有很多Flutter开发资源 electron - 跨终端开发,可以写桌面应用 Node Mongoose - 让 NodeJS 容易操作 Mongodb 数据库...koa - 强烈推崇,next洋葱圈机制非常好用 pm2 - 一个带有负载均衡功能 Node 应用进程管理器 supervisor - 监控 Node 代码,自动重启...,各种旅行漂亮照片,还有他个人介绍 翁天信博客 - 他官网中可以找到他博客地址,但是有点不显眼,所以就列出来了 surmon - 不知道怎么称呼,但是一个很牛 B 的人,点开博客就知道了

2.6K21

打造前端瑞士军刀,为你开发路上披荆斩棘

UI库,越弄越好了 主要说上面一些,具体一些vue插件可以从下面这个链接找: Vue插件集合 React 因为平时react比较少,希望小伙伴在评论中进行补充,然后再添加进来。...antd-pro - antd 阿里官方解决方案,拉了代码就可以,非常方便 其他小伙伴们补充一下吧,后续加进来,非常感谢。...pm2 - 一个带有负载均衡功能 Node 应用进程管理器 supervisor - 监控 Node 代码,自动重启 socket.io - 预计 Node 实时框架 聊天室、页游等对实时性高要求较适用...,各种旅行漂亮照片,还有他个人介绍 翁天信博客 - 他官网中可以找到他博客地址,但是有点不显眼,所以就列出来了 surmon - 不知道怎么称呼,但是一个很牛 B 的人,点开博客就知道了...CSS 揭秘 - 讲 CSS 使用技巧 ES6 标准入门(第 3 版) 编写可维护 JavaScript - 红皮书作者写,主要是 JS 编码规范,代码风格,写出一些让后续开发者能看懂代码

1.2K11

2022年为什么要使用Flutter构建应用程序?

这里给大家顺便带一下,之前写过一篇文章你想好,如何为你应用做推广了吗?这可能由于其漂亮用户界面,经过深思熟虑用户体验或完美的可用性。..."FlutterGoogleUI工具包,用于从单个代码库为移动,Web和桌面构建美观,可以应用程序。 Flutter一个跨平台框架,使开发人员能够从单个代码库在不同平台上编程。...但是,一件事肯定,那就是:跨平台将继续存在。 这也是2022年为什么要学习Flutter理由 单个代码库,单个技术栈。...因此,再次选择Flutter在您项目中有利弊。 在本文中,提供有关信息,以便在适合您项目时进行权衡。...如果你对学习另一种技术想法,明白了。但是,请在这里继续等我,让向您展示到目前为止如何演变Flutter测试版于2018年3月推出,并于2018年12月首次上线。

1K30

Visual Studio Code写Node.j

介绍 vsc宣传语一个运行于 Mac OS X、Windows和 Linux 之上,针对于编写现代 Web 和云应用跨平台源代码编辑器。 按vsc特别适合来作为前端开发编辑器。...智能提示 因为之前微软推出了typescript语言,结合tsd文件,visual studio写typescript代码相当爽,智能提示功能非常nb。 这个功能理所应当也被vsc继承了。...从vsc发布后,就一直用它写代码,也是用它来调试node.js代码。...使用方法也很简单,步骤如下: 打开要调试文件,按f5,编辑器会生成一个launch.json 修改launch.json相关内容,主要是name和program字段,改成和你项目对应 点击编辑器左侧长得像蜘蛛那个按钮...vscatom-shell(现在叫electron)写,这玩意和node-webkit(现在叫nw.js)一样,都是把node.js和chrome结合起来工具,所以可以这么使用。

1K130
领券