Что лучше dreamweaver или sublime text

Обновлено: 04.07.2024

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

Ты когда-нибудь замечал, как быстро летит время? Когда ты был ребёнком, и даже школьником, (11 класс не в счёт, так как там уже начинаешь свыкаться с мыслью, что всё идёт к тому, что скоро всё начнётся по новой) вряд ли думал о времени, о том, как это время можно провести с пользой и других подобных вещах. Следующей ступенью становления личности как профессионала, в какой-то мере и какой-то области, является студенческая пора. Во время обучения в высшем учебном заведении ты уже начинаешь понимать, что время — это ресурс, причем невоспроизводимый. Время нельзя вернуть, повернуть вспять и тратить его на какие-то мелочи, которых можно избежать.

Если попытаться спроецировать этот поток мыслей на нашу с вами область, то получается, что все в самом начале пути не думают о том, что какие-то вещи можно делать намного, намного быстрее! По мере того, как ты развиваешься в какой-то области и твои мысли, действия, умения набирают определённый уровень — волей-неволей задумываешься о потраченном времени.

Попытайся вспомнить то, как ты первый раз запустил блокнот и написал свои первые строки кода, дальше пошло развитие, взлёты и неудачи. Потом ты узнал про, допустим, Dreamweaver, использовал его как основной инструмент. Когда ты достиг понимания того, что ты делаешь — ты осознал, что заложенный в этот визуальный редактор функционал тебе почти и не нужен. Вот теперь ты узнаешь о Sublime Text, который манит тебя элегантной темой, огромным количеством плагинов, высокой скоростью работы, отзывчивости. Основная идея редактора в том, что он, по сути своей, является обычным редактором текста, а за счёт плагинов ты можешь воссоздать тот же самый Dreamweaver, но с тем функционалом, что нужен лишь тебе. И это твоя первая победа.

Однако, самый драгоценный ресурс для человека идёт, и рано или поздно ты начинаешь задумываться о том, что тебе не хватает. Допустим, ты начинаешь пользоваться Bower, Grunt или Gulp ввиду того, что эти инструменты экономят твой самый важный ресурс. И в этом случае наступает такой момент, что твой любимый редактор не может полностью покрыть твои новые требования к нему. Вернее может, но ценой своей простоты.

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

Проходит некоторое время, и ты начинаешь интересоваться ещё большим количеством инструментов. Некоторыми из них ты начинаешь пользоваться, за другими начинаешь следить и даже участвовать в их развитии. А время всё идёт и идёт.

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

Начинается самый сок — поиск того, как можно улучшить своё текущее положение дел. Да, тебе тяжело, потому что твой любимый редактор, которому ты был верен всё это время, начинает своеобразно шутить над тобой. Тяжело, но придётся рискнуть — поставить на кон время и победить.

Ты пребываешь в поисках уже около недели, попутно работая над проектами в том же самом редакторе. В свободное время ты пытаешься использовать найденные инструменты, тем самым определяя их возможности и удобства для себя лично.

Тут ты вспоминаешь, что пару лет назад ты слышал об IDE, которая может всё то, что ты надстраивал над своим любимым редактором кода. Всё то, что нужно тебе и намного больше. Конечно же, ты скептически к этому отнесешься, ведь всё это время ты работал в любимом редакторе и ни о чем не жалел. Разумеется, ты вспомнишь о всех минусах IDE, о их громоздкости и огромном количестве лишнего функционала. Но ты не можешь не попробовать снова — возможно, это твоя последняя надежда.

Автодополнение кода работает, проверка кода ещё лучше, чем та, что я делал с помощью плагинов. Ох, даже проверка на существование переменных в Less организована. Ух, нифига себе, тут даже есть автоматических поиск примесей в файлах и выведение их параметров при использовании. И это лишь малая часть того, что тебя изумляет на этот момент. Начинаешь задаваться вопросами: Ох, где же эта IDE была раньше? Почему я её не использовал всё это время?

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

Просьба не разводить споров между сторонниками различных IDE и редакторов типа Sublime Text (далее ST3), Brackets, Atom и т.д. Ведь я точно знаю, что защищать то, чем пользуешься, ты будешь до последнего. Или, пока не найдешь что-то интереснее.

