【IDE】WebStorm 调整Tab缩进为2空格 -- 为遵循ESLint语法规范

最新推荐文章于 2025-05-29 13:02:44 发布
最新推荐文章于 2025-05-29 13:02:44 发布
阅读量9.4k 收藏 10
点赞数 4
CC 4.0 BY-SA版权
分类专栏： IDE系列 文章标签： WebStorm
本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！
本文链接：https://blog.youkuaiyun.com/AV_woaijava/article/details/86541438
本文详细介绍了在使用Vue进行项目开发时，如何在WebStorm IDE中将Tab缩进统一设置为2个空格，以遵循ESLint语法规范。包括修改JS文件及.vue文件的缩进配置步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用Vue开发项目的过程中，为了遵循ESLint语法规范，我们需要把Tab缩进改为2个空格

IDEversion
WebStorm2018.3

步骤一

修改这三处的值为：2
在这里插入图片描述

步骤二

把这两处默认的勾选去掉，不让其detection当前文件的Tab缩进
在这里插入图片描述

注意！

通过上面两个步骤，细心的同学会发现，我们只是改变了在JS文件的Tab缩进改为2个空格

但是，*.vue的文件缩进问题并没有被解决！

我们发现，Code Style的选项没有Vue这一项，所以我们去Other File Types去调整相关配置

调整保存后，再重启WebStorm就OK啦！！！
在这里插入图片描述

总结

通过以上设置，我们总结到：

以后需要改哪个类型的文件的代码缩进我们只需要去Code Style这个选项中，寻找对应的文件类型做相应调整就好了

