强制Sublime文本编辑器使用4个空格进行缩进
kyo*_*kyo 6 javascript sublimetext laravel sublimetext3 laravel-blade
我一直在寻找我的代码保持显示2个空格而不是4个空格的原因.
在底部也显示为Spaces : 4.
码
<!DOCTYPE html>
<html lang="en">
<head>
@include('layouts.fe.meta')
@include('layouts.fe.links')
<link rel="stylesheet" type="text/css" href="{{ elixir('assets/fe/css/all.css') }}"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<link rel="stylesheet" href="/css/hover-min.css">
<link rel="stylesheet" href="/css/magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body{
font-family: 'Roboto', sans-serif !important;
}
#back_home {
position: absolute;
left: 10px;
top: 5px;
}
</style>
</head>
<body>
<a href="/#portfolio" style="color:white;" class="btn btn-sm btn-success" id="back_home">Back Home</a>
<section id="page-portfolio" class="page-portfolio">
<div class="container">
<div class="row text-center" style="padding: 0px !important; margin: 0px !important;">
<header class="section-header">
<h2 class="section-title"><span>Portfolio</span></h2>
<div class="spacer"></div>
<p class="section-subtitle">While designing, I always balance usability and standard elements with other design criteria. </p>
</header>
<div class="clearfix">
<div class="cbp-l-filters-button cbp-l-filters-left">
<div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
<div data-filter=".personal" class="cbp-filter-item">Personal</div>
<div data-filter=".professional" class="cbp-filter-item">Professional</div>
<div data-filter=".freelance" class="cbp-filter-item">Freelance</div>
</div>
</div>
<div class="gallery">
@if(count($portfolios)>0)
@foreach($portfolios as $portfolio)
<?php $images = $portfolio->portfolioimages()->get()->toArray(); ?>
<div class="col-xs-6 col-sm-2 img-pop cbp-item {{ $portfolio->type }} " style="padding: 0px !important; margin: 0px !important;">
<a href="{!! $images[0]['image_path'] !!}">
<img class="hvr-shrink" src="{!! $images[0]['image_path'] !!}">
</a>
</div>
@endforeach
@endif
</div>
<a style="color:#555" href="/" class="btn btn-default hire-me">Go Back</a>
</div>
</div>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/jquery.cubeportfolio.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
/* Magnific Popup */
$('.img-pop').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
}
});
// init cubeportfolio
$('.gallery').cubeportfolio({
filters: '.cbp-l-filters-button',
loadMore: '#js-loadMore-lightbox-gallery',
loadMoreAction: 'click',
layoutMode: 'grid',
mediaQueries: [{
width: 1500,
cols: 5
}, {
width: 1100,
cols: 4
}, {
width: 800,
cols: 3
}, {
width: 480,
cols: 2
}, {
width: 320,
cols: 1
}],
defaultFilter: '*',
animationType: 'rotateSides',
gapHorizontal: 10,
gapVertical: 10,
gridAdjustment: 'responsive',
caption: 'zoom',
displayType: 'sequentially',
displayTypeSpeed: 100,
// lightbox
lightboxDelegate: '.cbp-lightbox',
lightboxGallery: true,
lightboxTitleSrc: 'data-title',
});
</script>
</body>
</html>
这很难看出来.
设置
我添加了这3行
"tab_size": 4,
"translate_tabs_to_spaces": true,
"detect_indentation": false
所有设置
{
"caret_extra_width": 2,
"caret_style": "phase",
"close_windows_when_empty": false,
"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
"copy_with_empty_selection": false,
"drag_text": false,
"draw_minimap_border": true,
"enable_tab_scrolling": false,
"findreplace_small": true,
"font_face": "Source Code Pro",
"font_options":
[
"no_round"
],
"font_size": 12,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
[
"SublimeLinter",
"Vintage"
],
"match_brackets_content": false,
"match_selection": false,
"match_tags": false,
"open_files_in_new_window": false,
"overlay_scroll_bars": "enabled",
"predawn_findreplace_small": true,
"predawn_quick_panel_small": true,
"predawn_sidebar_arrows": false,
"predawn_sidebar_large": true,
"predawn_sidebar_medium": false,
"predawn_sidebar_small": false,
"predawn_sidebar_xlarge": false,
"predawn_sidebar_xsmall": false,
"predawn_tabs_active_underline": true,
"predawn_tabs_large": true,
"predawn_tabs_medium": false,
"preview_on_click": true,
"scroll_past_end": false,
"scroll_speed": 5.0,
"show_full_path": true,
"sidebar_default": true,
"theme": "predawn-DEV.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"word_wrap": true,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"detect_indentation": false
}
问题
如何实现这一目标？
我现在对任何建议持开放态度.
任何提示/建议/帮助将非常感谢!
您在此处遇到的问题是您已在Sublime中设置了首选缩进大小,但您正在使用的文件已经以与您的设置不匹配的方式缩进.
因此,您应该能够注意到,当您按下Tab它时会跳过四个空格,并且新添加的代码会按照您希望的方式缩进,但除非您手动修复,否则现有代码将保持不变.
控制此操作的三个设置是您在问题中提到的设置:
tab_size控制tab字符的宽度,以字符显示,在视觉设置中使用,不仅可以确定标签应占用多少空间,还可以确定缩进指南的位置等内容.translate_tabs_to_spaces告诉Sublime,无论tab何时插入文字字符,它都应该将该标签转换为动态tab_size空格.这在菜单中可视化为一个名为Indent Using Spaces被检查或取消选中的项目.detect_indentation控制Sublime是否尊重上述两个设置.在true加载文件时将其设置为(默认设置,但不是您正在使用的设置),Sublime会尝试通过分析文件来猜测相应的缩进设置.
看着你的问题的形象,你可以看到,状态行说Spaces: 4,以表明设置tab_size的4和translate_tabs_to_spaces福祉true,以及缩进辅助定位您想要的方式,但代码缩进错误.
由于我们知道缩进是明确设置的,4但代码看起来只是缩进2,我们知道您的代码不包含任何制表符,或者它会以您希望的方式显示.如果你已经detect_indentation打开,该文件将在视觉上看起来一样,但卓异将改变tab_size到2该文件,以匹配它所认为的缓冲区.
在任何情况下,您都必须采取措施手动修复文件,使其与您首选的缩进设置相匹配.
也许最简单的方法是用Selection > Select All(或适当的键)选择整个文件,然后Edit > Line > Reindent从菜单或Indentation: Reindent Lines命令面板中选择.
结果可能混合也可能不混合; 它使用与Sublime在输入时用于缩进的相同内部逻辑.因此,根据您正在编辑的文件类型和该文件的内容,可能会以不同于更改缩进的方式更改内容.
如果这是不可取的,您可以使用Sublime已经内置的命令,通过几个步骤手动执行更改.找到这些命令的最简单的地方是在单击状态栏时弹出的菜单,它会显示您的缩进settings(Spaces: 4),但请确保您首先主动编辑相应的文件,因为每个打开的文件都允许有不同的设置:
使用
Guess Settings From Buffer或Tab Width: 2将选项卡大小更改为文件中使用的大小.状态行将更改为Spaces: 2,当新设置生效时,您将看到缩进指南的数量加倍.使用
Convert Indentation to Tabs到所有领先的缩进的转换,从空格选项卡.状态行将更改为Tab Size: 2显示它正在使用选项卡,如果您在缓冲区中选择文本,则可以看到前导空白区域现在是制表符字符.使用
Tab Width: 4更改标签的大小.状态行将更改为Tab Size: 4,您将看到文件中的缩进明显跳转到新设置.使用
Convert Indentation to Spaces.状态行将更改回Spaces: 4,这会将所有内容都恢复到最初的开始状态,但是会使用修改后的文件.
如果你有很多这样的文件要修复,这些步骤可能会有点繁琐.在这种情况下,您可以通过打开需要更改的文件,打开Sublime控制台View > Show Console(或键绑定),然后在控制台输入中输入以下命令并点击来快捷所有步骤Enter:
view.run_command( "detect_indentation"); view.run_command("unexpand_tabs",{"set_translate_tabs":True}); view.settings().set("tab_size",4); view.run_command("expand_tabs",{"set_translate_tabs":True})
我在这里将它格式化为可见性的包装线,但是当你粘贴时它应该是一条长线.这将一个接一个地执行上面提到的每个命令,这应该在一个步骤中为您修复文件.
