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

Vue项目中ESLint下Tab缩进统一设置
最新推荐文章于 2025-10-05 09:24:24 发布
原创 最新推荐文章于 2025-10-05 09:24:24 发布 · 9.4k 阅读 · 10 ·
CC 4.0 BY-SA版权
本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！
文章标签：

#WebStorm

本文详细介绍了在使用Vue进行项目开发时，如何在WebStorm IDE中将Tab缩进统一设置为2个空格，以遵循ESLint语法规范。包括修改JS文件及.vue文件的缩进配置步骤。

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

IDEversion
WebStorm2018.3

步骤一

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

步骤二

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

注意！

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

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

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

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

总结

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

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

webstorm-settings:我的Webstorm设置存储库
03-27
2. **代码风格**：可以自定义语言的代码风格，包括缩进、空格、换行等，确保代码风格的一致性。 3. **代码检查**：WebStorm有丰富的代码检查工具，如ESLint、JSHint等，可以自动检测语法错误和潜在问题，并提供修复...
Prettier_Setup:为您的项目设置更漂亮的配置
04-30
"tabWidth": 2, // 缩进空格数 "singleQuote": true, // 使用单引号 "trailingComma": "es5", // 在对象或数组末尾添加逗号 "semi": true, // 是否使用分号结束语句 "useTabs": false // 是否使用制表符 } ``` ...
Webstorm 的格式化vue怎样调整缩进成2个空格或者4个空格
gusijin的博客
04-24 5436
Webstorm 的格式化vue怎样调整缩进成2个空格或者4个空格
webstorm tab缩进2空格还是4空格？
hello world
01-12 2611
为遵循ESLint语法规范 ，WebStorm 可以调整Tab缩进为2空格 步骤一 修改这三处的值为：2 步骤二 把这两处默认的勾选去掉，不让其detection当前文件的Tab缩进 注意！ 通过上面两个步骤，我们只是改变了在JS文件的Tab缩进改为2个空格 但是，*.vue的文件缩进问题并没有被解决！ 我们发现，Code Style的选项没有Vue这一项，所以我们去Other File Types去调整相关配置 调整保存后，再重启WebStorm就OK啦！！！ 以后需要改哪个类型的文件的代码缩进我们
webstorm缩进两个空格设置
qq_42318977的博客
07-24 5509
webstorm缩进两个空格设置
Webstorm 的 Tab 键怎样调整缩进值？ 调节成缩进成2个空格或者4个空格
cxu123321的博客
06-08 6610
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 1665
而continuation indent表示的是过度缩进 他控制的是一行显示不下的内容(元素属性等等)换行显示时的缩进效果 比如js代码函数调用换行显示参数时的参数的缩进效果。具体的话 我们将html/css/js操作界面中的tab/indent设置为2个空格即可 他们控制的是元素/元素内容/元素嵌套的子元素的缩进效果。在编写前端代码时 缩进规范一般被认为是2个空格 而非默认的4个空格。
WebStorm前端代码缩进设置方法详解
然而，WebStorm默认的缩进设置往往为4个空格，因此开发者需要手动调整相关参数以适配项目需求。 要进行缩进设置，用户需进入WebStorm的设置界面：通过主菜单选择“File” → “Settings”（Windows/Linux）或...
使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量、统一项目代码风格
FE-阿阳的博客
12-18 1706
使用 Eslint + husky + lint-staged + Prettier 提高前端项目质量、统一项目代码风格 Eslint 代码检查，编辑器启用 Eslint 之后，不符合规范的会自动进行提示。 Prettier 让代码变得更 pretty，会更改不符合检测要求的代码，自动格式化。 husky git 每步操作的钩子，没执行一个操作都会执行一次对应的钩子函数，执行 pre-commit 操作时，执行 Prettier 格式化脚本，即可自动的格式化代码，让 commit 之后的代码都符合 Pr
WebStorm 从入门到精通：全功能开发指南与实战技巧
最新发布
漫画之迷学编程
10-05 916
摘要 《WebStorm 从入门到精通》系统介绍了这款专业JavaScript IDE的核心功能与高阶技巧。文章从安装配置（环境设置/插件管理）和界面认知（面板布局/快捷键）入手，重点解析代码智能提示、重构（重命名/提取函数）、版本控制等核心功能，并深入调试测试、框架支持（React/Vue）等高级应用。通过多行编辑、JSDoc注释等实操示例，展示效率提升方法，最后提供性能优化与定制化配置方案。全文以"基础→进阶→精通"为脉络，帮助开发者充分发挥WebStorm在前端开发中的效能优势。
WebStorm调整代码回车缩进为2个空格
qq_53024519的博客
07-11 1010
调整完后最好一下使其生效。
WebStorm修改Tab缩进为2，vue文件也生效，还可以修改webstrom中vue文件回车的4格缩进为2格，亲测可用
浩星
12-08 3044
前言： 为了遵循ESLint语法规范，我们需要使用两个空格的tab缩进， 使用方法： 1、打开设置，找到Code Style 2、找到JavaScript和其他类型（为了vue类型的文件），把数字都改成2 、 3、点击Code Style把勾选的去掉 4、重启 ...
WebStorm代码提示快捷键设置（ctrl+空格）和（ctrl+/）
coder_lihuaxi的博客
08-12 1217
我使用的按键映射是vscode，默认的代码提示的快捷键是 （ctrl + 空格）和（ctrl + l), 不过（ctrl + /)好像已经被占用了，无效，也不想修改；在开始测试的时候发现（ctrl + 空格）也无效，经检查发现，是因为WebStorm和Windows的输入法快捷键冲突导致，取消掉输入法的对应快捷键即可。设置完成之后，WebStorm就可以使用（ctrl + 空格)进行代码提示。
webstorm script标签回车空格设置
qq_40715610的博客
06-09 506
webstorm设置
Webstorm设置大括号内两边的空格
KyLen_Mou的博客
03-06 1490
这个设置藏得很深，找一下就行了。我这里演示typescript的import {xxx}改为import { xxx }使用代码格式化的快捷键一键格式化，我的快捷键是ctrl+alt+L。任何这种设置应该都能找得到。
设置webstorm/idea中的 Tab 键为 4 个空格
浩星
02-02 2585
前言： webstrom和idea因为是一家公司，有些功能都是很神似的 Setting(Project Settings)->Code Style->General在右侧的面板中， Schema那里选择Project,在下面把Use tab character的勾选去掉
解决：WebStorm设置Tab键的缩进不生效
qq_36305598的博客
09-27 2532
设置WebStorm中自己用得最舒服的缩进机制 第1步：打开File ---> Settings ---> Editor ---> Code Style ---> JavaScript ---> 设置缩进距离 ---> Apply ---> OK 一般情况下，做完第一步的调整就能得到适合自己的缩进模式了，但是它居然不生效！好了，我们继续 ...
WebStorm下将vue的代码缩进由2个空格改为4个空格
weixin_42504805的博客
02-26 1489
原文链接：https://blog.youkuaiyun.com/guoxuhan/article/details/79228635。这样配置是没有错的，于是找了下答案发现解决方案是修改项目根目录下的。已经找过解决方案但设置后无效的，可直接看文章的最后一句。将该indent_size的值修改为4保存即可。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值