代码

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

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

标签： javascriptlaravelsublimetext3sublimetextlaravel-blade

解决方案

您在这里面临的问题是您在 Sublime 中设置了首选缩进大小，但是您正在使用的文件已经以与您的设置不匹配的方式缩进。

因此，您应该能够注意到，当您按下Tab它时，它会跳过四个空格，并且新添加的代码会按照您希望的方式缩进，但现有代码会被单独留下，除非您手动修复它。

控制此的三个设置是您在问题中提到的设置：

tab_size控制tab假设字符的宽度，以字符为单位，用于视觉设置，不仅可以确定制表符应该占用多少空间，还可以确定缩进指南的位置。
translate_tabs_to_spaces告诉 Sublime 任何时候它会插入一个文字tab字符，它应该立即将该制表符转换为tab_size空格。这在菜单中被可视化为一个名为Indent Using Spaces被选中或未选中的项目。
detect_indentation控制 Sublime 是否尊重上述两个设置。当加载文件时设置为true（默认值，但不是您使用的）时，Sublime 会尝试通过分析文件来猜测适当的缩进设置。

查看问题中的图像，您可以看到状态行表示Spaces: 4设置是tab_sizeof4和translate_tabs_to_spacesbeing true，并且缩进指南按您想要的方式定位，但代码缩进错误。

由于我们知道缩进肯定设置为，4但代码看起来只是缩进2，我们知道您的代码不包含任何制表符，否则它会按照您想要的方式显示。如果你detect_indentation打开了，文件在视觉上看起来是一样的，但是 Sublime 会改变那个文件的tab_sizeto2以匹配它在缓冲区中看到的内容。

在任何情况下，您都必须采取措施手动修复文件，使其与您首选的缩进设置相匹配。

也许最简单的方法是使用（或适当的键）选择整个文件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，这会将所有内容恢复到最初的启动方式，但文件已修改。

如果您有很多这样的文件要修复，这些步骤可能会有点乏味。在这种情况下，您可以通过打开一个需要更改的文件，使用View > Show Console（或键绑定）打开 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})

我在此处将其格式化为换行以提高可见性，但是当您粘贴时，它应该是一根长线。这将一个接一个地执行上面提到的每个命令，这应该会在一个步骤中为您修复文件。

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

问题描述

代码

设置

解决方案

推荐阅读