Переход с Notepad++ на VS Code

Долгие годы верой и правдой служил Notepad++. Доходило до того что я использовал его даже в Linux (через Wine). Несмотря на до сих пор его высокую популярность, все же захотел перейти на VS Сode, и не пожалел. Все таки в Notepad++ несмотря на множество плагинов, функционал маловат и продуктивность из-за этого падает. VS Code же напротив сейчас на гребне волны, и даже из коробки в нем много чего есть. Чего стоит только тесная интеграция с git. Хотя зачастую по старой памяти параллельно открыта обычная консоль git, и кое что все равно приходится делать там. Но, тем не менее, наиболее частые операции — add, commit, checkout, push — теперь можно делать прямо из редактора. Однако трудности перехода все же были. Конечно, они в какой-то мере специфичны для меня, но возможно некоторые решения пригодятся и вам. Перед тем как перейти к деталям, замечу, что установка плагинов в VS Code вынесена на основную панель, а не запрятана в недрах меню (в добавок с недвусмысленной иконкой — собери все из кубиков).

Ну а теперь по порядку:

Метки на полях, с быстрым переходом по ним

В Npp они ставились ctrl+F2 или просто мышкой на полях. Переход по ним через F2. Так как бывает приходится иметь дело с длинными файлами, а так же редактировать параллельно код в двух противоположных концах файла, эта функция очень удобна.

Для VS Code есть несколько плагинов на эту тему. Есть например Numbered Bookmarks, который даже судя по названию позволяет ставить нумерованные метки, но для меня это лишне. Остановился на просто Bookmarks. По умолчанию там ctrl+alt+K — создать метку, ctrl+alt+J переход на предыдущую, а ctrl+alt+L на следующую. Метки сохраняются в папке мета-информации .vccode (это нужно иметь ввиду при отслеживании файлов в git).

Вставка HTML

В Notepad++ у меня за это отвечал плагин WebEdit с настроенными кнопками употребительных тегов на панели. Плагин одинаково хорошо вставляет и оборачивает код.

Для VS Code для простой вставки тега, достаточно написать его название и нажать Enter (зависит от типа файла, и соответствующего авто-завершения). Обертку кода в тег тоже можно сделать без плагинов. Для этого выделяем код для обертки, нажимаем shift+ctrl+P (это универсальная комбинация для вызова многих команд), выбираем действие Emmet: Wrap Individual Lines with Abbreviation (Скорее всего оно будет первое в списке, то есть просто нажимаем Enter), затем пишем название тега и еще раз Enter. Довольно мудрено, поэтому я стал искать плагин. Мне пришелся по душе htmltagwrap. Здесь горячая клавиша по умолчанию — alt+W и сразу же происходит обертка тегом P. Если нужен другой тег, просто пишете его название, например div и тег меняется на нужный. К сожалению при нескольких уровнях вложенности иногда бывает работает не корректно и не прописывается автоматически имя завершающего тега, возможно это исправят позднее.

Определение кодировки

Увы, еще встречается кодировка отличная от UTF-8 кое где, например в том же Bitrix. И нужно корректное определение файлов с ней. Кстати, Notepad++ тоже не всегда корректно определял кодировку и мог спутать windows-1251 с Macintosh.

Чтобы VS Code определял кодировку при открытии файла, нужно включить опцию autoGuessEncoding. Для этого идем в меню File -> Preferences -> Settings. Вводим в поиске эту опцию и ставим галку. Теперь редактор должен определять кодировку сам, иначе придется выбирать ее вручную, нажав на название кодировки справа внизу экрана.

Прочее

По умолчанию стоит темная тема оформления. Но я привык к светлой, возможно и вы захотите выбрать что то иное. Для выбора темы нужно нажать не совсем типичную комбинацию клавиш ctrl+K+T, затем выбрать нужную в выпадающем списке. Мне понравилась предустановленная тема Light (Visual Studio). Для особых ценителей можно установить через плагины тему NotepadPlusPlus Remixed Theme. Видимо создана тем, кто так же переходил с Npp.

