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

VS Code中带有prettier的奇怪行为

可以是指在使用VS Code编辑器时,与prettier相关的功能或设置出现了异常或不符合预期的情况。

Prettier是一款代码格式化工具,可以自动调整代码的缩进、换行、空格等风格,使代码具有统一的格式,增强可读性。在VS Code中集成prettier可以通过安装Prettier插件,并在编辑器的设置中配置相关选项来实现。

奇怪行为可能包括以下几种情况:

  1. 格式化结果不符合预期:在使用prettier格式化代码时,可能出现一些奇怪的结果,例如换行符的位置、空格的数量、缩进的方式等与预期不符。这可能是由于prettier的配置与编辑器的设置产生了冲突,或者代码本身存在一些特殊情况。

针对这种情况,可以通过检查prettier的配置文件(如.prettierrc)和VS Code的设置(如Editor: Format On Save、Editor: Format On Paste等)来确定是否存在冲突或误配置。同时,可以尝试使用prettier的一些特定选项来调整格式化结果,如tabWidth、singleQuote等。

  1. 格式化速度过慢:在大型项目中,使用prettier格式化代码可能会导致编辑器的卡顿或响应时间变慢。这可能是由于prettier在处理大量代码时的性能问题导致的。

解决这个问题的方法是优化prettier的配置,例如通过忽略某些文件或文件夹,或者通过配置一些相关的性能选项,如printWidth、trailingComma等,以减少格式化的工作量和时间。

  1. 格式化冲突:当在团队协作中,多个开发者使用不同的格式化工具或配置时,可能会导致代码的格式化产生冲突,即格式化后的结果不一致。这可能是由于不同格式化工具的规则不同,或者使用了不同的配置文件。

为了解决这个问题,可以在团队中统一使用相同的格式化工具和配置,如prettier,并通过代码仓库的规范和约束来确保所有开发者都使用相同的配置文件。

总结起来,VS Code中带有prettier的奇怪行为可能是由于配置冲突、性能问题、格式化冲突等原因引起的。要解决这些问题,可以通过检查和调整prettier的配置、VS Code的设置,优化性能选项,统一团队的格式化工具和配置等方式来解决。

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

相关·内容

VS Code 自动完成

