Настройка VS Code

1) Устанвливаем

https://code.visualstudio.com/docs/setup/linux

sudo snap install --classic code

2) Settings-> Wheel Zoom

3) Untick Close Empty Groups

4) Search

-> format on Save

-> format on Paste

5) Настраиваем свои сниппеты:

settings-> user snippets-> new global snippets file-> my

6) CTRL+SHIFt+X - вкладка "Расширения"

7) Как сделать,чтобы было несколько кареток?

• Windows: Ctrl + Alt + Arrow Keys

• Linux: Shift + Alt + Arrow Keys

• Mac: Opt + Cmd + Arrow Keys

8) Live Sass Compiler ставим

CTRL+SHIFt+X -> Live Sass Compiler

Настраиваем:

Создаем файл style.scss в папке scss.

Нажимаем внизу кнопку watch sass.

Если хотим, чтобы файл css создавался в папке css. Для этого нажимаем ctrl+shift+P

Вводим preferences open settings json -> и добавляем

 "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "css",
            "autoprefix": "last 5 versions"
        }
    ]

Чтобы запустить live server, то нажимаем Go Live внизу

9) Устанавливаем плагин SCSS IntelliSense (автоподсказки)

10) Устанавливаем плагин SCSS Formatter

11) Устанавливаем плагин Auto complete tag (закрывающийся тег тоже переименовываетсяя)

12) Ставим Bracket Pair Colorizer

13) СТавим indent rainbow

14) СТавим better comments

15) Стаим Bem helper

Переопределим горячие клавиши с alt на ctrl. НА убунте не смог убрать переключение на меню. Хотя есть настройка в терминале edit-> preferences->advanced->disable all menu access

16) СТавим eCSStractor for VSCode (Извлекает классы из HTML)

Настраиваем горячие клавиши:

Находим команду eCSStractor Run with BEM Nesting -> CTRL + E + R

17) CSS NAvigation (подсказки классов и быстрое перемещение)

alt+f12 - выбрать какой именно стиль найти ,если испольщуется media

18) image-preview

19) Debugger for chrome

20) vscode google translate(перервод ALT+SHIFT+T) Горячие пока не работают на убунте

21) Project manager