Chefranov
@Chefranov
Front-End, Back-End

Настройка Visual Studio Code?

Я занимаюсь версткой и решил попробовать перейти с Sublime Text на Visual Studio Code, но никак не могу привыкнуть. У меня не всегда срабатывает Emmet (создание блока по табу), не хватает автодополнения пути к файлу (в HTML и CSS), автопрефиксера для CSS, красивого форматирования кода одним кликом.
Подскажите настройки, подходящие плагины. И какие вы можете подсказать полезные плагины для веб-разработки?
  • Вопрос задан
  • 19018 просмотров
Пригласить эксперта
Ответы на вопрос 3
tomnolane
@tomnolane
самые основные:
Auto Close Tag - авто закрытие тегов
Auto Rename Tag - переименование парных тегов
Beautify - разжатие кода (из minify в стандартный вид)
highlight-mathing-tag - подсвечивание парных тегов (нужно настроить в конфиге, чтобы поярче было)
html snippets - сниппеты как в сублайме
insert <br> tag - вставка тега новой строки через шифт+enter
PHP Debug - деббагер для php (нужно настраивать)
Debugger for Chrome - JS дебаггер
vscode-icons - иконки для VSC
minify - сжатие кода
css auto prefix - автопрефиксы
Insert Numbers - полезное расширения для вставки чисел определенного формата во множество мест с инкрементом
================
ещё некоторые, которые я добавил и пользуюсь:
apache Conf (для подсветки .htaccess)
AutoFileName - дополнение пути (например для "requere" в node.js)
Bookmarks - делать закладки в коде
Bracket Pair Colorizer - подсвечивать парные скобки (квадратные, фигурные, прямоугольные, круглые) очень удобно
gitignore - добавляет .gitignore файл под проект (node.js, docker, yii2, laravel и т.д.)
GitLens — Git supercharged - показывает гит-коммиты в коде (и автора коммита, удобно в командной разработке)
HTML Class Suggestions
Live Server - открывает браузер, где в режиме "онлайн" видишь изменения в html
Markdown Preview Enhanced - тоже самое, что и Live Server, но только для страниц с markdown разметкой
Material Icon Theme - для красоты VSC)
Monokai Dark Soda - моя любимая тема разработки
MySQL Syntax - для подсветки синтаксиса sql
PHP Intellisense -
Quick gitignore - добавляет файл/директорию в gitgnore
Regex Previewer - помогает в регуляркой
SQL Server (mssql) - для работы с sql server
SVG Viewer - просматривать SVG картинки
Todo Tree - делать заметки, удобно
Remote FS - для удаленного подключения по FTP (удобно, если несколько серверов), пример конфига:
{ 
    "remotefs.remote": {"site": {
        "scheme": "ftp",
        "host": "1************01",
        "username": "ad**********ain",
        "password": "Lv************xF",
        "rootPath": "/"
      },
      "site2": {
        "scheme": "ftp",
        "host": "17**********1",
        "username": "a*****************m",
        "password": "************O",
        "rootPath": "/"
      },
      "moy-yandex": {
        "scheme": "ftp",
        "host": "a***********u",
        "username": "a***************mone",
        "password": "1***************W",
        "rootPath": "/"
      }
  }


UPD
Есть ещё хорошее приложение: Gremlins. Он подсвечивает невидимые символы в коде. Но его нужно немного "допилить", чтобы показывал невидимый символ юникод u+feff (образуется часто, когда кодировка страницы UTF-8 with BOM)
собственной как допилить я сам же описываю в своем вопросе: тут

что касается сннипетов для php: бывает такое, что они не срабатывают и тут две причины: пользователь достаточно быстро жмет TAB (VSC не успевает ещё понять, что пользователь закончил ввод) и когда достаточно долго работаешь в VSC без перезагрузки последнего.

ИМХО: рано или поздно эта проблема решиться. VSC стремительно развивается и такая проблема будет решена (до этого чтобы быстрее было - лучше написать сюда об этом)
Согласен с Artem , с тем, что Brackets имеет некоторые вещи лучше и оптимизированнее, чем VSC, и я для Front-end чаще работаю в Brackets (в большей части из-за возможности видеть online изменения тут же в браузере). Но главный минус Brackets от VSC - при большой кол-во плагинов он очень-очень тупит, также мне не нравится работа Brackets-ftp.
Послесловие:
VSC ещё учится и становится лучше. Рано или поздно он обгонит и Sublime, Atom и другие IDE - это вопрос времени, потому что: 1) он open source 2) финансирует и ведет разработку Microsoft 3) бесплатен!!! и последнее камень в огород всем крупным IDE
Ответ написан
@alphaDzhem
Продолжающий front-end разработчик
Здравствуйте!
К вышеперечисленным плагинам я бы добавил:
  • Bracket Pair Colorizer - для подсветки парных скобок
  • Class autocomplete for HTML - для автодополнения атрибута class
  • highlight-matching-tag - для подсветки парных тегов
  • vscode-htmltagwrap - для оборачивание выделенного текста в тег
  • Live Server - для запуска локального сервера и автообновления странички в браузере
  • Settings Sync - для сонхронизации настроек редактора между несколькими рабочими местами
Ответ написан
ShadowKing
@ShadowKing
Tech Lead of Java Back End project
Для форматирования кода: Beautify
Для автодополнения пути к файлу: Path Intellisense
Emmet встроен в VS Code, иногда корявый, но в последнем обновлении я проблем уже не замечал.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
НПК Катрен Новосибирск
от 70 000 ₽
Wallet One Москва
от 180 000 до 220 000 ₽
2GIS Новосибирск
от 150 000 до 200 000 ₽