WebStorm

Моим новым редактором кода стала IDE WebStorm от компании JetBrains, которая отлично знает как заманить на свою темную сторону новых пользователей.

Наверное, некоторые из вас задались вопросом — «почему именно она?». Я постараюсь как можно подробнее ответить на этот вопрос ниже.

Почему WebStorm?

Чем же так он тебе понравился?

Автодополнение

Кстати, с автодополнением JS у ST3 какие-то конфликты. Ну никак не предлагались мне переменные для подстановки. Вернее сказать, они предлагались, но когда уже было написано где-то 80% названия переменной. Тут же всё замечательно работает с первой же буквы.

А ещё я получил автодополнение переменных в зависимости от контекста. То есть, если я работаю с примесью, то переменные мне будут предлагаться, в первую очередь, из её аргументов. Это сверхкруто и удобно.

Помимо этого, автодополнение отлично работает с классами и примесями. Это ещё один плюс в копилку, так как примесей в проекте может быть куда больше, чем 10, 20, 50 и даже 100 штук. А ещё на скриншоте видно, что прямо в этом же окошке отображаются ожидаемые аргументы для примеси.

Почему я так много времени уделяю плюсам, связанным с автодополнением? — Это дико экономит время, если проект уже перерос ту психологическую отметку, когда вы помните все названия переменных, примесей и классов для расширения ( &:extend(. ) ).

Разумеется, можно и не запоминать названия переменных, если применять какую-то логику их названий, то есть конструировать переменные, в зависимости от предполагаемого контекста их использования. Например, если это переменная, необходимая для всего проекта, то следует конструировать её название следующим образом:

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

Проверка на ошибки и отладка кода

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

Разумеется, можно использовать Grunt или Gulp и им подобные. В этом случае, этот плюс вам не знаком, так как эти системы сборки (вернее их плагины) отлично справляются с указанием ошибки и её дислокации в проекте.

Ещё одним плюсом будет отличная система отладки и тестирования кода, о которой написано на официальном сайте производителя.

Структурирование

Отдельно хочу отметить фишку со структурами файлов. Это очень помогает, когда знаешь название искомого селектора или класса, но не помнишь, где же он у тебя в файле прячется. Причем, это работает со всеми файлами (как минимум HTML, CSS (Less и т.д.) и JavaScript), что я успел проверить.

Шаблоны

Если вы имеете какой-то внутренний стандарт по оформлению шапок у файлов, то в WebStorm есть шаблоны создания файлов. К сожалению, они слегка не логичны при вызове, хотя это сугубо моё личное мнение. Я минут пять искал, где же шаблон Less файла, который я отредактировал, а тут бац, и он лежит в stylesheet. Хотя, можно, наверное, было догадаться :)

А ещё отсутствует поиск по шаблонам при создании через окно проекта, хотя он присутствует, если создавать файл через меню file > New . Интересненькие дела, однако :)

Система задач

К слову, вы тоже заметили, что у jQuery из репозитория есть TODO? — теперь я понимаю почему он так много весит :)

Мне этого хватило, чтобы сделать свой выбор в сторону этого продукта.

Какие сложности возникли при переходе?

Есть маленькая проблема, которая свойственна всем IDE — они тормозят. Жутко тормозят. В случае с WebStorm такая проблема также имеется, но её можно немного подавить

Для того, чтобы хоть как-то избавиться от медлительности, стоит начать использовать 64-битную версию и слегка пошаманить с настройками виртуальной среды в WebStorm64.exe.vmoptions или WebStorm.exe.vmoptions . Параметры там сугубо личностного характера и зависят от конфигурации вашего компьютера. Если вы хоть раз настраивали сервер Minecraft, то для вас это будет совсем просто, иначе воспользуйтесь этой ссылкой.

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

Если вы ещё не догадались, то WebStorm написан на Java. Однако, никаких сильно прожорливых ситуаций я ещё не встречал. При работе с сравнительно большими Less (они у меня жестко разбиты) и небольшими JS файлами, я получил максимум 80Мб. Вполне приемлемый результат — меня всё устраивает.

