Принудительно использовать Sublime Text Editor, чтобы использовать 4 пробела для отступа - PullRequest
0 голосов
/ 18 сентября 2018

Я искал причину, по которой мой код показывал 2 пробела вместо 4.

Внизу также отображается как Spaces : 4.

enter image description here


Код

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

Как этого добиться?

Ответы [ 3 ]

0 голосов
/ 30 сентября 2018

В Sublime Text Editor

  1. Нажмите на вкладку View

  2. Выбрать Indentation

  3. Затем выберите Tab Width:4

Вы получите код с 4 пробелами, а внизу вы увидите как Tab Size:2

0 голосов
/ 01 октября 2018

У вас есть

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

На мой взгляд, строка 3 сводит на нет строку 1. Попробуйте:

"tab_size": 4,
"translate_tabs_to_spaces": true,
"detect_indentation": true
0 голосов
/ 20 сентября 2018

Проблема, с которой вы сталкиваетесь, заключается в том, что вы установили предпочтительный размер отступа в Sublime, но файл, с которым вы работаете, уже имеет отступ, который не соответствует вашим настройкам.

Таким образом, вы должны заметить, что когда вы нажимаете Tab , она пропускает четыре пробела, как и должно быть, и вновь добавленный код отступает так, как вы хотите, но существующий кодоставьте в покое, если вы не исправите это вручную.

Три настройки, которые управляют этим, - те, которые вы упомянули в своем вопросе:

  • tab_size определяет, насколько широко *Предполагается, что символ 1012 * представляет собой символы, которые используются в визуальной настройке для определения не только того, сколько места должно занимать вкладка, но и таких вещей, как расположение направляющих отступов.

  • translate_tabs_to_spaces сообщает Sublime, что всякий раз, когда он вставляет буквальный символ tab, он должен вместо этого преобразовать эту вкладку в tab_size пробелы на лету.Это отображается в меню как элемент с именем Indent Using Spaces, который либо проверяется, либо не проверяется соответствующим образом.

  • detect_indentation определяет, будет ли Sublime соблюдать две вышеупомянутые настройки для буквы или нет,Когда установлено значение true (по умолчанию, но не то, что вы используете), когда файл загружен, Sublime пытается угадать соответствующие настройки отступа, анализируя файл.

Lookingна изображении в вашем вопросе вы можете видеть, что в строке состояния написано Spaces: 4, чтобы указать, что настройки tab_size из 4 и 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, что возвращает все к тому, как оно было изначально, но с измененным файлом.

Если вам нужно исправить много таких файлов, эти шаги могут быть немного утомительными.В таком случае вы можете сократить все шаги, открыв файл, который необходимо изменить, открыв Sublime консоль с View > Show Console (или привязку клавиш), а затем введя следующую команду в консоли ввода и нажав Введите :

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

Я отформатировал его здесь как обернутую строку для видимости, но при вставке это должна быть одна длинная строка.Это выполняет каждую из команд, упомянутых выше, одну за другой, что должно исправить файл за один шаг.

Sample of the conversion in process

...