代码

Question

我一直在寻找我的代码为什么显示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
}

人们将如何实现这一目标？

Answer 1

您在这里面临的问题是，您已经在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是{{ 1}}，并且缩进指南按您想要的方式定位，但是代码缩进错误。

由于我们知道缩进确实设置为true，但是代码看起来只缩进了4，因此我们知道您的代码不包含任何制表符，否则它将显示您想要的方式。如果您打开了2，则该文件在外观上看起来将是相同的，但是Sublime会将detect_indentation更改为tab_size，以使该文件与在缓冲区中看到的内容匹配。

无论如何，您都必须采取步骤手动修复文件，使其与您喜欢的缩进设置相匹配。

也许最简单的方法是使用2（或相应的键）选择整个文件，然后从菜单中选择Selection > Select All或从命令中选择Edit > Line > Reindent调色板。

此结果可能会混合也可能不会混合；它使用与Sublime在键入时用于缩进的相同内部逻辑。因此，根据您正在编辑的文件的类型和文件的内容，有可能以其他方式更改内容，而不仅仅是更改缩进。

如果不希望这样，您可以使用Sublime内置的命令，通过几个步骤来手动执行更改。找到这些命令的最简单的位置是在单击状态栏时弹出的菜单中您的缩进设置（Indentation: Reindent Lines），但请确保您正在首先主动编辑适当的文件，因为允许每个打开的文件进行不同的设置：

使用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控制台，然后在控制台输入中输入以下命令来简化所有步骤。然后按 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}）

我在这里将其格式化为环绕的行，以提高可见性，但是在粘贴时，它应该是一条长行。这将依次执行上述每个命令，这将一步为您修复文件。

Answer 2

在Sublime文本编辑器中

单击View标签
选择Indentation
然后选择Tab Width:4

您将获得4个空格的代码，在底部将显示为Tab Size:2

Answer 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

Answer 4

全选然后按：

查看 → 缩进 → 标签 4

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

代码

设置

4 个答案: