开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何避免VsCode Prettier用箭头函数破坏链函数？

VsCode Prettier是一款常用的代码格式化工具，它可以帮助开发者自动调整代码的格式，提高代码的可读性和一致性。然而，在使用Prettier时，有时会出现箭头函数破坏链函数的情况。下面是一些避免这种情况发生的方法：

使用Prettier的配置文件：在项目根目录下创建一个名为.prettierrc的文件，并在其中配置Prettier的选项。可以通过设置"arrowParens"选项为"avoid"来避免箭头函数破坏链函数。例如：

{
  "arrowParens": "avoid"
}

使用ESLint：ESLint是一款常用的JavaScript代码检查工具，可以帮助开发者规范代码风格和发现潜在的问题。通过在项目中配置ESLint，并使用相关的规则，可以在代码提交前检查箭头函数是否破坏链函数。可以使用ESLint的规则配置来限制箭头函数的使用方式。
手动调整代码格式：如果Prettier无法满足特定的需求，可以手动调整代码格式来避免箭头函数破坏链函数。在编写代码时，可以遵循一些约定，如在链式调用中使用括号包裹箭头函数，或者使用普通函数代替箭头函数。

总结起来，避免VsCode Prettier用箭头函数破坏链函数的方法包括使用Prettier的配置文件、使用ESLint进行代码检查和手动调整代码格式。根据具体的项目需求和团队约定，选择适合的方法来保持代码的一致性和可读性。

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

腾讯云官网：https://cloud.tencent.com/
云开发（Serverless）：https://cloud.tencent.com/product/scf
云函数（Serverless Functions）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云存储 COS：https://cloud.tencent.com/product/cos
人工智能平台（AI）：https://cloud.tencent.com/product/ai
物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
视频处理服务（VOD）：https://cloud.tencent.com/product/vod
音视频通信（TRTC）：https://cloud.tencent.com/product/trtc
网络安全（SSL 证书）：https://cloud.tencent.com/product/ssl

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

分享一个关于this对象的编程小技巧，如何使用箭头函数避免this对象混淆？

为什么使用箭头可以呢？四因为在箭头函数中，this对象与封闭词法环境中的this保持一致。换一句话，箭头函数中的this，是定义与执行它的函数中this对象。...或者我们可以理解为，箭头函数是没有this对象的。箭头函数中的this，取决于它身处何处。那么，回顾一下，this是什么？...这是在没有开启严格模式的情况下，假如我们开启了严格模式又如何呢？...接下来我们看一看，如何用bind解决本文开始遇到的问题。...但在大多数情况下，我们使用不捆绑this的箭头函数，来避免this对象的混淆问题，是最简单省事的方法。 11月7日

1.1K3 0

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

我们在VSCode中通过文末提供的插件地址或在商店搜索即可，找下载量最大的就对了。...API：tabWidth 参数类型：int 默认值：2 Tabs：介绍和说明：是否用制表符代替空格执行缩进。...HTML, JSX, Vue, Angular） API：bracketSameLine 参数类型：bool 默认值：false Arrow Function Parentheses 介绍和说明：单个参数的箭头函数使用括号...API：vueIndentScriptAndStyle 参数类型：bool 默认值：false End of Line 介绍和说明：设置换行风格，避免不同操作系统造成的大量代码diff。...链接整理： Prettier Prettier（vscode插件）配置文件在线调试

9372 0

【JavaScript】ESlint & Prettier & Flow组合，得此三神助，混沌归太清

Prettier prettier的意思是漂亮的，但其实我觉得，“美化代码”并不是它的核心功能，它的核心功能是“统一代码规范”（当然了，是用漂亮的规范去统一哈哈）。...Prettier是完成这一丰功伟绩的功臣。 Prettier是用来规范代码风格的，一些IDE比如VScode可以给我们提供代码格式化的功能，但是这种功能仍然有限。...A,B:好，那咱就这么办如何使用Prettier 在VScode上下载Prettier扩展插件，最好把编辑器重启一下。...然后保存时就可以自动格式化了根据官网上的指示进行操作，下面这个讲的是如何从Eslint上集成Prettier Integrating with Linters · Prettier 其实一般情况下...，有VScode的Prettier插件就足够指导开发了，如果你想一次性把全部JS/JSX文件全部格式化一遍，可以这样，在根目录下运行： yarn prettier --write '.

1.1K2 0

Eslint配置

no-undef": 0, //不能有未定义的变量 - 关闭 "no-alert": 0, //禁止使用alert confirm prompt - 关闭 "arrow-parens": 0, //箭头函数用小括号括起来...VSCode 先把自带的格式化取消掉，否则两个会冲突。...的一个最佳实践就是通过配置 .vscode/settings.json 来支持自动修复 Prettier 和 ESLint 错误： { "files.eol": "\n", "editor.tabSize...": 2, "editor.defaultFormatter": "esbenp.prettier-vscode", "[jsonc]": { "editor.defaultFormatter...": "esbenp.prettier-vscode" }, "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript

2.7K1 0