如上图,简单地 declare 下就能解决这个问题,这个过程可以称作 define,将上述 declare 代码抽到一个 .d.ts 结尾文件单独维护,这个文件叫声明文件(declaration file...报错问题解决了,现在有新问题,一大堆第三方库 definition 怎样维护更新?怎样查找安装?...这个时候我们 typings 隆重登场,它可以解决几乎所有 definition 问题,唯一蛋疼地方是要安装一下,以及各种奇怪命令行参数。...VS Code definition definition 作用当然远不止给 ts 本身来用,编辑器可以利用它来做非常强大代码提示。 下图就是安装 definition 之前和之后效果。...definition 当然在其他编辑器也有类似的实现,但体验没有哪个能比得上 vscode 。

1.7K60

VS Code 自动完成

如上图,简单地 declare 下就能解决这个问题,这个过程可以称作 define ,将上述 declare 代码抽到一个 .d.ts 结尾文件单独维护,这个文件叫声明文件(declaration...报错问题解决了,现在有新问题,一大堆第三方库 definition 怎样维护更新?怎样查找安装?...这个时候我们 typings 隆重登场,它可以解决几乎所有 definition 问题,唯一蛋疼地方是要安装一下,以及各种奇怪命令行参数。...VS Code definition definition 作用当然远不止给 ts 本身来用,编辑器可以利用它来做非常强大代码提示。 下图就是安装 definition 之前和之后效果。...definition 当然在其他编辑器也有类似的实现,但体验没有哪个能比得上 vscode 。

1.3K10

🤯 VS Code | 在VS Code搭建你R语言运行环境吧!~(图文介绍超详细)

1什么是VS Code Visual Studio Code(简称 VS Code)是一款由微软开发跨平台编辑器,支持语法高亮,代码自动补全,代码重构等功能。...R语言安装教程 | 图文介绍超详细 3下载并安装VS Code 1️⃣ 官方网址在这里: https://code.visualstudio.com/ 大家按照自己操作系统来选择对应版本就行啦,...install.packages("httpgd") ---- 7.2 配置httpgd 接着我们在VS Code设置输入r.plot.useHttpgd,启用httpgd。...r.plot.useHttpgd 8修改快捷键 由于VS Code和我们在R studio中用快捷键会不同,所以我们需要做一些修改,打开快捷键设置(cmd + K cmd+ S)我们会进入下面这个界面...1️⃣ m1 mac小伙伴在下载VS Code时候一定要选择ARM版本。 2️⃣ m1 macR也一定也要选择ARM版本

8K41

一文吃透 VS Code+Git 操作(vs codegit相关配置与使用)

目录 一、搭建 GIt 环境(Windows) 二、VS Code GIt 相关操作 本地类操作 1. 准备项目文件并初始化仓库 2. 添加文件至暂存区 3....准备项目文件并初始化仓库 新建项目文件夹 git 作为项目;桌面进入 Git Bash Here,输入命令 code git 使用 vs code 打开我们项目文件夹; vs code...省略了添加至暂存区操作; 如下,如果我们将修改后文件未保存至暂存区就进行了提交,vs code 会给出警告,这时我们选择“总是”,即可在未来操作自动省略添加至暂存区操作。 4....克隆项目(git clone) 首先复制新建仓库所获得 SSH 链接,打开 vs code 命令面板,输入 git clone 找到克隆选项; 点击后粘贴我们 SSH 地址,回车...克隆云端项目至本地(git pull) 在 Vs Code 拉取云端项目,进入源代码管理,选择更多 “···” ,选择 “拉取”,即可进行 pull 操作; 注意:每当进行推送项目

13.8K20

VS Code6个令人惊叹CSS扩展

前言 Visual Studio Code最令人印象深刻部分之一是可定制性,尤其是通过扩展。随着大量开发人员创建扩展,功能实际上是无穷无尽!...作为一名程序猿,或多或少都会码一点点CSS,不管是简单css颜色、字体设置,还是高级css动画等。现在就为大家推荐一下VS Code中用于编写CSS一些最佳扩展,让你编写CSS时更得心应手。...1、HTML CSS Support 2、Intellisense for CSS Class Names 3、Autoprefixer 4、CSS Peek 5、Prettier - Code...如果你像我一样,讨厌切换到我.css文件来检查附加到类或ID属性。那你可以使用css peek,你可以从html文件查看css悬停图像。...Prettier - Code Formatter prettier 对于自动格式化JavaScript非常友好,但是你知道它也自动格式化CSS吗? 以前css是这样: ?

4.2K10

利用VS2005Code Snippets提高开发效率

VS 2005,新增加了许多新特性和功能。其中在方便用户编程方面有了很大改进,比如新增加了code snippets(代码片断助手)功能。...所谓code snippets,是用户可以在编程过程,将经常要用到一些常用代码或者值得收藏起来代码保存起来,在要使用时候就可以方便地调用出来。...本文将介绍如何将vs 2005自带code snippets加到已有的应用程序中去,以及如何建立自己snipeets,如何使用开源snippet editor。    ...在“代码编辑器”,将光标置于要插入代码段位置。 为要添加到代码代码段键入快捷方式。 键入两次 Tab 以调用代码段。...l 通过“编辑”菜单使用代码段 在 Visual Studio IDE 打开要编辑文件。 在“代码编辑器”,将光标置于要插入代码段位置。

1.2K90

WindowsVS code无法查看C++ STL容器

WindowsVS code debug时无法查看C++ STL容器内容 本文阅读重点 < 1 WindowsVS code debug时无法查看C++ STL容器内容 1.1 而我相应配置文件如下...我发现一个有效解决方法,但在x64版本Windows上安装MinGW时,虽然官方推荐MinGW版本是x86_64,但实践后发现如果选择安装 x86_64, 很可能Debug时会无法看到STL容器...(vecotr、map等)具体信息,看到是相应内存地址~ 故建议选 i686 (win32),然后安装步骤下一步及后面的操作都按默认来就好。...最后效果: win32 版本 MinGW官方下载地址: i686-posix-dwarf 我从这里下载到 MinGW 压缩包,然后解压到文件夹 D:\MinGW ,接下来把MinGWbin目录...,即 D:\MinGW\i686-8.1.0-release-posix-dwarf-rt_v6-rev0\mingw32\bin 加到了系统变量 PATH

1.6K10

VS Code 有多么不安全:一个扩展就可能导致公司 GitHub 所有代码被擦除?

VS Code 强大之处在于它包含大量可用扩展,能帮助开发人员根据实际需求定制编辑器。这些扩展往往来自编辑器内置 VS Code Marketplace。...VS Code Marketplace 中有超过 40,000 个扩展,可帮助程序员更高效地开发代码、集成特定语言调试器,甚至将工件部署到生产环境。...Marketplace 热门扩展 这不可避免地引出了一个问题:作为 VS Code 用户,你有没有问过自己一些问题:VS Code 扩展是否值得信赖?如何检查扩展是否合法?...这可能会产生巨大影响!” VS Code 系统也提供了好几项保护开发者免受恶意扩展侵害功能,首先,微软保证“对每个新扩展和每项扩展更新都运行病毒扫描。...他们选择了流行 VS Code 扩展 Prettier,仅仅是将发布者名称从 esbenp 变为了 espenp,扩展名从 prettier-vscode 变为了 pretier-vscode。

63810

Vs Code借助腾讯云实现图片自动上传(上)

什么是Vs Code? 它在名义上是一个编辑器,但很多人都在暗地里叫它IDE。...虽然是被强推上了这个名号,但它还能够写写markdown,写写latex,画画思维导图…… 甚至听音乐,看电子书,刷知乎(不过当然是不能刷酷安了),浏览你最爱番剧更新信息……虽然说大部分人还是用它来写代码就是了...对我来说,编辑markdown,是我对于它主要应用之一。可是插入图片问题要怎么解决呢?如果能有一个方法,可以将我想要图片自动上传到图床,并且自动插入链接,那该有多舒适!...实际上这也是切实可行,并不能够被称为天方夜谭一种想法。...image.png image.png image.png 经过某一些事件打击之后,我发现即使是被分成很多节,教程依然是越短越令人喜爱。虽然可能是我个人偏见,但我目前就是这么认为

1.7K20

可以用在 VS Code 正则表达式小技巧

文本编辑器设置 虽然现在几乎所有的文本编辑器都支持正则表达式,但我在本教程中用是 Visual Studio Code,不过你可以使用任何你喜欢编辑器。...另请注意,你通常需要在搜索输入框附近某处打开 RegEx 开关。以下是在 VS Code 执行此操作方法: ?...指向文件夹“lua” 任何文件。...\) 这意味着:“匹配以 "loadScript(" 开头, 后面跟任意内容,直到遇到第一个, ,然后是任意内容,直到第一个)” 对你来说,可能看唯一起来比较奇怪是 \ 符号。...因为符号 (和) 是正则表达式用来捕获匹配文本部分特殊字符,但我们需要匹配实际括号字符,所以需要对它们进行转义。 在前面的表达式,我们使用.*?符号定义了方法调用两个参数。