Хотя в этой статье не ставится цель осветить все полезные плагины, а лишь те что помогают плавно перейти с Npp, упомяну еще парочку.

  • Git History — позволяет посмотреть историю коммитов, подобно Git GUI. На панели справа вверху появляется иконка для вызова плагина.
  • WakaTime — тайм-трекер. Ведет подробную статистику времени, которое вы провели за кодингом. Требуется регистрация на одноименном сайте — wakatime.com — и последующий ввод Api Key в настройках плагина. Для этого нажимаем универсальное shift+ctrl+p, выбираем WakaTime: Api Key, и вставляем ключ полученный на сайте. Саму статистику можно посмотреть на сайте, кликнув на времени, которое отследил Waka, на нижней панели в редакторе.

Выпадающее меню на CSS без доступа к HTML, без JavaScript

В некоторых онлайн конструкторах сайтов на определенных тарифах очень ограничен функционал (например — Битрикс24). Бывает нет возможности вставить свой JavaScript-код, а так же поменять HTML-код готовых блоков. Такая политика в общем то не удивительна, надо же как-то монетизировать такие продукты.

Что если все же хочется выпадающее меню на сайте, а базовые модули с таким функционалом не доступны. Попробуем сделать чисто на CSS. Бывает, что его добавлять как раз разрешают.

Итак пример структуры одноуровневого меню, которое будем превращать в двухуровневое:

1
2
3
4
5
6
7
8
9
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Four</li>
<li>Five</li>
<li>Sub el 1</li>
<li>Sub el 2</li>
</ul>

И CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
ul {
  word-spacing: -.36em;
  display: table;
  position: relative;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  padding: 10px;
  word-spacing: normal;
  height: 20px;
  width: 80px;
  background: gray;
}
 
ul:hover li {
  display: inline-block;
}
 
li:nth-child(6),
li:nth-child(7) {
  display: none;
  position: absolute;
  left: 200px;
  background: lightgray;
}
li:nth-child(6) {
  top: 40px;
}
li:nth-child(7) {
  top: 80px;
}
li:nth-child(1):hover ~ li:nth-child(6),
li:nth-child(2):hover ~ li:nth-child(6),
li:nth-child(4):hover ~ li:nth-child(6),
li:nth-child(5):hover ~ li:nth-child(6),
li:nth-child(1):hover ~ li:nth-child(7),
li:nth-child(2):hover ~ li:nth-child(7),
li:nth-child(4):hover ~ li:nth-child(7),
li:nth-child(5):hover ~ li:nth-child(7) {
  display: none;
}

Вот что у нас получилось:

  • First
  • Second
  • Third
  • Four
  • Five
  • Sub el 1
  • Sub el 2

Как видно, выпадающие пункты меню размещены в конце, иначе начинаются проблемы при отображении. Некоторый CSS-код относится к решению проблемы отступов между элементами типа inline-block (В частности word-spacing и display: table у UL). Неудобство, конечно, еще в том что все отступы пунктов выпадающего меню придется прописывать вручную. А для разных разрешений экрана, по видимому, их надо будет настраивать с помощью медиа-запросов CSS.

Но суть в том, что все же есть техническая возможность сделать выпадающее меню для клиентов, которые пока не готовы платить дополнительный ежемесячный взнос за расширенный функционал онлайн-конструктора.

Использование Git, если мало места на хостинге или нет доступа к SSH

Система контроля версий, например Git, одна из таких вещей, без которых чувствуешь себя как без рук. После непродолжительного периода привыкания, конечно. Но рассмотрим специфичную ситуацию, с которой приходилось сталкиваться.

Что если нужно вести разработку сайта, а к SSH доступа нет. Или, например, для хранения репозитория на рабочем сервере нет места. Конечно, речь идет не о крупных проектах. А скорее о небольших сайтах, где экономия иногда идет на всём и используется недорогой shared-хостинг. Повод ли это отказываться от Git? Не обязательно. Хотя конечно некоторые его преимущества будут потеряны.

