I've been looking for the reason why my code kept showing 2 spaces instead of 4.

In the bottom also show as 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=":400,500" rel="stylesheet">
  <link rel="stylesheet" href="/css/hover-min.css">
  <link rel="stylesheet" href="/css/magnific-popup.css">
  <script src="//ajax.googleapis/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/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

 "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?

I've been looking for the reason why my code kept showing 2 spaces instead of 4.

In the bottom also show as 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./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./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./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

 "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?

Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked Sep 18, 2018 at 15:35 code-8 58.7k120 gold badges390 silver badges664 bronze badges

Select all the code (ctrl + a) and cut it (ctrl + x) and then paste it back in (ctrl + v) - that should trigger the reformat of the code and adhere to the tab size. – Latheesan Commented Sep 18, 2018 at 15:48
you want to use tab size 4 and spaces 4 is that what you mean? – Christian Gallarmin Commented Sep 18, 2018 at 16:16
@ChristianGallarmin : yes. That is what I want. – code-8 Commented Sep 18, 2018 at 16:20
are you using sublime text 3? – Christian Gallarmin Commented Sep 18, 2018 at 16:33
1 If your indent preference doesn't match your file and you want to change it, use the options in the indent menu (click the status bar where it says Spaces: 4); set the tab size to what it looks like visually (2), select convert indentation to tabs, change the indent back to what you want (4), select convert indentation to spaces. – OdatNurd Commented Sep 18, 2018 at 19:32

| Show 9 more ments

4 Answers 4

Sorted by: Reset to default 9

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.

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.

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.
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. This is visualized in menus as an item named Indent Using Spaces being either checked or unchecked as appropriate.
detect_indentation controls whether or not Sublime honours the above two settings to the letter or not. 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.

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.

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

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 mand palette.

Results of this may or may not be mixed; it uses the same internal logic that Sublime uses for indenting while you're typing. 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 mands Sublime already has built in. The easiest place to find those mands 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:

Use Guess Settings From Buffer or Tab Width: 2 to change the tab size to the one uses in the file. The status line will change to Spaces: 2 and you'll see the number of indent guides double as the new setting takes effect.
Use Convert Indentation to Tabs to convert all of the leading indent from spaces 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.
Use Tab Width: 4 to change the size of the tabs. 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.
Use 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.

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 mand in the console input and hitting Enter:

view.run_mand("detect_indentation"); view.run_mand("unexpand_tabs", {"set_translate_tabs": True}); view.settings().set("tab_size", 4); view.run_mand("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 mands mentioned above one after the other, which should fix the file for you in one step.

In Sublime Text Editor

Click on View tab
Select Indentation
Then select Tab Width:4

You will get your code with 4 spaces and at the bottom you will see as Tab Size:2

You have

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

In my opinion line 3 negates line 1. Try with:

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

Select all then press:

View → Indentation → Tab 4

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Force Sublime Text Editor to use 4 spaces for indentation - Stack Overflow

Code

Settings

Code

Settings

4 Answers 4

与本文相关的文章

评论列表(0)