4.3K20

使用ESLint & Prettier美化Vue代码

等语言,您可以结合 ESLint 和 Prettier,检测代码潜在问题同时,还能统一团队代码风格,从而促使写出高质量代码,来提升工作效率。...package scripts ,以方便使用: { "scripts": { "eslint-fix": "eslint src/**/**/*.vue --fix", "format-code...Format on Save) 使用键盘快捷方式手动调用(如果没有选择,整个文件被格式化):CTRL + ALT + F VS Code 编辑器 安装插件:ESlint,PrettierVS...Pre-commit Hook 约束代码提交 以上探讨了如何运用 ESLint & Prettier 写出优质代码,这都是针对个人推荐性行为;为保证团队统一代码风格,则必须采取些手段以强制约束;假如您团队使用...Git 作为代码管理工具,在 commit 行为及之前进行甄别约束,是很棒选择;于此,可借助 husky & lint-staged 来实现之。

3.4K71

前端工程师vscode必备插件(20个)

2.Tokyo Night Material Theme主题已经下架了,所以Tokyo Night是目前来说vs code我认为最好看主题。 3.vscode-icons 更改文件图标。...5.PrettierCode formatter 代码格式化工具,代码自动格式化。...引入图片后,旁边可以看到图片预览图。鼠标悬停,点击后可打开该图片所在文件夹。 12.CSS Peek 光标定位在class位置,按F12即可快速定位到改class在css文件位置。...13.HTML CSS Support 输入class名称开头,即可显示所有带有该名称class。...GitLens 在多人开发,能够显示这段代码是谁提交写。 18.background 注意作者。 这个插件可以自定义vscode背景图片。让人更舒服发开发。

3K40

「译」提升 Web 开发效率 VS Code 扩展

Visual Studio 是一个功能全面且便捷集成开发环境,而 VS Code 则是一个开源、跨平台源码编辑器,在 web 开发群体尤其出名。它不仅快速、可扩展、可自定义,而且还有大量功能。...VS Code Icons: 提供文件图标,可以提高编辑器颜值 Dracula:这是一直以来钟爱一个主题 Prettier:通过解析代码并根据自己规则重新打印,从而实现一致代码风格。...其它 Settings Sync: 可以将你 VS Code 配置同步到 Github 上,包括基础设置、热键和 VS Code 扩展。...Project Manager: 可以直接在 VS Code 打开指向某个 Git 仓库新窗口。基本上,你现在可以在不离开 VS Code 界面的情况下打开任意一个仓库。...Code Runner: 在 VS Code 运行代码,支持大部分编程语言。 Live Share: 允许你实时共享工作空间:实时编辑、固定并跟随用户指针、联合调试以及其它。

77521

JavaScript 代码风格检测

通过引入代码规范工具,可以帮助我们保障一个团队代码风格相同,并且能能避免一些因为格式上问题,而出现低级错误在新建 Vue 项目过程,我通常会勾选 ESLint + Prettier 作为项目的语法检查方式...确实在代码格式化方面,Prettier 和 ESLint 有所重叠,不过它们侧重点不同,ESLint 主要工作就是检测出代码潜在问题,并给出相应提示,比如使用了某个变量却忘记定义,在格式化功能上却很有限...VS Code 插件使用这里只介绍 VS Code 配置方法,而使用 IDE 和其他编辑器同学可参考并自行配置,首先打开 VS Code 插件市场,搜索并安装以下插件——Vetur、ESLint...、Prettier-Code formatter,待安装完成之后,重启下 VS Code 避免插件不生效Vetur 插件除了支持 .vue 文件语法高亮、语法补全之外,其默认代码风格化使用Prettier...Code setting.json 文件,搜索 editor.formatOnSave 配置项,将其取值改为 true,就能在保存时候进行自动排版了ESLint 插件和 Prettier 插件会自动检索项目根目录下

1.1K21

2020最新编辑器集成eslint、prettier、stylelint,git提交预检查代码配置

VS code 安装 "ESLint" 以及 "Prettier - Code formatter" 插件,打开 VSCode 点击「扩展」按钮,搜索 ESLint、prettier,然后安装即可 点击左下角...齿轮图标",点击Setting后上端选择Workspace选项卡,(也可以在项目根目录下创建一个配置文件 .vscode/settings.json),添加以下配置:  { // VSCode ...从v10.0.0对原始暂存文件任何新修改都将自动添加到提交,不需要手动写入git add 命令,目前网上看到大部分教程都是带有git add 命令,如果加了之后,lint-staged会报一个警告...要允许创建空提交,请使用该--allow-empty选项 lint-staged匹配文件,可以执行scripts命令,也可以直接执行eslint修复命令等。...lint-staged匹配文件,如果有多个命令可以写为数组 lint-staged支持三种配置方式             package.json             .lintstagedrc

2.7K10

可能是目前最详细从零开始配置 TypeScript 项目的教程

lint-staged 功能是什么? VS Code 配置用户和工作区有什么区别? VS Code 插件可以只对当前项目生效吗? 谈谈你所理解 npm scripts,它有哪些功能?...理论上而言,在项目中开启 ESLint extends 设置带有格式规则校验规则集,那么就需要通过 eslint-config-prettier 插件关闭可能产生冲突格式规则: { "extends..."prettier src test --write", }, --write 参数类似于 ESLint --fix(在 ESLint 中使用该参数还是需要谨慎哈,建议还是使用 VS Code...格式了什么文件,当然更希望通过肉眼形式立即感知代码格式化变化),此时可以通过配置 VS Code Prettier - Code formatter[81] 插件进行 Save Auto Fix...pre-commit:Git pre 系列钩子允许终止即将发生 Git 操作,而post 系列往往用作通知行为

4.7K22

27 个实用 Visual Studio Code 扩展插件,让我们工作效率翻倍

使用 VS Code 主要好处之一是它灵活性,允许开发人员根据他们特定需求对其进行自定义。 此外,VS Code 轻巧且快速,使其成为从事大型项目或资源有限开发人员绝佳选择。...它带有调试工具、终端和 Git 集成,使其成为开发人员一体化解决方案。...不仅如此,Visual Studio Marketplace 还提供了许多 VS Code 扩展,这使其成为开发人员社区领先 IDE。...Remote-SSH 是一个重要 VS 代码扩展。尝试使用 VS Code 扩展来发现远程工作强大功能和便利性。...用于代码格式化和 linting VS 代码扩展 15、Prettier Prettier 是最流行格式化和 linting 工具,用于根据行业最佳实践对代码进行标准化。

46620

VS Code Vim 操作 | 无需修改 VSC 默认快捷键 | 常用组合与逻辑

VS Code Vim 操作 | 常用组合与逻辑 尽管 VS Code 自带快捷键已经足够强大 ,但存在一个问题:使用方向键是一个有些“反人类”行为,双手放在键盘上,如果只敲击字母,那么便无需移动手腕...vim visual 如上: •normal 模式下,是开启选中 visual 模式 VS Code 中常用 Vim 组合逻辑 Vim 爱好者常说:Vim是一种逻辑,而非死记硬背快捷键(我还算不上...此外,/ 查找功能在 vs code 同样适用。但是,我更喜欢 vs code 自带 ctrl + f 查找, vs code 自带组合键还有哪些妙用呢?我们下回分解。...vs code 社区、历史,由微软工程师韩老师撰写。...因为我是 vs code 社区中比较积极志愿者,所以有幸得到了本书签名款。

2.7K20
领券