prettier插件 设置tab制表符为4个空格

最新推荐文章于 2024-06-28 02:41:31 发布
最新推荐文章于 2024-06-28 02:41:31 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： 工具 文章标签： vscode 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17627195/article/details/129262680
版权

场景： VSCode设置了tabsize是4，eslint也设置了tab缩进为四格，但是JS文件格式化后，缩进还是两格

解决方案： prettier插件也要进行设置

方法： vscode -> 文件 -> 首选项 -> 设置 -> 搜索：prettier:Tab；然后修改成4就可以了
在这里插入图片描述

最凶残的小海豹
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
idea perttier的使用和缩进改为4不成功的问题
Re_Zheng的博客
11-15 1412
环境配置 在idea的插件中进行下载 下载完之后重启 配置prettier包的位置 在vue中进行配置 在项目的根目录下创建 .prettierrc 文件 在文件中进行格式的配置 tabWidth ： 缩进的大小 useTabs ： 是否使用tab作为缩进 semi ： 是否使用分号 singleQuote ：字符串是否使用单引号 { "tabWidth": 4, "useTabs": true, "semi": false, "singleQuote": true }
vscode插件prettier代码缩进设置为4个空格
m0_73480308的博客
11-16 1586
不需要在根目录下新建配置文件，直接在插件栏里找到prettier点击设置。缩进默认为2个空格，想要改成4个空格。然后找到Tab Width，将2改为4。
vue的ESLint 4格缩进 笔记
最新发布
weixin_51140667的博客
06-28 364
eslintrc.js文件。
解决VS Code使用prettier格式化插件，设置缩进为4个空格无效的问题
z17864151193的博客
11-10 2616
乎就使用了 prettier 这个一个格式化文件的插件，设置格式化之后文件的缩进还是2个空格
vscode 设置代码格式化缩进为4个空格
文兜兜的博客
03-04 2880
vscode配置代码格式化缩进为4个空格。
【vscode之代码格式化】ESLint 与 Prettier 配合解决代码格式问题
weixin_52479803的博客
04-18 1431
ESLint 与 Prettier 配合解决代码格式问题
Prettier_Setup:为您的项目设置更漂亮的配置
04-30
"useTabs": false // 是否使用制表符 } ``` ### 4. 集成Prettier #### 4.1 集成到编辑器 - **VSCode**: 安装`Prettier - Code formatter`扩展，然后在用户设置中配置自动格式化。 - **WebStorm**等JetBrains IDE...
html格式化源码(tab符自动缩进)
06-02
比如，SanYe可能是一个知名的代码编辑器或者格式化插件，它可以自动为HTML源码添加tab符以实现缩进。 HTML的源码格式化通常包括以下几个方面： 1. **缩进**：每个嵌套级别的元素都会向右移动一定的距离，一般是一...
【JavaScript源代码】vscode使用Prettier Code插件的详细教程.docx
12-30
- `useTabs`: 是否使用制表符缩进，这里设置为false，表示使用空格缩进。 - `semi`: 是否在语句末尾添加分号，默认为true，表示需要分号。 - `singleQuote`: 是否使用单引号，默认为false，这里设置为true，表示使用...
适合于javascript/html/css/vue/react编程的 vscode 的优秀扩展推荐和 vscode 的推荐设置
10-05
- `editor.renderWhitespace`: 显示空格和制表符，有助于保持代码整洁。 - `editor.minimap.enabled`: 是否显示迷你地图，可根据个人喜好开启或关闭。 以上就是对JavaScript、HTML、CSS、Vue和React开发者非常有...
VSCode插件安装完成后的配置(常用配置)
11-19
- **解释**：控制是否在编辑器中显示空白字符（如空格和制表符）。 - **示例**：“boundary”表示仅显示空白字符之间的边界。 #### 10. 游标闪烁方式 - **配置项**：“editor.cursorBlinking” - **解释**：设置...
前端代码风格自动化系列（四）之Prettier
weixin_34074740的博客
01-07 177
Prettier是一个支持多语言的代码格式工具，如常用的：js、jsx、Vue、Flow、Ts、HTML、CSS等，非常全面，将代码解析为AST，然后重新组装，目的是最终输出风格统一的代码，对比eslint对error的fix要强一些，如最大长度的改动，eslint只是对有问题的地方进行格式化修改，不改动源代码风格，而prettier是对...
prettier 配置规则
weixin_63589620的博客
04-13 856
首先创建一个.prettier.js 文件。设置(ctrl+,)
prettier 使用详细介绍
qq_42880714的博客
05-20 5126
prettier 使用详细介绍
eslint和prettier配置避免冲突并统一代码风格，使用tab缩进
LYJSpeedX独家技术分享
07-18 6655
导言 eslint和prettier是前端开发中两款非常强大的代码检查和格式化工具，但强大也意味着这两者经常发生冲突。对eslint和prettier在开发前进行协同完美的配置是相关重要的，可以避免冲突等麻烦，简化美化开发过程，确立团队或个人的开发风格。 以下修改为个人风格总结所得，读者可根据自己需求增加减。 eslint 配置项目根目录的.eslintrc.js文件，下面代码都添加在rule块中 修改为tab缩进：在rule下面添加"indent": ["error", "tab"]或你也可以关闭缩进检
vue-project2.0/3.0 格式化代码--单引号变双引号,tabSize问题解决方案
weixin_34378767的博客
01-10 1054
问题 格式化代码后,自动将单引号变成双引号 自动在行末补上分号 tabSize = 2, 不生效问题 解决方案(3.x) 在项目根目录下,新建 .prettierre 文件, 文件内代码如下: { "tabWidth": 2, "semi": true, "singleQuote": true, //是否使用单引号为true "trailingCo...
vscode使用eslint prettier 自动格式化代码
a314753967的博客
01-11 6173
本文以vue项目举例 一、安装 Eslint 安装eslint插件 二、安装 Prettier-Code formatter插件 需要安装这个 代码格式化插件 否则会提示 Extension 'esbenp.prettier-vscode' is configured as formatter but not available. Select a different default formatter to continue. 三、安装Vetur插件 四、配置 set..
vscode prettier settings.json
07-11
### 回答1： 在VSCode中，Prettier是一款非常有用的代码格式化工具，可帮助我们保持一致的代码风格。要在VSCode中配置Prettier的设置，我们需要打开VSCode的设置面板，并找到settings.json文件。 为了打开settings.json文件，可以按下快捷键Ctrl +，然后在搜索栏中键入“settings.json”。点击打开settings.json文件，即可进行编辑。 在settings.json文件中，我们可以配置各种Prettier的设置选项。下面是一些常见的配置选项： 1. "prettier.printWidth": 80 这个选项用于设置一行的最大字符数。当一行超过设定的限制时，Prettier会自动将代码换行。 2. "prettier.tabWidth": 4 这个选项用于设置一个制表符的宽度。默认情况下，Prettier使用2个空格来缩进代码。通过设置tabWidth为4，我们可以指定缩进为4个空格。 3. "prettier.singleQuote": true 这个选项用于设置是否使用单引号来包裹字符串。如果将其设置为true，Prettier会将双引号转换为单引号。 4. "prettier.trailingComma": "es5" 这个选项用于设置是否在对象和数组字面量的末尾加上逗号。在es5模式下，Prettier会添加末尾的逗号。 5. "prettier.bracketSpacing": true 这个选项用于设置是否在对象字面量的属性和值之间添加空格。 以上只是一些常见的配置选项，Prettier还有很多其他的配置选项可以根据个人需求进行设置。配置完成后，保存settings.json文件即可生效。 总之，通过在settings.json文件中配置Prettier的选项，我们可以定制化Prettier在VSCode中的行为，以满足我们对代码格式的需求。 ### 回答2： VSCode中的Settings.json文件用于配置编辑器的各种设置，包括Prettier插件的设置。 Prettier是一款代码格式化工具，可以帮助开发人员维持代码的一致性和可读性。通过在Settings.json中配置Prettier的相关设置，我们可以自定义Prettier的行为和样式。 要配置Prettier的Settings.json，首先需要打开VSCode的设置。可以通过点击左侧的文件夹图标，然后点击齿轮图标，选择“Settings”打开设置。 在设置中搜索“Prettier”，可以看到Prettier的相关设置选项。下面是一些常用的设置示例： 1. "prettier.singleQuote": true - 自动将双引号转换为单引号。 2. "prettier.tabWidth": 4 - 设置缩进长度为4个空格。 3. "prettier.trailingComma": "es5" - 设置尾逗号的使用风格为ES5规则。 4. "prettier.printWidth": 80 - 设置每行代码的最大宽度为80个字符。 可以根据个人喜好和团队规范来设置Prettier的行为和样式，然后保存设置即可生效。 需要注意的是，为了使设置生效，需要确保已经安装了Prettier插件，并且正确配置了工作区或全局的Settings.json文件。 通过在Settings.json中配置Prettier的相关设置，可以更好地使用Prettier工具来自动格式化代码，提高代码质量和可读性。希望以上回答对您有帮助！ ### 回答3： VSCode的Prettier是一款非常受欢迎的代码格式化工具，能够帮助开发者自动格式化代码，使其具有一致的风格。而"settings.json"是VSCode的配置文件之一，可以用来定制编辑器的行为。下面是关于"settings.json"中VSCode Prettier配置的详细说明。 首先，要在VSCode中配置Prettier，需要在"settings.json"中增加一些相关配置。打开VSCode并进入"Preferences"（偏好设置）页面，选择"Settings"（设置）。在搜索框中输入"Prettier Configuration Path"，可以找到"Prettier: Configuration Path"这个项。在其右侧的输入框中，输入Prettier的配置文件路径，可以是一个具体文件的路径或者是一个包含配置的目录的路径。 接下来，还可以在"settings.json"中针对Prettier进行更详细的配置。例如，可以设置"Prettier: Tslint Integration"，决定是否集成TSLint的格式化规则；"Prettier: Eslint Integration"，决定是否集成ESLint的格式化规则；"Prettier: Stylelint Integration"，决定是否集成Stylelint的格式化规则。这些配置可以根据项目的具体需求进行调整。 此外，还可以设置一些Prettier的格式化规则。例如，可以通过"Prettier: Print Width"来设置一行的最大字符数；通过"Prettier: Tab Width"来设置制表符的宽度；通过"Prettier: Single Quote"来设置字符串使用单引号还是双引号等。具体的格式化规则可根据个人需求进行调整。 总之，在"settings.json"中配置VSCode的Prettier相关项，能够让我们更方便地使用和定制Prettier的格式化功能，从而提高代码的可读性和一致性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值