强制 Sublime Text Editor 使用 4 个空格进行缩进

Question

I've been looking for the reason why my code kept showing 2 spaces instead of 4.我一直在寻找为什么我的代码一直显示 2 个空格而不是 4 个空格的原因。

In the bottom also show as Spaces : 4 .在底部也显示为Spaces : 4 。

Code代码

<!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>

This is hard to see.这很难看到。

Settings设置

I added these 3 lines我添加了这 3 行

 "tab_size": 4,
 "translate_tabs_to_spaces": true,
 "detect_indentation": false

All settings所有设置

{
    "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
}

How would one achieve this?如何实现这一目标？

Answer 1

The issue you're facing here is that you have set your preferred indent size in Sublime, but the file that you're working with is already indented in a way that doesn't match your settings.您在这里面临的问题是您在 Sublime 中设置了首选缩进大小，但是您正在使用的文件已经以与您的设置不匹配的方式缩进。

As such you should be able to notice that when you press Tab it skips four spaces like it should, and newly added code is indented the way you want it to be but existing code is left alone unless you manually fix it.因此，您应该能够注意到，当您按Tab 键时，它会像它应该的那样跳过四个空格，并且新添加的代码会按照您希望的方式缩进，但除非您手动修复它，否则现有代码将被保留。

The three settings that control this are the ones that you mentioned in your question:控制此设置的三个设置是您在问题中提到的设置：

tab_size controls how wide a tab character is assumed to be, in characters, which is used in a visual setting to determine not only how much space a tab should take up, but also things like the positioning of the indent guides. tab_size控制tab符假定的宽度（以字符为单位），它用于视觉设置中，不仅可以确定制表符应占用多少空间，还可以确定缩进指南的位置。
translate_tabs_to_spaces tells Sublime that any time it would insert a literal tab character, it should instead convert that tab into tab_size spaces on the fly. translate_tabs_to_spaces告诉 Sublime 任何时候它会插入一个文字tab符，它应该立即将该tab符转换为tab_size空格。 This is visualized in menus as an item named Indent Using Spaces being either checked or unchecked as appropriate.这在菜单中可视化为一个名为Indent Using Spaces的项目，根据需要选中或取消选中。
detect_indentation controls whether or not Sublime honours the above two settings to the letter or not. detect_indentation控制 Sublime 是否尊重上述两个设置。 When it's set to true (the default, but not what you're using) when a file is loaded Sublime tries to guess the appropriate indent settings by analyzing the file.当它设置为true （默认值，但不是您正在使用的）时，加载文件时 Sublime 会尝试通过分析文件来猜测适当的缩进设置。

Looking at the image in your question, you can see that the status line says Spaces: 4 to indicate that the settings are tab_size of 4 and translate_tabs_to_spaces being true , and the indent guides are positioned the way you want, but the code is indented wrong.查看问题中的图像，您可以看到状态行显示Spaces: 4表示设置为tab_size of 4并且translate_tabs_to_spaces为true ，并且缩进指南按您想要的方式定位，但代码缩进错误.

Since we know that the indent is definitely set to 4 but the code looks like it's indented only 2 , we know that your code doesn't contain any tab characters, or it would appear the way you want it to.由于我们知道缩进肯定设置为4但代码看起来只缩进了2 ，我们知道您的代码不包含任何制表符，否则它会以您希望的方式出现。 If you had detect_indentation turned on, the file would visually appear the same, but Sublime would change the tab_size to 2 for that file to match what it sees in the buffer.如果你打开了detect_indentation ，文件在视觉上看起来是一样的，但是 Sublime 会将该文件的tab_size更改为2以匹配它在缓冲区中看到的内容。

In any case, you have to take steps to manually fix the file so that it matches your preferred indentation settings.在任何情况下，您都必须采取措施手动修复文件，使其与您首选的缩进设置相匹配。

Perhaps the simplest way to do that would be to select the entire file with Selection > Select All (or the appropriate key), and then select Edit > Line > Reindent from the menu or Indentation: Reindent Lines from the command palette.也许最简单的方法是使用“ Selection > Select All （或相应的键）选择整个文件，然后从菜单中选择“ Edit > Line > Reindent ”或从命令面板中选择“ Indentation: Reindent Lines 。

Results of this may or may not be mixed;这样做的结果可能会也可能不会混合； it uses the same internal logic that Sublime uses for indenting while you're typing.它使用与 Sublime 在你打字时缩进相同的内部逻辑。 So based on the type of file that you're editing and the contents of that file, it's possible that the contents may be changed in ways other than just changing the indent.因此，根据您正在编辑的文件类型和该文件的内容，内容可能会以不同于仅更改缩进的方式进行更改。