Выводы

Увы, перечислять и расписывать все плюсы для меня бессмысленно — нужно пробовать самому. Ведь для каждого минусы и плюсы будут различными, то есть личными. Кому-то нравится одно, другому ещё что-то и так до бесконечности.

Достоинства

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

Недостатки

Слегка тормозит
Немного запутанные настройки (после ST это ад какой-то)
Неочевидное для меня использование шаблонов файлов и отсутствие поиска по ним при создании
Получение скидки студентам (ниже подробнее)

Ах, да, для всех продуктов этой компании есть 30-ти дневный пробный период с полным функционалом.

Для студентов есть 100% скидка. Как только приедет моя карточка ISIC, или я получу почту в домене своего университета, сразу же попытаюсь получить лицензионный ключ. К сожалению, получить почту в домене тяжко, а вот если бы студенческий можно было сфотографировать, как у DreamSpark, то было бы здорово. Но ситуацию с фотками студаков они описали в своей статье на Хабре.

Обновление от 4.10.2015
Не знаю точной даты добавления возможности, но теперь лицензию можно получить по скану студенческого билета, используя для этого специальную форму.

Кстати, так обидно, что ISIC теперь 600 рублей вместо 400, как было раньше (до 1 февраля) — как только я созрел для покупки, так сразу же они решили поднять цены :)

Всем спасибо за внимание, хорошего кода и отменных инструментов вам!

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.

Рассматриваем лучшие приложения для работы с HTML-разметкой. Узнаем, чем пользуется верстальщик с глубокими познаниями в разработке, а чем пользуется тот, кто совсем не разбирается в программировании.

Что такое HTML-редактор?

HTML-редактор – это программа, в которой пишут «основание» для сайтов. Технически эту роль может выполнять любой текстовый редактор, даже «Блокнот». Но лучше доверить эту задачу приложению, специально созданному для работы с кодом.

Обычно в таких программах есть подсветка синтаксиса (отдельных элементов разметки), автоматическая проверка на ошибки и опечатки, да и в целом интерфейс спроектирован таким образом, чтобы в нем было удобнее работать именно с сайтами.

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

Иногда такие программы называют HTML-компиляторами, хотя по факту в них никакой код не компилируется. HTML – это не язык программирования, а язык разметки, не требующий компиляции как таковой. Тем не менее пользователи иногда так говорят, и я не буду им противиться.

Типы редакторов

Есть два основных типа:

Текстовый. Классический вариант для тех, кто знаком с HTML-разметкой, знает теги, CSS-классы, умеет работать с контентом внутри страницы и понимает, как его оформлять. Эти навыки необходимы, так как в редакторе разработчик должен работать вручную, прописывая свойства с помощью текстовых параметров.
Визуальный. Решение для тех, кто не понимает, что представляет собой HTML и как оформлять страницы с помощью текста. Обычно содержит в себе блоки, напоминающие конструктор. Перемещая их, пользователь может «собрать» полноценный сайт, не написав и строчки кода.

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

Полезные характеристики HTML-редакторов

При выборе текстовых и визуальных HTML-компиляторов стоит обратить внимание на наличие базовых функций:

Подсветка синтаксиса. Программа должна подсвечивать ключевые элементы разметки разными цветами. Визуальная градация данных упрощает разработку. Так легче контролировать написанный текст и искать информацию на страницах.
Автозавершение кода. Приложение для работы с HTML должно уметь автоматически закрывать теги, подставлять уже использованные ранее элементы разметки и самостоятельно дописывать прочие части кода там, где они логически подходят.
Проверка на наличие ошибок. HTML-компилятор не обязан проверять качество написанного JavaScript- или Python-кода, но обязан показывать ошибки и опечатки, допущенные в HTML-разметке (и желательно в CSS тоже).
Поиск. По коду часто приходится перемещаться, а кода может быть много. Удобно, когда есть поиск. Еще удобнее, когда есть функция «Найти и заменить», позволяющая разыскать сразу несколько элементов в разметке и поменять их.

