为什么prettier不允许我将函数参数分成多行？

Prettier是一个流行的代码格式化工具，它旨在通过自动化代码格式化的方式提高代码的可读性和一致性。Prettier的设计理念是尽可能减少代码格式化的配置选项，以减少开发者之间的个人偏好和团队之间的争议。

在函数参数分行的问题上，Prettier选择了不允许将函数参数分成多行的方式。这是因为函数参数分行会导致代码的可读性下降，增加代码的复杂性，并且可能引发一些潜在的问题。

首先，将函数参数分行可能会导致代码的可读性下降。当函数参数分行时，参数之间的关系变得不明确，阅读代码时需要不断地跳转到下一行来查看完整的参数列表。这增加了代码的阅读难度，尤其是对于那些不熟悉代码的人来说。

其次，函数参数分行会增加代码的复杂性。当参数分行时，需要额外的缩进和换行符来表示参数的层次结构，这使得代码变得更加冗长。此外，参数分行还可能导致代码中出现更多的冲突和合并问题，特别是在多人协作的项目中。

最后，函数参数分行可能引发一些潜在的问题。例如，当参数分行时，可能会出现参数顺序的混乱或遗漏，从而导致代码逻辑错误。此外，参数分行还可能导致代码的一致性问题，不同的开发者可能会使用不同的分行方式，使得代码风格不统一。

总结来说，Prettier不允许将函数参数分成多行是为了提高代码的可读性、简化代码的复杂性，并避免潜在的问题。虽然这种方式可能不符合个别开发者的偏好，但它有助于提高团队合作的效率和代码的可维护性。

腾讯云相关产品和产品介绍链接地址：

腾讯云函数计算（云原生无服务器计算服务）：https://cloud.tencent.com/product/scf
腾讯云云数据库 MySQL 版（关系型数据库服务）：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（分布式文件存储服务）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（基于区块链技术的一站式服务）：https://cloud.tencent.com/product/tbaas
腾讯云人工智能（AI能力服务）：https://cloud.tencent.com/product/ai

相关·内容

介绍16个让你的代码变漂亮的属性

Dear，大家好，我是“前端小鑫同学”，长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～写作背景：做前端开发很久了，但是每次都依赖脚手架或开源的代码模版的统一风格来编写代码，碰上不喜欢的又搞不清楚怎么调整...API：jsxSingleQuote 参数类型：bool 默认值：false Trailing Commas 介绍和说明：在多行以逗号分割的句法中尽可能补充尾行逗号。...all 尽可能补充，包括函数参数、函数调用，支持TS Bracket Spacing 介绍和说明：是否在对象属性与大括号之间填充空格。...前提：非自结束标签、HTML多行属性（HTML, JSX, Vue, Angular） API：bracketSameLine 参数类型：bool 默认值：false Arrow Function Parentheses...介绍和说明：单个参数的箭头函数使用括号。

9382 0

前端规范

主要针对vue2.0~ 其实我觉得vue2.0的options的写法是比较清晰的，在vue3.0去除了这些写法就需要一定的规范去让各个模块划分清晰一些，往react靠了，未来的趋势可能就是函数化编程，所以对于把控可维护性这块也需要去跟进...bracketSpacing: true, // 在对象字面量声明所使用的的花括号后（{）和前（}）输出空格 arrowParens: 'avoid', // 为单行箭头函数的参数添加圆括号，...参数个数为1时可以省略圆括号 parser: 'babylon', // 指定使用哪一种解析器 jsxBracketSameLine: true, // 在多行JSX元素最后一行的末尾添加 >.../** * 多行注释 * / 减少嵌套确定条件不允许时，尽早返回。...，参数个数为1时可以省略圆括号 // parser: 'babylon', // 指定使用哪一种解析器 jsxBracketSameLine: true, // 在多行JSX元素最后一行的末尾添加

7223 0

从 ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验

为什么要使用它？如何与 ESLint 配合使用？ EditorConfig 又是什么？如何使用？...在 Vue 项目中的实践上面把 ESLint 的几乎所有的配置参数和校验方式都详细的介绍了一遍，但是如果想在项目中落地，仅仅靠上面的知识还是不够的。下面将细说如何在 Vue 中落地代码校验。...Prettier 是什么？ 为什么有了 ESLint，还需要引入 Prettier 呢？它两之间有什么区别？如何配置 Prettier？ Prettier 如何和 ESLint 结合使用？...JSX 元素的最后一行 arrowParens: 'avoid', // 当箭头函数中只有一个参数的时候可以忽略括弧 vueIndentScriptAndStyle...然后可以通过命令来格式化代码： # 将格式化当前目录及子目录下所有文件 npx prettier --write .