Prettier格式化配置

": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode..." }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript...]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, /* prettier的配置 */..."prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false...{} 箭头函数参数只有一个时是否要有小括号。

3.2K2 1

手把手教你使用 ESLint + Prettier 规范项目代码

ESLint 是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。...插件，没有通过 ESLint 校验的代码 VSCode 会给予下滑波浪线提示，提醒他好好检查。...简单来说，不需要我们再思考究竟是用 single quote，还是 double quote 这些乱起八糟的格式问题，Prettier 帮你处理。最后的结果，可能不是你完全满意，但是，绝对不会丑。...eslint-plugin-prettier --save-dev vscode 插件安装安装 vscode 插件 ESLint 和 Prettier - Code formatter 如果希望在每次保存时自动格式化代码可以加上以下配置...false, // 末尾使用逗号 trailingComma: 'all', // 大括号内的首尾需要空格 { foo: bar } bracketSpacing: true, // 箭头函数

1.2K2 0

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

Tag (自动补全html标签) Bracket Pair Colorizer（括号颜色不同，更容易看）代码括号颜色会对应，更容易看 Easy LESS（less语法）配置说明：在vsCode...中使用Less方法：在vsCode插件管理搜索插件 Easy LESS安装，（如没安装node.js先安装一下）在项目根目录如没有.vscode目录，需要创建.vscode目录，添加一个配置文件：settings.json...– Code formatter（格式化插件）在vscode左下角图标打开设置搜索settings 点击在settings.json中编辑在里面配置 /* prettier的配置 */..."prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth": 4, // 缩进字节数 "prettier.useTabs": false, /...因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号

1.5K3 0

协调eslint和prettier，让代码书写更加流畅

eslint 对于eslint，想必大家都不陌生，是在我们日常开发中用于代码格式检查的工具，而关于eslint的详细配置，不是本文今天的重点，今天我们要说的，是如何在工程建设中灵活的使用它。...> .yml prettier的vscode插件 vscode提供了prettier的插件，让我们可以在本地编写一套prettier的配置并使用然后我们可以在VScode的setting.json...": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode...... // #在对象或数组最后一个元素后面不加逗号 "prettier.trailingComma": "all", // (x) => {} 箭头函数参数只有一个时是否要有小括号。...如果项目有prettier的配置文件，在校验的时候也会被参考进去，而本地的配置则不会被参考，vscode的插件也不会被参考。

1.5K2 0

小程序开发格式化代码ESLint、Prettier、husky、lint-stage

{json,wxml,axml,css,wxss,acss,wxml,axml,less,scss}": "prettier --config .prettierrc.js --write" } vscode...设置路径是：your_project/.vscode/settings.json { "files.associations": { "*.wxss": "css",...的 eslint "eslint.options": { // 指定 vscode 的 eslint 所处理的文件的后缀 "extensions": [".js", "...tabWidth: 2, useTabs: false, semi: false, singleQuote: true, // 对象的 key 仅在必要时用引号...大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数

2.4K2 0

【前端财富】前端工程师装机指南 (windows10)

"[shellscript]": { "files.eol": "\n" }, //控制如何处理在受信任的工作区中打开不受信任的文件 open: 始终允许不受信任的文件引入受信任的工作区..."editor.defaultFormatter": "esbenp.prettier-vscode", // 控制"转到定义"鼠标手势是否始终打开预览小部件。...]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter...: bar }" "prettier.bracketSpacing": true, // (x) => {} 箭头函数参数只有一个时是否要有小括号。...````````````````````````````````````*/ "typescript.tsdk": "node_modules/typescript/lib", // 定义匿名函数的函数关键字后面的空格处理

1.5K2 0

【分享】每个 Web 开发者在 2021 年必须拥有 15 个 VSCode 扩展

有时，你的团队成员提交的代码可能会破坏项目的其他功能，这在那段时间是有帮助的。你可以在这里找到它。 2....Prettier Code Formatter https://marketplace.visualstudio.com/items?...itemName=esbenp.prettier-vscode Prettier 是一种固执的代码格式，它使开发人员在代码格式方面的工作变得更容易。...假设我们有一个不确定是否正在执行的函数，这个扩展可以通过在执行时在调试器中暂停来帮助我们。 7....为了避免一些可能破坏应用程序的类型错误，我们使用类或接口。这个扩展可以用 JSON 数据生成一个类。因此，与其手工编写类，我们可以使用它来节省创建类的时间和负担。这个扩展支持大多数流行的语言。

1.6K1 0

你的代码好看吗

": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[...less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter...": "esbenp.prettier-vscode" }, /* prettier的配置 */ "prettier.printWidth": 100, // 超过最大值换行 "prettier.tabWidth...因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号...相信每个在vscode上编写vue的都会下载 Vetur 插件，它目前是 vscode 上面最好用的一款vue插件。现在要说的是，如何使用prettier格式化vue的代码。

1.3K2 0

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