Текстовые редакторы

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

Атом появился в 2014 году и резко набрал популярность среди разработчиков всех сортов. Он бесплатный, с открытым исходным кодом. Его созданием занималась команда GitHub – главного хранилища кода в интернете. За поддержку и развитие проекта отвечает сообщество независимых программистов, продвигающих opensource-проекты.

Atom построен на базе фреймворка Electron, что делает его универсальным приложением для всех платформ сразу, то есть для Windows, macOS и Linux. Также это дает возможность расширять возможности редактора, используя JavaScript. Разработчики могут менять функциональную составляющую Atom и внешний вид приложения, адаптируя его под свои нужды (используемый язык программирования, проект, над которым работает пользователь и т.п.). Поэтому многие разработчики по праву считают его лучшим HTML-редактором.

Из интересных фишек стоит отметить множественные курсоры для редактирования одновременно нескольких строк кода и функцию Teletype для совместной работы нескольких программистов в одном пространстве.

VS Code

Еще один бесплатный редактор HTML-разметки на базе Electron. Это разработка Microsoft с огромным набором плагинов. С помощью расширений можно добавить в него массу дополнительных функций:

Автозаполнение кода на разных языках программирования.
Автоматический поиск ошибок и их исправление.
Визуальное улучшение кода с помощью ESLint или Prettier.
Отдельные расширения для поиска специфичных ошибок, которые не может найти редактор по умолчанию.
Плагин Live Server для предпросмотра веб-приложений и сайтов в реальном времени.

Также в VS Code встроен клиент Git, позволяющий загружать проект в GitHub прямо из компилятора, не используя для этого отдельный терминал. А еще система IntelliSense, помогающая дополнять код за счет уже использованных функций, классов и кусков разметки.

В отличие от Atom, детище Microsoft работает заметно быстрее. Разработчики массово переходят на VS Code из-за разницы в производительности.

Sublime Text

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

Sublime Text сочетает в себе лучшее из двух миров (из Open Source и мира проприетарного ПО). За счет платных лицензий и грамотной монетизации у разработчиков программы остается возможность регулярно обновлять продукт и поддерживать его. В то же время код достаточно «открыт», чтобы сторонние разработчики могли добавлять в него новые функции и создавать расширения, используя язык программирования Python.

Sublime Text – высокопроизводительный редактор. Причем это проявляется не только в плавности и отзывчивости интерфейса. В компиляторе есть функция моментального переключения между проектами. Не приходится долго искать папку с другим сайтом, перезагружаться в другую среду разработки и ждать, пока она прогрузится, как это происходит в Atom или VS Code.

Notepad++

Бесплатный редактор кода для операционной системы Windows (на Linux и macOS работает через эмуляторы). Распространяется бесплатно, имеет открытый исходный код, который можно загрузить с официального репозитория программы на GitHub.

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

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

У Notepad++ есть мобильная версия для тех, кто занимается разработкой «на ходу».

CodeRunner

Один из лучших редакторов HTML-разметки и кода, разработанный для macOS. Он не поддерживает расширение плагинами (в отличие от перечисленных выше решений). Напротив, его создатель решил вместить максимум возможностей в программу, избегая необходимости в сторонних дополнениях.

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

Из интересных решений стоит отметить наличие встроенной панели с документацией. Эта панель обеспечивает доступ к ресурсу Mozilla MDN с описанием функций JavaScript и других языков. Там же можно быстро найти информацию по поводу той или иной функции языка на популярном форуме для программистов Stack Overflow.

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

Espresso

Еще один эксклюзивный редактор для macOS, поддерживающий HTML, CSS, JavaScript и несколько других языков, используемых при разработке сайтов.

Одно из главных преимуществ Espresso – функция Xray. Она в реальном времени отображает состояние сайта или веб-приложения. Любое изменение в коде в ту же секунду появляется на превью. А превью, в свою очередь, поддерживает работу с браузерами Chrome, Firefox и Safari.

Также Espresso часто используют для работы с CSS. Компилятор поддерживает новейшие технологии, связанные с каскадными стилями. Редактор упрощает работу над внешним видом страницы (градиенты, цвета, тени, разметка и т.п.)

Расширить возможности редактора можно за счет плагинов. Их коллекция не такая внушительная, как у условного VS Code, но самые востребованные точно найдутся.

А еще в Espresso встроен пакет инструментов для публикации сайтов в сети. Он синхронизирует данные с сервером, независимо от того, какую платформу для размещения ресурса вы используете.

Brackets.io

Легковесный кроссплатформенный редактор, адаптированный для работы с сайтами. Одна из лучших функций Brackets – мини-редактор, встроенный в основной код. Он появляется только в те моменты, когда нужен пользователю. Например, вы вносите изменения в HTML с определенным классом. Чтобы не переключаться на вкладку с CSS, редактор предлагает открыть небольшое окно с кодом CSS для выбранного класса, чтобы внести туда изменения, не покидая главную страницу.

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

Также здесь есть режим Live Preview, позволяющий в реальном времени наблюдать за изменениями, вносимыми в дизайн и содержимое страницы. Все, что делает пользователь, появляется на экране в ту же секунду.

Ну и еще одно преимущество – встроенная поддержка препроцессоров SCSS и LESS со всеми их особенностями и дополнительными функциями. Не придется подключать их отдельно.

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

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

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

Визуальные HTML-редакторы

С помощью визуальных редакторов вы будете напрямую взаимодействовать со страницей в том виде, в котором ее увидят потенциальные пользователи.

А они, понятное дело, не увидят на нем код и структуру CSS-файлов. Только полезную информацию.

Adobe Dreamweaver CC

Массивный продукт компании Adobe для создания веб-страниц. Он адаптирован для работы с языками разметки HTML и CSS, а также для работы с языками программирования JavaScript и другими. Dreamweaver подходит как для фронтенд-разработки (то есть внешней части сайта, с которой взаимодействует посетитель), так и для бэкенда (внутренней части, отвечающей за логику сайта).

Dreamweaver CC создавался для работы в кооперации с другими продуктами компании. Под этим подразумевается быстрый экспорт изображений и макетов из Photoshop или XD. DW имеет закрытый исходный код, поэтому его возможности можно расширять только плагинами, одобренными самой Adobe.

И хотя Dreamweaver CC, в первую очередь, визуальный компилятор страниц, он отлично работает в текстовом режиме. Между режимами можно переключаться в любое время, выбирая удобный стиль работы.

Купить Dreamweaver CC (1550 рублей в месяц, платформы – Windows, macOS и Linux)

RapidWeaver

Это аналог Dreamweaver, созданный для операционной системы Apple. Вместе с тем, это один из наиболее часто используемых визуальных HTML-компиляторов.

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

В нем есть удобная интеграция с сервисом Unsplash, симулятор устройств, чтобы можно было оценить внешний вид сайта в разных разрешениях, и базовые инструменты для поисковой оптимизации.

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

Купить RapidWeaver (7400 рублей, только для macOS)

В CMS есть инструменты для проектирования сайтов, заменяющие HTML-редакторы. В них можно быстро собрать страницу, добавив туда весь необходимый контент (или добыв его из соответствующих плагинов). Назвать их HTML-редакторами трудно, но движки в себя таковые включают.

Даже Gutenberg (интерфейс для написания постов в WordPress) содержит HTML-редактор.

Выводы

Admin 18.08.2017 , обновлено: 08.08.2020 Adobe, CSS, HTML, Software

Adobe прекрасная компания, создавшая много невероятно крутых программ. Для разработки сайта она когда-то создала свой продукт, который называется Dreamweaver. Несмотря на то, что он нашел себе место среди определенного круга разработчиков, он так и не стал чем-то вроде Photoshop, которому нет серьёзных альтернатив.

Dreamweaver как HTML и CSS

Дримвивер очень быстро потерял актуальность из-за бурного скачка веб-индустрии разработки сайтов. Изначально Dreamweaver был идеален, потому что позволял легко редактировать массу html страниц или внедрять shtml.

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