Суть подхода проста. На локальном компьютере можно вести разработку как обычно, отличается лишь выгрузка на production (рабочий сервер). Обновления можно делать с помощью патчей по FTP. А для формирования патча можно использовать следующий код из консоли (где COMMITHASH — хеш коммита, начиная с которого делаем патч). Команды выполняются из рабочей директории сайта:

mkdir patch
cp --parents $(git diff --no-commit-id --name-only -r COMMITHASH) ./patch

После выполнения этих команд, в папке patch будет сформирован патч, который включает все измененные файлы от указанного коммита до HEAD, с сохранением структуры папок. Остаётся залить содержимое этой директории по FTP на сервер.

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

Сложно представить такой подход в команде разработчиков, но если разработчиков всего два или три, достаточно использовать Git-сервер (или например приватный репозиторий на Bitbucket), через который будет идти обмен данными. А загрузку патчей на рабочий сайт по FTP может осуществлять, по согласованию, один человек.

Включение wi-fi на ноутбуке, если не работает аппаратная кнопка

Данный пост, по видимости, надо поместить в рубрику «Ремонтируем с помощью скотча». Чего только им не ремонтируют…

Вобщем возникла довольно распространенная проблема — на ноутбуке не работал wi-fi по причине поломки аппаратной кнопки, которая его включает. Ладно бы она была чисто механическая, но на данном конкретном экземпляре (HP Pavilion dv7-1050er) wi-fi включается с сенсорной панели над клавиатурой. Драйвера установлены, система адаптер видит, но сети не ищет. Диагностика Windows говорит: включите адаптер аппаратной кнопкой.

Нашёл в интернете упоминания о том что надо заклеить определённый контакт на модуле wi-fi, выполненном в форм факторе mini pci-e, и тогда он будет включён принудительно, вне зависимости от положения аппаратных кнопок. Где на форумах говорят 4-ый, где 20-ый контакт. В итоге нашёл фото адаптера Broadcom с указанием нужного контакта. У меня адаптер Intel 5100, но решение тоже! Вместо скотча, правда, взял изоленту — её видно лучше и поплотнее она. Свое фото прилагаю ниже. На всякий случай упомяну, что контакт заклеен с одной стороны.
IMG_20180119_175107
После загрузки ОС, ноутбук сразу нашёл сеть и интернет заработал, а так бы пришлось покупать дополнительно usb wi-fi адаптер.

Ubuntu для web-разработчика

Сегодня приведу пример установки условно достаточного набора программ для web-разработки в операционной системе Ubuntu (понятно что вкусы у всех разные). К слову сказать, примерно такую конфигурацию я в данный момент и использую.

