强制 Sublime Text Editor 使用 4 个空格进行缩进
Posted
技术标签:
【中文标题】强制 Sublime Text Editor 使用 4 个空格进行缩进【英文标题】：Force Sublime Text Editor to use 4 spaces for indentation 【发布时间】：2019-02-22 16:46:19 【问题描述】：我一直在寻找我的代码一直显示 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
如何实现这一目标？
【问题讨论】：
选择所有代码 (ctrl + a) 并剪切它 (ctrl + x) 然后将其粘贴回 (ctrl + v) - 这应该会触发代码的重新格式化并坚持标签大小。 你想使用标签大小 4 和空格 4 是你的意思吗？ @ChristianGallarmin：是的。这就是我想要的。 你在使用 sublime text 3 吗？ 如果您的缩进首选项与您的文件不匹配并且您想更改它，请使用缩进菜单中的选项（单击显示Spaces: 4 的状态栏）；将标签大小设置为视觉上的样子 (2)，选择 convert indentation to tabs，将缩进改回您想要的 (4)，选择 convert indentation to spaces。
【参考方案1】：
您在这里面临的问题是您在 Sublime 中设置了首选缩进大小，但您正在使用的文件已经以与您的设置不匹配的方式缩进。
因此，您应该能够注意到，当您按 Tab 时，它会像应有的那样跳过四个空格，并且新添加的代码会按照您希望的方式缩进，但现有代码会被单独保留除非你手动修复它。
控制此的三个设置是您在问题中提到的设置：
tab_size 控制假设tab 字符的宽度（以字符为单位），它用于视觉设置，不仅可以确定选项卡应占用多少空间，还可以确定诸如缩进指南的定位。
translate_tabs_to_spaces 告诉 Sublime 任何时候插入文字 tab 字符时，它都应该将该制表符即时转换为 tab_size 空格。这在菜单中显示为一个名为 Indent Using Spaces 的项目，根据需要选中或取消选中。
detect_indentation 控制 Sublime 是否尊重上述两个设置。当加载文件时设置为true（默认值，但不是您正在使用的）时，Sublime 会尝试通过分析文件来猜测适当的缩进设置。
查看您问题中的图像，您可以看到状态行显示Spaces: 4 表示设置为4 的tab_size 和translate_tabs_to_spaces 为true，并且缩进指南位于你想要的方式，但是代码缩进错误。
由于我们知道缩进肯定设置为4，但代码看起来只是缩进2，我们知道您的代码不包含任何制表符，否则它会以您想要的方式显示到。如果你打开了detect_indentation，文件在视觉上看起来是一样的，但是Sublime会将tab_size更改为2，以匹配它在缓冲区中看到的内容。
在任何情况下，您都必须采取措施手动修复文件，使其与您首选的缩进设置相匹配。
也许最简单的方法是使用Selection > Select All（或相应的键）选择整个文件，然后从菜单中选择Edit > Line > Reindent 或从命令面板中选择Indentation: Reindent Lines。
这个结果可能会也可能不会好坏参半；它使用与 Sublime 用于在您键入时缩进相同的内部逻辑。因此，根据您正在编辑的文件类型和该文件的内容，内容可能会以不只是更改缩进的方式进行更改。
如果不希望这样做，您可以通过几个步骤手动执行更改，使用 Sublime 已经内置的命令。找到这些命令的最简单位置是在您单击显示状态栏时弹出的菜单中您的缩进设置 (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，这会将所有内容恢复到最初的状态，但文件已修改。
如果您要修复大量此类文件，则执行这些步骤可能有点乏味。在这种情况下，您可以通过打开需要更改的文件，使用 View > Show Console（或键绑定）打开 Sublime 控制台，然后在控制台输入中输入以下命令并点击输入：
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)
我在这里将其格式化为换行以提高可见性，但是当您粘贴时，它应该是一长行。这会一个接一个地执行上面提到的每个命令，这应该会在一个步骤中为您修复文件。
【讨论】：
【参考方案2】：在 Sublime 文本编辑器中
点击View标签
选择Indentation
然后选择Tab Width:4
您将获得包含 4 个空格的代码，在底部您将看到 Tab Size:2
【讨论】：
【参考方案3】：你有
"tab_size": 4,
"translate_tabs_to_spaces": true,
"detect_indentation": false
在我看来，第 3 行否定第 1 行。尝试：
"tab_size": 4,
"translate_tabs_to_spaces": true,
"detect_indentation": true
【讨论】：
【参考方案4】：全选然后按：
查看 → 缩进 → Tab 4
【讨论】：
以上是关于强制 Sublime Text Editor 使用 4 个空格进行缩进的主要内容，如果未能解决你的问题，请参考以下文章
如何强制 Sublime Text 每个制表符缩进两个空格？
如何修改sublime text2默认的Monokia配色方案让其更适合PHP
Rails 5.2 无法使用 Sublime Text 打开 Rails 凭据