Стали развиваться системы управления содержимым (CMS), после чего исчезла актуальность использовать Dreamweaver в этом направлении. Теперь не требовалась быстрая замена данных на всех страницах, эти же самые вещи выполнялись автоматически.

Затем стали появляться фреймворки, позволяющие программистам и верстальщикам быстрее редактировать код. И если с HTML и CSS Дримвивер справлялся хорошо, то дальше этого он сильно не продвинулся. Он так и не перерос статус html-css, хотя и поддерживает синтаксис всех современных языков программирования.

Одно из главных преимуществ Дримвивера и сегодня в том числе, что с ним легко редактировать удалённые файлы на сервере. Обычно для этих целей нужно две программы. Dreamweaver же позволяет в рамках одной программы сделать это достаточно быстро.

Dreamweaver как IDE

На самом деле в Dreamweaver встроен большой функционал и возможности для создания и редактирования сайтов. В нём много полезных инструментов. В том числе встроена поддержка Emmet, которая позволяет верстать сайты быстрее.

Более того, Dreamweaver относится к классу IDE программ (Интегрированная среда разработки / Integrated development environment), т.е. всё в одном. С другой стороны он проигрывает в этом таким монстрам как PhpStorm, который намного больше приспособлен для программирования и отладки, чем Дримвивер.

Беда Дримвивере в том, что большинство инструментов неудобны в использовании. И потому они остаются не задействованы. В результате использование этой программы сводится от силы к 5-10% от реальных возможностей.

Кроме того Dreamweaver не заточен под скорость. Он медлителен и неповоротлив. Нельзя выполнить простые функции вроде переключения по вкладкам открытых документов через горячие клавиши.

Даже предусмотренный FTP в Дримвивере и тот неудобный. И на Windows и на Mac OS я всегда использовал альтернативные программы для этих целей.

Если Dreamweaver так плох, то зачем ему посвящать статью

Это дань этой программе, которая служила долгое время верой и правдой. Однако то что не развивается или делает это крайне медленно, должно остаться в прошлом и дать место новому.

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

Когда только начинаешь программировать и делать сайты, важно понимать, что вообще происходит. Вот изменил ты параметр объекта — а правильно или нет? Заработало это или нет? Красиво вышло или ужасно?

Чтобы разработчик сразу видел результат труда, боги создали для него IDE — integrated development environment, по-русски — среду разработки. Это программа, в которой программист пишет код, ловит ошибки и наблюдает результат.

Чисто технически работать можно и без IDE: писать код в блокноте и просматривать его в специальных программах или браузере. Но это бывает медленно и требует дополнительных телодвижений. Лучше научиться пользоваться IDE и писать в сто раз быстрее.

Выбор среды разработки (IDE) — дело вкуса и привычки. Какие-то из них — универсальные, другие заточены под конкретные языки программирования. IDE часто похожи по своим возможностям и позволяют увеличивать функциональность за счёт внешних дополнений.

Visual Studio Code

Программу можно скачать с официального сайта. Несмотря на то, что VS Code делает Микрософт, это бесплатный продукт с открытым исходным кодом, доступный на всех платформах. Благодаря этому и своим возможностям VS Code стал одной из самых популярных сред для разработки в мире.

VS Code распознаёт почти все существующие языки программирования, самостоятельно или с помощью плагинов, и форматирует их соответствующим образом. Кроме этого, у него глубокая поддержка HTML, CSS, JavaScript и PHP — он проследит за парными тегами, закрытыми скобками и ошибками в командах.

Вот самые интересные возможности VS Code.

Умное автодополнение. Программа анализирует, какую команду вы хотите ввести, и предлагает закончить фразу за вас, с подсказками и объяснением. Удобно, если вы забыли порядок следования переменных или как точно звучит нужная команда:

Выполнение скриптов по шагам. Иногда нужно иметь возможность выполнить скрипт не сразу, а по шагам, например, чтобы понять, не зациклилась ли наша программа. Для этого используйте встроенный дебаггер — это программа, которая следит за кодом, ищет в нём ошибки и позволяет выполнять его поэтапно.

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

Мультикурсор помогает вводить одинаковые значения сразу на нескольких строках