2.3K2 0

“有意见的”代码格式化工具 Prettier 详解

Prettier 支持多种编程语言，包括 JavaScript、TypeScript、HTML、CSS、JSON、Markdown 等等。为什么使用 Prettier？...trailingComma: 在多行结构中添加尾随逗号，可选值有 "none", "es5", "all"。bracketSpacing: 在对象文字中的括号之间添加空格，默认为 true。...arrowParens: 在箭头函数只有一个参数时，使用括号，默认为 "always"。另一个选项是 "avoid"。...分目录运行：将 Prettier 运行在特定的目录或文件上，而不是整个项目。...我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

3991 0

花十分钟的时间武装你的代码库

eslint 和 prettier 配置我的项目是 react 项目，下面是我进行的配置。...字段中配置，这里我配置成了独立的文件，以便后期维护。..., //禁止在正则表达式中使用控制字符 'no-debugger': 2, //禁用 debugger 'no-dupe-args': 2, //禁止 function 定义中出现重名参数.../禁止正则表达式字面量中出现多个空格 'no-sparse-arrays': 1, //禁用稀疏数组 'no-unexpected-multiline': 1, //禁止出现令人困惑的多行表达式...'object', 'boolean', 'number', 'string', 'function','symbol')进行比较 'no-case-declarations': 1, //不允许在

2.5K3 0

熬夜准备的一个React项目升级Vite的指南

：把跟webpack强关联的插件&技术栈解耦，任何时候，跟一个第三方工具&环境强依赖，都不是一件好事，这一点，做过重型系统部署的架构师，相信都有这个感触将项目中除了import引入方式的，全部替换成通过...,ts4.x版本，如果需要降级，请你安装指定依赖) 脚手架说明：通过husky在每次git commit 时候使用prettier统一美化代码，再通过eslint进行代码检测，最终使用commitlint...'no-const-assign': 'error', //不允许改变用 const 声明的变量 'no-dupe-args': 'error', //禁止在 function 定义中出现重复的参数...'no-dupe-class-members': 'error', //不允许类成员中有重复的名称 'no-dupe-keys': 'warn', //禁止在对象字面量中出现重复的键...(需要多行时用\n) 'no-native-reassign': 'warn', //禁止重新分配本地对象 'no-obj-calls': 'warn', //禁止将全局对象当作函数进行调用

1.2K2 0

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

大家好，我是杨成功。本文从代码规范，代码检查，代码格式化，以及编辑器自动化实现的方向，介绍代码规范统一在我们团队的实践应用。...为什么需要代码规范？...那为什么要统一呢？统一的好处有很多。比如我们统一规定：命名变量用下划线，命名方法用小驼峰。那么在团队协作时，大家看到下划线就知道这是一个变量，看到小驼峰就知道这是一个方法。...>放置在最后一行的结尾，而不是另起一行（默认false） "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid） } 定义好配置后，我们在...因为我们上面配置了默认格式化程序为 Prettier，现在又配了保存时格式化，相当于将文件保存和 prettier 命令连接了起来。

1K2 0

将React项目从webpack升级到Vite

webpack迁移到vite,最先要解决的事情：把跟webpack强关联的插件&技术栈解耦，任何时候，跟一个第三方工具&环境强依赖，都不是一件好事，这一点，做过重型系统部署的架构师，相信都有这个感触将项目中除了...脚手架说明：通过husky在每次git commit 时候使用prettier统一美化代码，再通过eslint进行代码检测，最终使用commitlint提交信息是否符合要求，以此保证代码质量这几十条规则...'no-const-assign': 'error', //不允许改变用 const 声明的变量 'no-dupe-args': 'error', //禁止在 function...定义中出现重复的参数 'no-dupe-class-members': 'error', //不允许类成员中有重复的名称 'no-dupe-keys': 'warn',...(需要多行时用\n) 'no-native-reassign': 'warn', //禁止重新分配本地对象 'no-obj-calls': 'warn', //禁止将全局对象当作函数进行调用

3K3 0

prettier使用指南（包含所有配置项）

', // 9.object对象里面的key和value值和括号间的空格(bracketSpacing: ) bracketSpacing: true, // 10.jsx标签多行属性写法时...，尖括号是否另起一行(jsxBracketSameLine: ) jsxBracketSameLine: false, // 11.箭头函数单个参数的情况是否省略括号，默认always...module.exports = { semi: false, singleQuote: true, } 关于js使用单引号的好处，为什么不用双引号首先，双引号其实是c语言（类c++的java...其他默认的配置符合我使用习惯的也有可以讨论的：关于tab用几个空格的讨论我选择用两个空格。一般两个空格就是最小的缩进了，2个空格和4个空格应该是主流的两种。在前端项目里面一般是两个空格。...有以下的原因吧： js语言回调函数之类嵌套的场景比较多，如果用4空格缩进会占用过多的空间，2空格就比较紧凑。

8.9K4 0

硅谷甄选运营平台

我要传递多个参数在vue3框架click、dbclick、change(这类原生DOM事件),不管是在标签、自定义标签上...当点击按钮的时候，事件回调内部调用$emit方法去触发自定义事件,第一个参数为触发事件类型，第二个、三个、N个参数即为传递给父组件的数据。...--作用域插槽将数据回传给父组件--> </div...'error' : 'off', 'no-unexpected-multiline': 'error', // 禁止空余的多行 'no-useless-escape': 'off', /...有了eslint，为什么还要有prettier？

951 0

前端反卷计划-组件库-01-环境搭建

我是程序员库里。今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。...以下是前端反卷计划的内容：图片图片目前这些内容持续更新到了我的学习文档中。感兴趣的欢迎一起学习！...,安装 eslint vscode插件执行lint命令进行检测图片配置prettier安装插件pnpm i prettier eslint-config-prettier eslint-plugin-prettier..."reduxjs", "uparrow" ]}可以修改自己想要的配置，在根目录创建.prettierrc.js，在这个文件进行配置module.exports = { // 箭头函数只有一个参数的时候可以忽略括号...: false, // 使用单引号 singleQuote: true, // 缩进 tabWidth: 2, // 使用 tab 缩进 useTabs: false, // 后置逗号，多行对象

2463 0

如何制定企业级代码规范与检查

为什么 Prettier 和 ESLint 冲突？Prettier 原理？...函数接受一个 context 对象作为参数，里面包含了例如可以报告错误或者警告的 context.report()、可以获取源代码的 context.getSourceCode() 等方法，可以简化规则的编写...，按照我说的做。...否则你就别用我，硬着头皮用就会处处不爽！要解决的问题使用 Prettier 如何避免与 ESLint 和 TSLint 的格式化冲突?...eslint-plugin-prettier：将 prettier 作为 ESLint 规范来使用。

2K2 0

深度讲解TS：这样学TS，迟早进大厂【21】：代码检查

如果没有其他配置的话，则可以将规则的取值简写为数组中的第一项（上例中的 no-var）。...Prettier 的配置项很少，这里我推荐大家一个配置规则，作为参考： // prettier.config.js or .prettierrc.js module.exports = { //...这里我推荐使用 AlloyTeam ESLint 规则中的 TypeScript 版本，它已经为我们提供了一套完善的配置规则，并且与 Prettier 是完全兼容的（eslint-config-alloy...为什么有些定义了的变量（比如使用 enum 定义的变量）未使用，ESLint 却没有报错？§ 因为无法支持这种变量定义的检查。...，但是又必须传入第一个参数，这就会报错了§ 第一个参数以下划线开头即可，参考 https://github.com/Microsoft/TypeScript/issues/9458

2.6K2 0

快速上手Vue开发：Prettier代码格式化配置详解

一、简介 Prettier，前端代码格式化工具。...useTabs: false, // 在语句末尾添加分号，默认true semi: true, // 使用单引号而不是双引号，默认false singleQuote: false, // 多行时尽可能打印尾随逗号...es5|none|all>，默认es5 trailingComma: "none", // 对象字面量中括号之间的空格，默认true bracketSpacing: true, // 将...> 多行元素放在最后一行的末尾，而不是单独放在下一行，默认false bracketSameLine: true, // (x) => {} 箭头函数参数只有一个时是否要有小括号，可选值<always

1.3K1 0

Prettier看这一篇就行了

我一向倡导的学习方式就是阅读官方文档，好的技术一定有好的文档。而阅读官方文档分成三个阶段：刚开始接触的时候，通篇阅读。对要学的东西有一个宏观认识和理解。...这篇文档就算是我在第 3 阶段之后的一篇总结，分享给大家。 1.为什么用 Prettier？代码风格最不好管理的地方在哪里？代码风格是所有程序员都要遇到的问题，不管是团队协作还是个人练习。...Prettier 说自己是一个 Opinionated code formatter，就是说：你必须认同我的观点，按照我说的做。否则你就别用我，硬着头皮用就会处处不爽！...Code-quality rules 例如 ESLint 的no-unused-vars[11]规则，不允许没用的变量定义出现。...create-prettier-eslint 另外补充一点，TSLint已经不再维护了，明年起将停止更新。

8513 0

前端工程化之 commitlint + husky 实现 git 提交规范化

// 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 在单个箭头函数参数周围加上括号...': 'error', // 不允许重新分配函数参数 'prefer-spread': 'error', // 建议使用spread语法而不是.apply（） 'prefer-arrow-callback...", "always"], // 在arrow函数参数中需要paren 'arrow-body-style': ['error', 'always'], // 在箭头函数体中需要大括号...'error', // 不允许不必要的构造函数 'no-dupe-class-members': 'error', // 不允许在类成员中使用重复名称 'no-duplicate-imports...在文件末尾只允许空一行 'no-new-wrappers': 'error', // 不允许基元包装实例 radix: ['error', 'as-needed'], // 需要基数参数

3.1K3 1

【总结】1165- 前端团队代码规范最佳实践，个人成长必备！

为什么需要代码规范？...那为什么要统一呢？统一的好处有很多。比如我们统一规定：命名变量用下划线，命名方法用小驼峰。那么在团队协作时，大家看到下划线就知道这是一个变量，看到小驼峰就知道这是一个方法。...（默认none） "bracketSpacing": true, // 对象字面量的大括号间使用空格（默认true） "jsxBracketSameLine": false, // 多行JSX中的...>放置在最后一行的结尾，而不是另起一行（默认false） "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid） } 定义好配置后，我们在...因为我们上面配置了默认格式化程序为 Prettier，现在又配了保存时格式化，相当于将文件保存和 prettier 命令连接了起来。

1.2K2 0

前端团队代码规范最佳实践，个人成长必备！

6741 0

基础|如何优雅的编写JavaScript代码

2 个) 限制函数参数数量很有必要，这么做使得在测试函数时更加轻松。...过多的参数将导致难以采用有效的测试用例对函数的各个参数进行测试。应避免三个以上参数的函数。通常情况下，参数超过三个意味着函数功能过于复杂，这时需要重新优化你的函数。...通过将 JavaScript 解析为 AST 并且基于 AST 美化和打印，Prettier 会丢掉几乎全部的原始的代码风格，从而保证 JavaScript 代码风格的一致性，你可以先感受一下。...另外 ESLint 可以和 Prettier 很好的搭配使用，参考 eslint-plugin-prettier ，以上所有的配置和文件我都整理到了这个项目里： https://github.com/ingf...这种解耦使得代码不仅泛化（generalization），而且将代码的执行过程分成两阶段，在时序上和接口上也进行了解耦。

5743 0

统一开发环境、了解配置原理（上）

typescript-eslint" ], "rules": { } } 上面这个配置表的所有字段，如果有不了解的，之前去看前面提到的两篇文章，里面都有详细的介绍，我们就不废话了，直接添加一个规则，比如不允许使用...{ 'no-sonsole': 2 } 然后我们看看有没有生效，进入到example/app.vue，到script中写一个console我们发现貌似没有报错，但是在开头却出现了这样的提示: 为什么会这样呢...的配置文件也可以是多种，具体的类型参考Configuration File · Prettier，在我们看到不同类型的文件的时候其实大同小异，都是一个提供配置参数的文件罢了。...在对象文字中的括号之间打印空格 trailingComma: 'none', //在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） arrowParens: 'avoid', //箭头函数只有一个参数的时候是否使用括号...知道这两个的包的作用了我们就对齐进行下载： pnpm i eslint-plugin-prettier eslint-config-prettier -D 并且将这这个配置规则和插件添加到我们的配置当中

1131 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云