这里已vscode为例进行说明，下面的配置是我自己的对于HTML/CSS/JS/LESS文件的prettier格式化规则： { // 使能每一种语言默认格式化规则 "[html]": {...": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode..." }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },...{} 箭头函数参数只有一个时是否要有小括号。...相信每个在vscode上编写vue的都会下载 Vetur 插件，它目前是 vscode 上面最好用的一款vue插件。现在要说的是，如何使用prettier格式化vue的代码。

3.9K2 0

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

了解了不规范的代码以及不规范代码带来的问题，作为前端架构师，我们就要思考三个问题：如何制定规范？如何统一团队的规范？如何检测规范？...神技二：Prettier 上一步我们用 ESLint 实现了规范的制定和检查。...jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false） "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号...猜对了，当然有插件，插件全名叫 Prettier - Code formatter，截图如下，在 VSCode 中搜索安装即可。 Prettier 插件安装之后会作为编辑器的一个格式化程序。...首先我们在这个配置当中将 Prettier 设置为默认格式化程序： { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript

1K2 0

2022代码规范最佳实践（附web和小程序最优配置示例）

npx prettier --write index.css 同样的如果需要自定义格式，我们可以用根目录下的.prettierrc文件配置一些自定义的格式化规则。...在根目录下新增.vscode目录，目录下新建setting.json文件，添加如下的设置。这里为了避免关闭vetur和eslint配置的冲突，关闭vetur一些格式化的选项。...html用eslint-plugin-vue格式化。...// js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突 "vetur.format.defaultFormatter.html": "none",...文档 eslint-plugin-prettier文档 husky文档【建议收藏】全网最全的讲清eslint和prettier的npm包和vscode插件的文章 2022年了，你还不会利用vscode

1.8K3 0

使用eslint + prettier + husky + lint-staged 约束项目的最佳实践！

'] } 新建.eslintignore，忽略不需要被校验的文件 # .eslintignoretypings node_modules vscode安装扩展eslint，项目中新建.vscode/settings.json..."eslint.alwaysShowStatus": true, // 加载配置文件 "eslint.options": { "configFile": ".eslintrc.js" }} vscode...概念 prettier是一个代码格式化工具，配合vscode自动保存可以保证代码风格的统一。...: 120, tabWidth: 2, useTabs: false, semi: false, singleQuote: true, // 对象的 key 仅在必要时用引号 quoteProps...none', // 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 jsxBracketSameLine: false, // 箭头函数

1.7K2 1

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

了解了不规范的代码以及不规范代码带来的问题，作为前端架构师，我们就要思考三个问题：如何制定规范？如何统一团队的规范？如何检测规范？...神技二：Prettier 上一步我们用 ESLint 实现了规范的制定和检查。...jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false） "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号...猜对了，当然有插件，插件全名叫 Prettier - Code formatter，截图如下，在 VSCode 中搜索安装即可。...首先我们在这个配置当中将 Prettier 设置为默认格式化程序： { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript

1.2K2 0

前端老项目接入 eslint 从配置到上线的一些思考

Eslint 作为规则扫描器，能够对前端代码进行有效管控，避免出现低级错误，对于前端项目或多或少肯定都会看到 eslint 的相关配置。...// 大括号内的首尾需要空格 bracketSpacing: true, // jsx 标签的反尖括号需要换行 bracketSameLine: false, // 箭头函数...团队内都使用的 VSCode 进行开发，可以安装 Eslint 和 Prettier 插件。...{ "editor.defaultFormatter": "esbenp.prettier-vscode", // 用 Prettier 格式化 "editor.codeActionsOnSave...（现在还可以加模拟面试群）如何拿下阿里巴巴 P6 的前端 Offer 如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点，该如何做出？

1.4K2 0

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

了解了不规范的代码以及不规范代码带来的问题，作为前端架构师，我们就要思考三个问题：如何制定规范？如何统一团队的规范？如何检测规范？...神技二：Prettier 上一步我们用 ESLint 实现了规范的制定和检查。...jsxBracketSameLine": false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false） "arrowParens": "avoid" // 只有一个参数的箭头函数的参数是否带圆括号...猜对了，当然有插件，插件全名叫 Prettier - Code formatter，截图如下，在 VSCode 中搜索安装即可。...首先我们在这个配置当中将 Prettier 设置为默认格式化程序： { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript

6731 0

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

今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：图片图片目前这些内容持续更新到了我的学习文档中。...,安装 eslint vscode插件执行lint命令进行检测图片配置prettier安装插件pnpm i prettier eslint-config-prettier eslint-plugin-prettier...--save-dev在.eslintrc.js中添加extends: [ 'plugin:prettier/recommended' // 新增],安装prettier vs code插件图片增加format...+(js|ts|jsx|tsx)' "执行 pnpm format进行格式化图片在根目录创建vscode/settings.json，这个告诉vscode进行的配置。..."reduxjs", "uparrow" ]}可以修改自己想要的配置，在根目录创建.prettierrc.js，在这个文件进行配置module.exports = { // 箭头函数只有一个参数的时候可以忽略括号

2463 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