文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

你的代码好看吗

": "esbenp.prettier-vscode" }, /* prettier的配置 */ "prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth...es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验...相信每个在vscode上编写vue的都会下载 Vetur 插件，它目前是 vscode 上面最好用的一款vue插件。现在要说的是，如何使用prettier格式化vue的代码。...你没法使用类似格式化html/css/js的方式来格式化vue格式的代码，像下面这样子的： { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode...值得提一句的是，Vetur对于html文件默认使用的是 prettyhtml，但是由于prettier也可以支持html的格式化，所以我觉得统一使用prettier对全语言的格式化是比较简洁的，也希望prettier

1.9K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    一款超人气代码格式化工具prettier

    这里已vscode为例进行说明，下面的配置是我自己的对于HTML/CSS/JS/LESS文件的prettier格式化规则： { // 使能每一种语言默认格式化规则 "[html]": {..., //不让prettier使用stylelint的代码格式进行校验 "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号...相信每个在vscode上编写vue的都会下载 Vetur 插件，它目前是 vscode 上面最好用的一款vue插件。现在要说的是，如何使用prettier格式化vue的代码。...你没法使用类似格式化html/css/js的方式来格式化vue格式的代码，像下面这样子的： { "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode...值得提一句的是，Vetur对于html文件默认使用的是 prettyhtml，但是由于prettier也可以支持html的格式化，所以我觉得统一使用prettier对全语言的格式化是比较简洁的，也希望prettier

    4.4K20

    基于vite工程规范化

    中的 ESlint 扩展就会报错，无法运行这里建议为每个项目单独添加 vscode 独有的设置，也就是项目根目录中创建一个.vscode 目录，里面放置一个 settings.json 文件，这样 vscode...Prettier 如何运作prettier 扩展会读取项目根目录中的.prettierrc、.prettierrc.js 之类的配置文件，然后你在 vscode 中用 prettier 执行格式化时，会根据配置文件的要求对代码进行格式化...那么问题来着，格式化后的结果，有时跟 ESlint 的要求是不一样的，比如 ESlint 要求这个属性要换行，prettier 要求这个属性不换行。...比如它会把跟 prettier 冲突的 ESlint 规则给 off 掉，并使用自己的规则，也就是说，二选一，让你选 prettier。.../docs/options.html */export default { trailingComma: "all", // 在对象或数组最后一个元素后面加逗号（在ES5中加尾逗号） singleQuote

    47910

    使用这些配置规范并格式化你的代码

    EditorConfig 首先，我们需要一个基本的规范，例如缩进，如何换行等等。它要适用于所有的团队，适用于所有的语言，适用于所有的编辑器。 EditorConfig 能帮助我们实现这一点。...tab_width = 2; ## 设置为 lf、cr 或 crlf 以控制如何表示换行符。...trim_trailing_whitespace = true ## 设置为 true 以确保文件在保存时以换行符结束，设置为 false 以确保不以换行符结束。...想让 prettier 生效，需要我们在 VSCode 里配置： // 所有文件都使用 prettier 格式化 "editor.defaultFormatter": "esbenp.prettier-vscode...推荐不常使用的文件类型，使用 prettier 去格式化。js,json,jsx,html,css,less,vue 等这些文件，使用工程统一的规范去格式化。 所以，我觉得完全可以卸载它。

    3.1K30

    常用的一些vscode前端插件

    安装后需要进行格式化参数的配置： VSCode左下角的设置图标–》设置–》输入框中搜索settings,随便点一个 /* prettier的配置 */ "prettier.printWidth...": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, // 缩进不使用tab，使用空格..., //不让prettier使用stylelint的代码格式进行校验 "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号...习惯了之后还是很好用的 6 Auto Close Tag 自动补全结束标签 7 Auto Rename Tag 自动重命名结束标签 8 any-rule 正则插件，可以查找一些常用正则 9 ESLint...15 HTML Boilerplate 通过使用 HTML模版插件，摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

    2.5K30

    React 开发常用 eslint + Prettier vscode 配置方案

    1、安装 vscode 插件 eslint 和 Prettier 要知道 eslint 和 Prettier 所做的事情都是基于编辑器支持的，所以我们做的所有的事情基本都是做给编辑器看的，配置的所有参数配置也是为了编辑器配置的...': 0, //文件以单一的换行符结束 'no-unused-vars': [2, {'vars': 'all', 'args': 'after-used'}], //不能有声明后未被使用的变量或参数...PascalCase 'react/jsx-sort-props': 2, //强化props按字母排序 'react/jsx-uses-react': 1, //防止反应被错误地标记为未使用...'react/jsx-uses-vars': 2, //防止在JSX中使用的变量被错误地标记为未使用 'react/no-danger': 0, //防止使用危险的JSX属性...'react/no-multi-comp': 2, //防止每个文件有多个组件定义 'react/no-set-state': 0, //防止使用setState 'react

    4.2K10

    VS Code书写vue项目配置 eslint+prettier 统一代码风格

    我的主力工具是sublime，ws辅助，vscode基本很少使用（就下载安装放在冷宫），但是听说用来写vue项目还不错，就开启了一番折腾。...目标是：Eslint校验代码语法，prettier统一格式化代码，按下保存自动修复eslint错误，自动格式化代码（因为懒~） 安装vscode插件 首先，需要安装 Vetur、ESLint、Prettier...- Code formatter这三个插件，安装完重启下，防止插件不生效。...我把配置写在了工作区设置，配置如下： { //.vue文件template格式化支持，并使用js-beautify-html插件 "vetur.format.defaultFormatter.html...": "js-beautify-html", //js-beautify-html格式化配置，属性强制换行 "vetur.format.defaultFormatterOptions":

    10.7K60

    VSCode常用的插件

    Server 实时预览（推荐） vscode-icons 设置文件图标主题 Easy LESS 编译less文件 会了吧 学习单词插件 （可以使用） 1....Auto Rename Tag 修改开始标签，结束标签跟着自动变化，比较好用。 3. One Dark Pro 颜色主题 我比较喜欢的一个颜色主题 页面的效果： 4....格式化代码（vscode系统自带） 现在格式化代码的插件非常多，比如Prettier等等。...注意点： 使用live server 各位小伙伴要注意， 先用vscode 打开 文件所在的目录文件夹哦。 7. vscode-icons 设置文件图标主题 可以很清楚看到文件对用的图标。..., // 每行文字个数超出此限制将会被迫换行 "prettier.printWidth": 300, // 使用单引号替换双引号 "prettier.singleQuote": true, "prettier.arrowParens

    52620

    vscode代码整理插件_vscode安装离线插件

    Pair Colorizer（括号颜色不同，更容易看） 代码括号颜色会对应，更容易看 Easy LESS（less语法） 配置说明： 在vsCode中使用Less方法： 在vsCode..."prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, /.../ 缩进不使用tab，使用空格 "prettier.semi": true, // 句尾添加分号 "prettier.singleQuote": true, // 使用单引号代替双引号 "prettier.proseWrap...es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） "prettier.tslintIntegration": false, "terminal.integrated.allowMnemonics...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/187732.html原文链接：https://javaforall.cn

    2K30

    【前端开发之HTML】（一）认识前端和 HTML 与开发环境的搭建

    如果把一个网站比作一栋房子，前端开发就是负责装修和布置客厅、卧室、厨房的设计师：既要让房子看起来赏心悦目，又要让每个房间的使用方便顺手，比如门能顺畅开关、灯光能按需调节、家具摆放合理实用。...—— 网页的 “语言说明书” HTML 的全称是HyperText Markup Language（超文本标记语言），它不是编程语言（没有逻辑判断、循环等编程特性），而是一种 “标记语言...”—— 就像我们在文章中用 “标题”“加粗”“引用” 等格式标记文字一样，HTML 用 “标签”（Tag）标记网页中的内容，告诉浏览器 “这部分是标题”“这部分是图片”“这部分是按钮”。...（5）跨平台兼容性 VSCode 支持 Windows、Mac、Linux 三大操作系统，无论你使用什么电脑，都能获得一致的使用体验。...（4）安装 “Prettier” 插件，自动格式化代码 编写代码时，保持统一的格式（如缩进、换行、空格）非常重要，尤其是在团队协作中。

    58910

    前端开发实战深度解析：（一）认识前端和 HTML 与开发环境的搭建

    如果把一个网站比作一栋房子，前端开发就是负责装修和布置客厅、卧室、厨房的设计师：既要让房子看起来赏心悦目，又要让每个房间的使用方便顺手，比如门能顺畅开关、灯光能按需调节、家具摆放合理实用。...—— 网页的 “语言说明书” HTML 的全称是HyperText Markup Language（超文本标记语言），它不是编程语言（没有逻辑判断、循环等编程特性），而是一种 “标记语言...”—— 就像我们在文章中用 “标题”“加粗”“引用” 等格式标记文字一样，HTML 用 “标签”（Tag）标记网页中的内容，告诉浏览器 “这部分是标题”“这部分是图片”“这部分是按钮”。...（5）跨平台兼容性 VSCode 支持 Windows、Mac、Linux 三大操作系统，无论你使用什么电脑，都能获得一致的使用体验。...（4）安装 “Prettier” 插件，自动格式化代码 编写代码时，保持统一的格式（如缩进、换行、空格）非常重要，尤其是在团队协作中。

    39310

    前端架构师神技，三招统一团队代码风格

    了解了不规范的代码以及不规范代码带来的问题，作为前端架构师，我们就要思考三个问题： 如何制定规范？ 如何统一团队的规范？ 如何检测规范？...当规范成为普遍共识之后，大家按照自己的喜好使用不同的规范，逐渐形成了自己的编码习惯。在一个团队中，每个开发者往往各自有各自的编码习惯。 然而这又成为了问题。...这个工具是有的，我们都听过，就是大名鼎鼎的 ESLint ESLint 有两种能力： 检查代码质量，如是否有已定义但未使用的变量。 检查代码风格，换行，引号，缩进等相关的规范。...": 100, // 一行的字符数，超过会换行（默认80） "tabWidth": 2, // 每个tab相当于多少个空格（默认2） "useTabs": true, // 是否使用tab进行缩进...VSCode 除了轻量启动速度快，最强大的是其丰富多样的插件，能满足不用使用者各种各样的需求。 在众多插件中，ESLint 就是非常强大的一个。

    1.3K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券