解决eslint与webstorm关于script标签的缩进问题

最新推荐文章于 2024-03-06 21:52:44 发布
原创 最新推荐文章于 2024-03-06 21:52:44 发布 · 4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Vue CLI项目中，如何解决ESLint与Webstorm在<script>标签缩进规则上的冲突。通过修改.eslintrc.js文件的rules配置，允许Webstorm的代码格式化风格与ESLint规则保持一致。

问题重现
在vue-cli中，使用eslint时会对代码进行校验，其在.vue文件中支持的是不缩进，如下所示：在这里插入图片描述
而在webstorm中使用格式化代码会将代码格式化为：
在这里插入图片描述
这样子就不符合eslint的要求了，如果想支持webstorm的编码格式，应该进行如下设置：

  • 打开项目根下的.eslintrc.js文件，将rules节点添加如下配置项：
rules: {
   
   
  'vue/script-indent': ['error', 2, {
   
   'baseIndent'
最低0.47元/天 解锁文章
webstrom软件js全部error-js缩进判断故障-ESLint:Expected indentation of X spaces but found Y
ex_xyz的博客
06-08 406
webstrom软件js全部error-js缩进判断故障-ESLint:Expected indentation of X spaces but found Y
解决eslint与webstorm/hbuildx等关于script标签的缩进问题
D.D.U的博客
11-07 1025
问题重现 在vue-cli中，使用eslint时会对代码进行校验，其在.vue文件中支持的是不缩进，如下所示： <script> import HelloWorld from './components/HelloWorld' export default { name: 'App', components: { HelloWorld } } </scrip...
.vue 文件中 script 标签出现缩进问题
weixin_44119268的博客
02-27 983
在.vue文件中的script出现缩进问题，报错如下: Expected indentation of 0 spaces but found 2.
vue html indent,javascript - vue-cli3 eslint vue/script-indent conflicting with compiler - Stack Ove...
weixin_42321940的博客
06-21 441
When I have my .eslint.js file include the rule:"vue/script-indent": ["error",4,{"baseIndent": 1,"switchCase": 1,}]and save, it generates the error:error: Expected indentation of 32 spaces but found 2...
eslint 关闭首行缩进
最新发布
02-11
### 关闭 ESLint 首行缩进检查 为了禁用 ESLint 对首行缩进的检查，在 `package.json` 文件中的 `eslintConfig.rules` 下添加...通过上述方法能够有效阻止 ESLint 报告关于首行缩进的问题，并让开发环境适应这一更改。
vue3+eslint7.32.0 自动修复规范代码 开发工具 webstorm
h5433的博客
03-29 7830
安装指定的eslint //package.json 的devDependencies 加上 运行npm i "babel-eslint": "^10.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-vue": "^7.13.0", 设置eslint 规则文件.eslintrc.js
WebStorm下将vue的代码缩进由2个空格改为4个空格
weixin_42504805的博客
02-26 1545
原文链接：https://blog.youkuaiyun.com/guoxuhan/article/details/79228635。这样配置是没有错的，于是找了下答案发现解决方案是修改项目根目录下的。已经找过解决方案但设置后无效的，可直接看文章的最后一句。将该indent_size的值修改为4保存即可。
webStorm的代码换行自动缩进设置
w506667090的博客
04-26 1万+
我们写代码的时候，一般代码缩进都是4个空格，但是在前端开发中，建议使用2个空格来进行代码缩进。 1.设置HTML页面代码缩进 点击Webstorm中File->Settings->Editor->Code Style->HTML(也可以使用快捷键Ctrl+Alt+S进入Settings，搜索HTML)。来设置HTML的代码缩进。 2.设置JavaScript代码缩进 和上面一样，点击Webstorm中File->Settings->Editor...
Expected indentation of 16 spaces but found 8 spaces.eslintvue/script-indent
qq_44792224的博客
11-01 1120
问题：Expected indentation of 16 spaces but found 8 spaces.eslintvue/script-indent原因： 严格地检查缩进问题，并不是报错。
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题
05-28 513
打开项目根上下的.eslintrc.js，将rules节点中添加以下配置项。 rules: { 'vue/script-indent': ['error', 2, {'baseIndent': 1}] } 其中第1个2是指统一缩进2个空格，第2个1是指1倍缩进。 另外需要添加以下节点，与rules同级： overrides: [ { 'files': ['*.vue'...
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题（附图）
大道至简
12-08 7735
背景不多介绍了，直接上代码。 打开.eslintrc.js，将rules节点中添加以下配置项。 rules: { 'vue/script-indent': ['error', 2, {'baseIndent': 1}] } 其中第1个2是指统一缩进2个空格，第2个1是指1倍缩进。 ...
webstorm 设置缩进不生效
热门推荐
鹿的迷雾林的博客
04-25 1万+
设置代码缩进 1. 依次打开files —- settings —- Editor —- Code Style —- JavaScript 2.设置Tabs and Indents 设置为你想要的宽度 3.重点来了，设置完后有可能始终不生效 选中Plugins , 在右边的搜索框内搜索editorconfig，显示出这个插件列表，将他后面的勾勾去掉，点击Apply，O...
webstorm 设置js或者html文件自动缩进为4个空格不生效
weixin_30668887的博客
08-07 322
转载自 https://blog.youkuaiyun.com/weixin_34123613/article/details/86007465 转载于:https://www.cnblogs.com/taochengyong/p/11314968.html
Webstorm设置大括号内两边的空格
KyLen_Mou的博客
03-06 1519
这个设置藏得很深，找一下就行了。我这里演示typescript的import {xxx}改为import { xxx }使用代码格式化的快捷键一键格式化，我的快捷键是ctrl+alt+L。任何这种设置应该都能找得到。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值