If that's not desirable, you can perform the change manually with a few steps, using commands Sublime already has built in. The easiest place to find those commands is in the menu that pops up when you click the status bar where it's showing you your indent settings ( Spaces: 4 ), but make sure that you're actively editing the appropriate file first because every open file is allowed to have different settings:如果这不是你想要的，你可以通过几个步骤手动执行更改，使用 Sublime 已经内置的命令。找到这些命令的最简单的地方是在你点击状态栏时弹出的菜单中，它显示你的缩进设置（ Spaces: 4 ），但请确保您首先主动编辑适当的文件，因为每个打开的文件都可以有不同的设置：

Use Guess Settings From Buffer or Tab Width: 2 to change the tab size to the one uses in the file.使用Guess Settings From Buffer or Tab Width: 2将标签大小更改为文件中使用的大小。 The status line will change to Spaces: 2 and you'll see the number of indent guides double as the new setting takes effect.状态行将更改为Spaces: 2 ，随着新设置生效，您将看到缩进指南的数量翻了一番。
Use Convert Indentation to Tabs to convert all of the leading indent from spaces to tabs.使用Convert Indentation to Tabs将所有前导缩进从空格转换为制表符。 The status line will change to Tab Size: 2 to show you that it's using tabs, and if you select text in the buffer you can see that the leading white space is now tab characters.状态行将更改为Tab Size: 2以显示它正在使用制表符，如果您在缓冲区中选择文本，您可以看到前导空格现在是制表符。
Use Tab Width: 4 to change the size of the tabs.使用Tab Width: 4更改选项卡的大小。 The status line will change to Tab Size: 4 and you'll see the indent in the file visibly jump out to your new setting.状态行将更改为Tab Size: 4 ，您将看到文件中的缩进明显跳出到您的新设置。
Use Convert Indentation to Spaces .使用Convert Indentation to Spaces 。 The status line will change back to Spaces: 4 , which puts everything back to how it started originally, but with a modified file.状态行将变回Spaces: 4 ，这会将所有内容恢复到最初的开始方式，但文件已修改。

If you have a lot of such files to fix, these steps may be a bit tedious to take.如果您有很多此类文件需要修复，那么执行这些步骤可能会有些乏味。 In such a case, you can shortcut all of the steps by opening up a file that needs to be changed, opening the Sublime console with View > Show Console (or the key binding), and then entering the following command in the console input and hitting Enter :在这种情况下，您可以通过打开需要更改的文件，使用View > Show Console （或键绑定）打开 Sublime 控制台，然后在控制台输入中输入以下命令并按 Enter ：

view.run_command("detect_indentation"); view.run_command("detect_indentation"); view.run_command("unexpand_tabs", {"set_translate_tabs": True}); view.run_command("unexpand_tabs", {"set_translate_tabs": True}); view.settings().set("tab_size", 4); view.settings().set("tab_size", 4); view.run_command("expand_tabs", {"set_translate_tabs": True}) view.run_command("expand_tabs", {"set_translate_tabs": True})

I've formatted it here as a wrapped line for visibility, but when you paste it should be one long line.为了可见性，我在这里将它格式化为一条包裹线，但是当您粘贴它时，它应该是一条长线。 This executes each of the commands mentioned above one after the other, which should fix the file for you in one step.这会一个接一个地执行上面提到的每个命令，这应该会一步一步地为您修复文件。

Answer 2

In Sublime Text Editor在 Sublime 文本编辑器中

Click on View tab单击View选项卡
Select Indentation选择Indentation
Then select Tab Width:4然后选择Tab Width:4

You will get your code with 4 spaces and at the bottom you will see as Tab Size:2您将获得带有 4 个空格的代码，在底部您将看到Tab Size:2

Answer 3

You have你有

"tab_size": 4,
"translate_tabs_to_spaces": true,
"detect_indentation": false

In my opinion line 3 negates line 1. Try with:在我看来，第 3 行否定了第 1 行。尝试：

"tab_size": 4,
"translate_tabs_to_spaces": true,
"detect_indentation": true

Answer 4

Select all then press:全选然后按：

View → Indentation → Tab 4查看 → 缩进 → 标签 4

强制 Sublime Text Editor 使用 4 个空格进行缩进

问题描述

Code代码

Settings设置

4 个解决方案

解决方案1
9 2018-09-20 03:55:09

解决方案2
0 2018-09-30 18:52:50

解决方案3
0 2018-10-01 14:49:06

解决方案4
0 2021-06-07 08:20:57

强制 Sublime Text Editor 使用 4 个空格进行缩进

问题描述

Code代码

Settings设置

4 个解决方案

解决方案1 9 2018-09-20 03:55:09

解决方案2 0 2018-09-30 18:52:50

解决方案3 0 2018-10-01 14:49:06

解决方案4 0 2021-06-07 08:20:57

解决方案1
9 2018-09-20 03:55:09

解决方案2
0 2018-09-30 18:52:50

解决方案3
0 2018-10-01 14:49:06

解决方案4
0 2021-06-07 08:20:57