Использовать csscomb для VS Code

Question

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

Не могли бы вы рассказать мне, как настроить код VS и/или csscomb для работы следующим образом? Я использую Windows 10 Pro.

Answer 1

Согласно csscomb page на площадке VS Кодекса ...

Они имеют "Поддерживаемые параметры"

csscomb.preset

Тип: Object или строковые

Defaut: {}

Имя Config. Должен быть один из : csscomb, zen, yandex или объект, содержащий настраиваемую конфигурацию или путь к конфигу.

И следующее предупреждение:

Внимание!

Если вы хотите указать файл в текущем каталоге, путь должен быть начинаться с ./ или ../ если относительно текущего каталога. Также вы можете использовать каталог HOME как символ ~ .

Другими словами, поскольку по умолчанию нет, вы должны установить либо предустановленную конфигурацию, либо путь к настраиваемой конфигурации.

Чтобы настроить csscomb в VS Код:

1. Перейдите в меню Файл> Настройки> Настройки
2. Выберите вкладку "Настройки пользователя" в правом окне (применить конфигурации глобально)
3. Разверните параметры «CSScomb configuration»
4. Нажмите на карандаш слева от «csscomb.preset»
5. Нажмите «Скопировать в настройки»

6. Введите путь к пользовательскому конфигурации или выбрать предустановленный

   { 
       "csscomb.preset": "~/.vscode/.csscomb.json" 
   } 
   

   ИЛИ один из ("csscomb", "дзен", "яндекс")

   { 
       "csscomb.preset": "csscomb" 
   } 
   

Далее вам необходимо создать файл .csscomb.json в этом месте. Я выбрал каталог C: \ Users \ username \ .vscode, потому что там VS Code также загружает расширения в Windows.

Вот конфиг я создал с помощью csscomb-х config generator:

{ 
    "always-semicolon": true, 
    "color-case": "upper", 
    "block-indent": " ", 
    "color-shorthand": true, 
    "element-case": "lower", 
    "eof-newline": false, 
    "leading-zero": false, 
    "quotes": "double", 
    "sort-order-fallback": "abc", 
    "space-before-colon": "", 
    "space-after-colon": " ", 
    "space-before-combinator": " ", 
    "space-after-combinator": " ", 
    "space-between-declarations": "\n", 
    "space-before-opening-brace": " ", 
    "space-after-opening-brace": "\n", 
    "space-after-selector-delimiter": " ", 
    "space-before-selector-delimiter": "", 
    "space-before-closing-brace": "\n", 
    "strip-spaces": true, 
    "tab-size": true, 
    "vendor-prefix-align": true 
} 

Вы можете также включить опцию для сортировки тегов (или скопировать его из одного из их presets on git):

{ 
    "sort-order": [ 
     [ 
      "font", 
      "font-family", 
      "font-size", 
      "font-weight", 
      "font-style" 
     ], 
     [ 
      "position", 
      "z-index" 
     ] 
    ] 
} 

Теперь вам должен иметь возможность форматировать CSS в VS Code, набрав ctrl+shift+p, затем набрав «CSScomb», затем enter.

Расширения «Formatter» должны быть распознаны по умолчанию для форматирования клавиатуры shift+alt+f, однако я не получил этого, чтобы работать. Я думаю, что это что-то developer has to configure.

Вместо этого, вы можете создать свою собственную комбинацию клавиш в VS Код:

1. Перейдите в меню Файл> Настройки> Сочетания клавиш
2. Нажмите на ссылку вверху, чтобы отредактировать keybindings.json

3. Добавить ваш пользовательский привязкой для ключей

   { 
       "key": "ctrl+shift+c", 
       "command": "csscomb.execute" 
   } 
   

Теперь вы должны быть установлены!