使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量、统一项目代码风格
FE-阿阳的博客
12-18 1646
使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量、统一项目代码风格 Eslint 代码检查，编辑器启用 Eslint 之后，不符合规范的会自动进行提示。 Prettier 让代码变得更 pretty，会更改不符合检测要求的代码，自动格式化。 husky git 每步操作的钩子，没执行一个操作都会执行一次对应的钩子函数，执行 pre-commit 操作时，执行 Prettier 格式化脚本，即可自动的格式化代码，让 commit 之后的代码都符合 Pr
第15课：使用 ESlint 规范化代码
疯狂紫萧
09-22 642
知识点 安装 ESlint 配置规则 兼容多数 IDE 安装 ESlint npm install -g eslint eslint --init根据提示安装选择需要的配置，这里我选择的是 json 格式的文件。 最后就在根目录下生成.eslintrc.json。 配置规则 ESlint 是基于规则在检测代码的。 env：你的脚本将要运行在什么环境中； globals：额外的全局变量； pa...
Webstorm 的格式化vue怎样调整缩进成2个空格或者4个空格
gusijin的博客
04-24 5227
Webstorm 的格式化vue怎样调整缩进成2个空格或者4个空格
webstorm tab缩进2空格还是4空格？
hello world
01-12 2509
为遵循ESLint语法规范 ，WebStorm 可以调整Tab缩进为2空格 步骤一 修改这三处的值为：2 步骤二 把这两处默认的勾选去掉，不让其detection当前文件的Tab缩进 注意！ 通过上面两个步骤，我们只是改变了在JS文件的Tab缩进改为2个空格 但是，*.vue的文件缩进问题并没有被解决！ 我们发现，Code Style的选项没有Vue这一项，所以我们去Other File Types去调整相关配置 调整保存后，再重启WebStorm就OK啦！！！ 以后需要改哪个类型的文件的代码缩进我们
WebStorm格式化代码Style和Script标签没有缩进问题+必记住的快捷键
最新发布
TechExplorer365的博客
05-29 739
WebStorm 哪里都好，就是格式化代码的时候 Script 和 Style 标签里面的内容老是顶行写，着实让强迫症受不了，今天无意间发现了这个设置，完美的治愈了强迫症。
webstorm缩进两个空格设置
qq_42318977的博客
07-24 5414
webstorm缩进两个空格设置
Webstorm 的 Tab 键怎样调整缩进值？ 调节成缩进成2个空格或者4个空格
cxu123321的博客
06-08 6594
Webstorm 的 Tab 键怎样调整缩进值？ 调节成缩进成2个空格或者4个空格 niexias 2017-10-19 09:41:04 54292 收藏 8 展开 需要设置这两步： （webstorm的版本2017.2） ———————————————— 版权声明：本文为优快云博主「niexias」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.youkuaiyun.com/niexia_/article/details/78..
webstorm的缩进设置(过度缩进解释)
m0_71299382的博客
10-06 1505
而continuation indent表示的是过度缩进 他控制的是一行显示不下的内容(元素属性等等)换行显示时的缩进效果 比如js代码函数调用换行显示参数时的参数的缩进效果。具体的话 我们将html/css/js操作界面中的tab/indent设置为2个空格即可 他们控制的是元素/元素内容/元素嵌套的子元素的缩进效果。在编写前端代码时 缩进规范一般被认为是2个空格 而非默认的4个空格。
webstorm-settings:我的Webstorm设置存储库
03-27
2. **代码风格**：可以自定义语言的代码风格，包括缩进、空格、换行等，确保代码风格的一致性。 3. **代码检查**：WebStorm有丰富的代码检查工具，如ESLint、JSHint等，可以自动检测语法错误和潜在问题，并提供修复...
Prettier_Setup:为您的项目设置更漂亮的配置
04-30
"tabWidth": 2, // 缩进空格数 "singleQuote": true, // 使用单引号 "trailingComma": "es5", // 在对象或数组末尾添加逗号 "semi": true, // 是否使用分号结束语句 "useTabs": false // 是否使用制表符 } ``` ...
【Eslint】vscode 配置 eslint
04-28 3433
为了方便你不想去检测某一个文件代码格式，此时就可以使用这个文件.eslintignore；在这个文件中写入你屏蔽检测的文件名则可以。
WebStorm调整代码回车缩进为2个空格
qq_53024519的博客
07-11 879
调整完后最好一下使其生效。
WebStorm修改Tab缩进为2，vue文件也生效，还可以修改webstrom中vue文件回车的4格缩进为2格，亲测可用
浩星
12-08 2954
前言： 为了遵循ESLint语法规范，我们需要使用两个空格的tab缩进， 使用方法： 1、打开设置，找到Code Style 2、找到JavaScript和其他类型（为了vue类型的文件），把数字都改成2 、 3、点击Code Style把勾选的去掉 4、重启 ...
WebStorm代码提示快捷键设置（ctrl+空格）和（ctrl+/）
coder_lihuaxi的博客
08-12 1128
我使用的按键映射是vscode，默认的代码提示的快捷键是 （ctrl + 空格）和（ctrl + l), 不过（ctrl + /)好像已经被占用了，无效，也不想修改；在开始测试的时候发现（ctrl + 空格）也无效，经检查发现，是因为WebStorm和Windows的输入法快捷键冲突导致，取消掉输入法的对应快捷键即可。设置完成之后，WebStorm就可以使用（ctrl + 空格)进行代码提示。
webstorm script标签回车空格设置
qq_40715610的博客
06-09 488
webstorm设置
Webstorm设置大括号内两边的空格
KyLen_Mou的博客
03-06 1332
这个设置藏得很深，找一下就行了。我这里演示typescript的import {xxx}改为import { xxx }使用代码格式化的快捷键一键格式化，我的快捷键是ctrl+alt+L。任何这种设置应该都能找得到。
设置webstorm/idea中的 Tab 键为 4 个空格
浩星
02-02 2503
前言： webstrom和idea因为是一家公司，有些功能都是很神似的 Setting(Project Settings)->Code Style->General在右侧的面板中， Schema那里选择Project,在下面把Use tab character的勾选去掉
解决：WebStorm设置Tab键的缩进不生效
qq_36305598的博客
09-27 2489
设置WebStorm中自己用得最舒服的缩进机制 第1步：打开File ---> Settings ---> Editor ---> Code Style ---> JavaScript ---> 设置缩进距离 ---> Apply ---> OK 一般情况下，做完第一步的调整就能得到适合自己的缩进模式了，但是它居然不生效！好了，我们继续 ...
WebStorm下将vue的代码缩进由2个空格改为4个空格
weixin_42504805的博客
02-26 1324
原文链接：https://blog.youkuaiyun.com/guoxuhan/article/details/79228635。这样配置是没有错的，于是找了下答案发现解决方案是修改项目根目录下的。已经找过解决方案但设置后无效的，可直接看文章的最后一句。将该indent_size的值修改为4保存即可。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值