Версия Ubuntu, а точнее ее модификация Xubuntu с графической средой Xfce вместо Unity, была выбрана 14.04.5 LTS (поддержка до 17 апреля 2019 года). Почему не 16.04? Потому что в репозиториях для 14.04 еще есть PHP 5, а в 16.04 уже PHP 7. Не все текущие проекты с ним на данный момент совместимы. Можно было конечно поставить PHP 5.6 из специального репозитория с пакетами от сторонних разработчиков и под Ubuntu 16.04, но это уже другая тема.

  1. Сначала устанавливаем мультимедиа кодеки, флеш-плеер, шрифты от Microsoft, распаковщик rar архивов:
    1
    2
    3
    
    sudo apt-get install xubuntu-restricted-extras
    sudo apt install msttcorefonts
    sudo fc-cache -fv
  2. Браузер Google Chrome скачал с https://www.google.ru/chrome/browser/desktop/ (Firefox уже есть из коробки).
  3. Устанавливаем LibreOffice, так как идущий в комплекте Gnumeric конечно ест меньше оперативки, но по функционалу не дотягивает до нужного уровня. Например не понимает csv. Итак:
    1
    2
    3
    
    sudo add-apt-repository ppa:libreoffice/ppa
    sudo apt-get update
    sudo apt-get install libreoffice
  4. Знаменитый заместитель Photoshop — GIMP уже был предустановлен, а вот векторного редактора не хватает. Устанавливаем Inkscape:
    1
    2
    3
    
    sudo add-apt-repository ppa:inkscape.dev/stable
    sudo apt-get update
    sudo apt-get install inkscape
  5. Далее система контроля версий Git, которая незаменима при любой разработке, в том числе и web:
    1
    
    sudo apt-get install git

    Если еще не используете, очень рекомендую. Для быстрого вхождения в тему можно почитать книгу про Git о которой идет речь здесь: https://habrahabr.ru/post/150673/

  6. Устанавливаем LAMP, что означает Linux + Apache + MySQL + PHP:
    1
    2
    
    sudo apt-get install tasksel
    sudo tasksel install lamp-server

    Для запуска сервера после установки используем команду:

    1
    
    sudo service apache2 start

    Так же есть команды restart и stop.

  7. Установить phpMyAdmin можно по разному. Один из вариантов — скачать с официального сайта https://www.phpmyadmin.net/downloads/. Я просто распаковал архив в папку сайтов в директорию pma (разумеется можно назвать по своему), а потом добавил хост pma к этой директории. Папка с локальными сайтами в моем случае находится в ~/sites/.
  8. Иногда требуется FTP-клиент. Один из довольно удобных — Filezilla:
    1
    
    sudo apt-get install filezilla
  9. Устанавливаем консольный Yandex.disk:
    1
    2
    3
    
    echo "deb http://repo.yandex.ru/yandex-disk/deb/ stable main" | sudo tee -a /etc/apt/sources.list.d/yandex.list > /dev/null && wget http://repo.yandex.ru/yandex-disk/YANDEX-DISK-KEY.GPG -O- | sudo apt-key add - && sudo apt-get update && sudo apt-get install -y yandex-disk
    mkdir ~/Yandex.Disk
    yandex-disk setup

    И индикатор для панели:

    1
    2
    3
    
    sudo add-apt-repository ppa:slytomcat/ppa
    sudo apt-get update
    sudo apt-get install yd-tools

    Для запуска индикатора используется команда:

    1
    
    yandex-disk-indicator

    Если файлов в облаке у вас очень много, запаситесь терпением, прежде чем все синхронизируется.

  10. Удобный просмотрщик изображений с возможностью пакетной обработки XnView можно скачать с http://www.xnview.com/en/xnviewmp/#downloads
  11. Skype для общения с заказчиками берем с официального сайта: https://www.skype.com/ru/download-skype/skype-for-linux/
  12. Очень шустрая утилита для нарезки и склейки PDF — pdftk:
    1
    
    sudo apt-get install pdftk
  13. xCHM для чтения документации в формате CHM соответственно:
    1
    
    sudo apt-get install xchm
  14. Для некоторых вещей которых не хватает в связи с Windows-привычками устанавливаем Wine:
    1
    2
    3
    4
    
    sudo dpkg --add-architecture i386
    sudo add-apt-repository ppa:wine/wine-builds && sudo apt-get update
    sudo apt-get install --install-recommends winehq-devel
    winecfg
  15. А теперь то что не хватает — редактор Notepad++. Устанавливаем Windows-версию с официального сайта. Лучше 32-битную, там нормально работает Plugin Manager. Конечно этот вариант спорный, но мне так привычнее. В качестве альтернативы можно предложить похожий редактор Notepadqq. Но он хотя и позиционируется как замена Notepad++, все же до него не дотягивает. Например нет плагинов и нет возможности ставить метки на полях для быстрого перехода по F2 в длинных файлах. И все же для тех кому он подойдет, вот команды для установки:
    1
    2
    3
    
    sudo add-apt-repository ppa:notepadqq-team/notepadqq
    sudo apt-get update
    sudo apt-get install notepadqq
  16. И наконец — может пригодится если немного не хватает RAM для комфортной работы. Утилита zRam для создания сжатого swap в оперативке. Звучит странно, на первый взгляд, но работает хорошо. Можно комфортно открывать большее количество вкладок в браузере одновременно. Устанавливаем:
    1
    
    sudo apt-get install -y zram-config