Найденные одинаковые слова и команды можно тут же заменить на другие

Навигация по коду и описания функций. Когда пишешь большую программу, легко забыть то, что делал в начале — как работает функция или какого типа переменная используется в этом месте. Чтобы этого избежать, VS Code может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:

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

WebStorm

Среда разработки для JavaScript от компании jetBrains стоит денег, но есть пробный период в 30 дней. Вполне хватит, чтобы попробовать и понять, нужна эта программа или нет.

Автоподстановка. Некоторые IDE с автоподстановкой тормозят и не предлагают сразу все варианты переменных или команд — но не WebStorm. Здесь всё работает с первой буквы и понимает, когда надо предложить переменную, а когда команду или служебное слово:

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

Проверка ошибок. WebStorm умеет сам проверять код на ошибки и пояснять каждую из них. Не всегда это работает идеально, но когда работает — экономит кучу времени:

Чтобы сразу видеть, что получается на странице, нам понадобится плагин LiveEdit. По умолчанию он выключен, но его можно включить или поставить отдельно в любое время. После активации нужно будет в настройках плагина поставить галочку «Update application in Chrome on changes in» — она как раз отвечает за обновление информации в браузере Chrome. Теперь можно писать код и сразу видеть результат:

Sublime Text 3

Бесплатный редактор, который назойливо предлагает занести денег разработчикам. Про Sublime Text у нас есть отдельная и более подробная статья — почитайте, там тоже интересно.

Sublime Text — потрясающе мощный текстовый редактор. Его сила — в скорости работы, он одинаково быстро обработает простую веб-страничку или программу на сто тысяч строк кода. Подсветка синтаксиса всех возможных языков программирования, автоподстановка, умное закрытие тегов — всё это доступно сразу после установки.

Пример разметки HTML-кода в Sublime Text

Вот что ещё умеет программа сразу после установки:

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

Вторая суперспособность, которая превращает Sublime Text из простого текстового редактора в универсальное решение, — плагины. По принципу действия они такие же, как и в других программах из обзора, но они совершенно не влияют на скорость работы. Когда начинаешь плотно работать с Sublime Text, может показаться, что у него есть плагины для всего. Нужно редактировать одновременно один и тот же код, но в разных панелях — пожалуйста, написать быстро HTML-код — само собой, проверить код на ошибки и недочёты — без проблем.

Emmet сокращает время на написание кода, подставляя вместо стандартных команд целые куски готового кода

JavaScript & NodeJS Snippets упрощает написание кода на JavaScript и работает по тому же принципу, что и Emmet

SublimeCodeIntel помогает быстро разобраться в коде со множеством функций. Если щёлкнуть на название любой функции, плагин сразу покажет вам её описание.

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

Сразу после установки он этого делать не умеет, но нам поможет плагин LiveReload. Он показывает все изменения в браузере, как только мы сохраняем рабочий файл с кодом. Это не так изящно, как в VS Code, но в случае с Sublime Text простительно. Дело в том, что привыкнув однажды писать в нём код, сложно пересесть на что-то другое, что работает с той же скоростью. Установка LiveReload состоит из двух компонентов — плагин для Sublime Text и расширение для браузера.

После установки давайте посмотрим, что у нас получилось. Создадим файл tested.html в Sublime Text, разметим его внутри стандартным шаблоном как HTML-документ, а рядом откроем окно браузера.

В реальном времени мы не увидим на странице те изменения, которые вносим в код, как это было в VS Code. Но если нажать Ctrl+S, чтобы сохранить все данные, то браузер моментально показывает то, что мы сделали.

Если вы серьёзно настроены программировать, присмотритесь к Visual Studio Code. Почти со всем он справляется сам или с плагинами, не нужно подключать дополнительно браузеры или сторонний софт.

Любите, чтобы после установки были доступны почти все нужные функции? Попробуйте WebStorm — платную, но мощную среду разработки.

Если вам важна скорость работы в любых ситуациях, то Sublime Text — лучший выбор. Он очень быстрый, и для него есть плагины почти на все случаи жизни.

Читайте также: