Вредоносное ПО (malware) - это назойливые или опасные программы,...
Сегодня - немного практических советов по работе с WebStorm.
Вначале пишем совсем простой HTML, после color:
нажимаем
КО подсказывает: во всех IDE от JetBrains
Как только мы выбрали цвет, на вертикальной полоске слева от текста тут же появляется маленький квадрат такого же цвета. Теперь можно кликнуть по нему, и откроется палитра, из которой можно выбрать вообще любой цвет.
А теперь представим себе проект посложнее, небольшое приложение под node.js.
Говорят , что IDE от JetBrains хороши вниманием к деталям и пониманием контекста. Вот, казалось бы, мелочь: мне надо для тестирования этого приложения сделать простенькую страницу с формой на HTML. Сделал, попробовал, усложнил приложение, тест тоже надо усложнять: переделываю форму так, чтобы она выглядела удобно для заполнения нескольких полей.
Начинаю вводить в конце строки тэг
Нажимаю клавишу <
, WebStorm сам догадывается, что мне нужен
и предлагает список вариантов с уже выбранным тэгом, который мне нужен. Я просто нажимаю Enter, и - готово!
Добавляю новую функцию в файл.js. Пишу fun
Когда ставишь открывающую фигурную скобку, тут же ставится закрывающая - и захочешь, а не забудешь ее в конце тела функции. Нажимаешь Enter - и она любезно отъезжает не на следующую строку, а на две строки вниз, открывая место для тела функции.
Надо размножить строку, скажем, однотипное поле формы?
Надо перейти к определению чего-то (переменной, функции, класса?)
Внимание! Можно вляпаться!
Еще немного хитростей для тех, кто, как я, недавно пишет под node.js:
1) Если в node.js при запуске приложения из WebStorm возникает ошибка
Throw arguments; // Unhandled "error" event
Error: listen EADDRINUSE
это, скорее всего, значит, что вы пытаетесь запустить еще одну копию сервера node.js (а на одном TCP-порте может жить только одна копия). Чтобы этого избежать, надо в Run | Edit Configurations
в ветке node.js для вашего приложения (например, index.js) поставить галочку check no other instances are running
.
2) Если в приложении есть require("модуль"), а определения (например, функций) из этого модуля в IDE не видны, и по Ctrl-B недоступны, похоже, вы цинично нарушаете рекомендации разработчиков node.js: если вы используете модуль в проекте, надо его устанавливать локально.
Это значит (спасибо Сергею Симончику за разъяснение!), что в папке проекта должна быть папка node_modules, и в ней должны быть папки соответствующих модулей. Если папки нет, и по команде npm install модуль она не создается, ее надо создать руками, а в корневой папке проекта в командной строке дать команду npm install модуль .
Программа npm туповата (или чересчур умна): если у вас в корне проекта нет node_modules, а выше корня проекта есть папка node_modules, локальная установка модуля произойдет в нее.
Если же модули установлены правильно, а WebStorm продолжает подчеркивать функции из модулей серой волнистой линией («не определены»), то надо отметить, какие библиотеки node.js вы подключаете:
3) Проверку кода «на лету» в WebStorm можно делать аж тремя разными способами, все три - весьма гибкие: JSLint, JSHint и внутренний инспектор кода. По умолчанию включен только внутренний инспектор, который можно нечеловечески гибко настраивать в меню Settings->Inspections.
Если же надо включить JSHint или JSLint, то это делается в меню Javascript | Code Quality Tools. Оба этих инструмента - внешние, но они идут в комплекте с WebStorm и прозрачно интегрированы в IDE.
При включении любых способов проверки кода в окне редактора тут же подчеркивается то, что кажется инспекторам ошибками, а на полосе индикации ошибок справа от текста возникает множество красных и желтых черточек, вопиющих о необходимости исправить код вручную. В зависимости от того, пишете ли вы код для выполнения в браузере или на сервере, вы можете включать разные настройки инспекторов, так как некоторый вполне корректный код для node.js JSLint по умолчанию жестко критикует.
Не всем постоянно нужна проверка правописания встроенным инспектора кода. Я не хочу называть переменные в своем коде словами английского языка, а всякие там qry_1 и qry_2 подчеркиваются зеленой волнистой линией (не говоря уже о названиях полей в БД, которые тоже в коде попадаются). Отключить проверку правописания можно в Settings | Inspections | Spelling.
Конечно, это далеко не все секреты удобного кодирования в WebStorm, и если хабрасообщество одобрит текст, то в следующих выпусках мы будем говорить о поддержке TypeScript, и некоторых полезных горячих клавишах.
UPD : Специально для тех, кто молча ставит минус: как всегда, автор будет благодарен не только тем, кто доволен, но и тем, кто расскажет, что разочаровало, и что хотелось бы видеть. Вместе мы сделаем мир лучше.
WebStorm – интегрированная среда разработки сайтов (IDE) посредством написания и редактирования кода. Софт отлично подойдёт для профессионального создания веб-приложений для сайтов. Поддерживаются такие языки программирования, как JavaScript, HTML, CSS, TypeScript, Dart и другие. Необходимо сказать, что программа имеет поддержку многих фреймворков, что очень удобно для профессиональных разработчиков. В программе есть терминал,через который выполняются все действия, производимые в стандартной командной строке ОС Windows.
Оформление в редакторе выполнено в приятном стиле, цветовую гамму которого можно изменить. Присутствуют темная и светлая темы. Интерфейс рабочей области оснащен контекстным меню и левой панелью. В блоке слева отображаются файлы проекта, в них пользователь может найти нужный ему объект.
В большом блоке программы находится код открытого файла. Вкладки отображаются у верхней панели. В целом, оформление разработано очень логично, а поэтому никаких инструментов кроме самой области редактора и содержания его объектов не отображается.
Live Edit
Данная возможность подразумевает показ результата проекта в браузере. Таким образом вы сможете редактировать код, который одновременно содержит элементы HTML, CSS и JavaScript. Для осуществления отображения всех действий проекта в окне браузера необходимо установить специальный плагин — JetBrains IDE Support, в частности для . В таком случае все внесённые изменения будут отображаться без перезагрузки страницы.
Отладка Node.js
Отладка приложений Node.js позволяет сканировать написанный код на наличие ошибок, внедренный в JavaScript или TypeScript. Чтобы программа не проверяла ошибки во всём коде проекта, нужно вставлять специальные индикаторы – переменные. В нижней панели отображается стек вызовов, в котором находятся все уведомления по поводу проверки кода, и что нужно в нём изменить.
При наведении курсора мыши на конкретную выявленную ошибку редактор выведет пояснения к ней. Кроме всего прочего, поддерживается навигация по коду, функция автодополнения и рефакторинг. Все сообщения для Node.js выводятся в отдельной вкладке рабочей области программы.
Настройка библиотек
В WebStorm можно подключать дополнительные и базовые библиотеки. В среде разработки после выбора проекта по умолчанию будут включены в наличие основные библиотеки, а вот уже дополнительные нужно подключать вручную.
Раздел помощи
В данной вкладке находится подробная информацию о IDE, руководство и много чего другого. Пользователи могут оставить отзыв о программе или отправить сообщение по поводу улучшения редактора. Для проверки наличия обновлений используется функция «Check for Updates…» .
Софт можно приобрести за конкретную сумму или пользоваться бесплатно в течение 30 дней. Информация о продолжительности триал-режима также находится здесь. В разделе помощи можно ввести регистрационный код или перейти на сайт для покупки с помощью соответствующей клавиши.
Написание кода
При написании или редактировании кода вы можете воспользоваться функцией автодополнения. Это означает, что полностью прописывать тег или параметр вам не нужно, так как программа сама определит язык и функцию по первым буквам. Учитывая то, что редактор позволяет пользоваться множеством вкладок, имеется возможность расположить их так, как вам удобно.
С помощью горячих клавиш можно с лёгкостью находить нужные элементы кода. Всплывающие подсказки жёлтого цвета внутри кода могут помочь разработчику заранее выявить проблему и устранить её. В случае, если ошибка была допущена, редактор отобразит её красным цветом и предупредит о том пользователя.
К тому же на полосе прокрутки отображается местонахождение ошибки, чтобы не искать самостоятельно. При наведении на ошибку редактор сам предложить выбрать один из вариантов правописания для того или иного случая.
Взаимодействие с веб-сервером
Чтобы разработчик мог увидеть результат выполнения кода на HTML-странице программе, необходимо соединяться с сервером. Он встроен в IDE, а именно является локальным, хранящимся на ПК пользователя. С помощью расширенных настроек имеется возможность применять протоколы FTP, SFTP, FTPS для загрузок файлов проекта.
В наличии есть SSH-терминал, в котором можно вводить команды, отправляющие запрос на локальный сервер. Таким образом, вы сможете использовать такой сервер как реальный, применяя все его возможности.
Компиляция TypeScript в JavaScript
Код, написанный на языке TypeScript, не обрабатывается браузерами, потому что они работают с JavaScript. Для этого требуется компиляция TypeScript в JavaScript, которую можно провести в WebStorm. Настраивается компиляция на соответствующей вкладке так, чтобы программа совершила преобразование как всех файлов с расширением *.ts , так и отдельных объектов. При внесении любых изменений в файле, содержащем код с TypeScript, он будет автоматически скомпилирован в JavaScript. Такая функция доступна если вы подтвердили в настройках разрешение выполнения данной операции.
Языки и фреймворки
Среда разработки позволяет заниматься самыми разными проектами. Благодаря Twitter Bootstrap вы сможете создавать расширения для сайтов. Используя HTML5, становится доступным применять новейших технологий данного языка. Dart говорит само за себя и является заменой языка JavaScript, с его помощью разрабатываются веб-приложения.
Вы сможете осуществлять front-end разработку благодаря консольной утилите Yeoman. Создание одностраничных осуществляется при помощи фреймворка AngularJS, который использует единственный HTML-файл. Среда разработки позволяет работать и над другими проектами, специализирующимися на созданиях структуры оформления веб-ресурсов и дополнений к ним.
Терминал
Софт поставляется с терминалом, в котором вы непосредственно будете выполнять различные операции. Встроенная консоль дает доступ к командной строке ОС: PowerShell, Bash и другие. Так вы можете выполнять команды прямо из IDE.
Название : JetBrains WebStormВерсия : 10.0.4
Лицензия : Shareware
Операционая система : Windows
Язык : Русский
О программе :
JetBrains WebStorm 10.0.4
Программа представляет собой инструмент для разработки web-сайтов и редактирования HTML, CSS и кода. Решение обеспечивает быструю навигацию по файлам и генерирует уведомления о возникающих проблемах в коде в режиме реального времени. JetBrains WebStorm позволяет добавлять разметку HTML-документов или элементов SQL непосредственно в. JetBrains WebStorm осуществляет развертывание и синхронизацию проектов через протокол FTP.
Используя возможности кода HTML/XHTML и XML, WebStorm обеспечивает автоматическое завершение стилей, ссылок, атрибутов и других элементов кода. При работе с CSS осуществляется завершение кода классов, HTML-номеров, ключевых слов и т. д. WebStorm предлагает автоматическое решение таких проблем, как выбор формата, свойств, классов, ссылок на файлы и других атрибутов CSS. Решение позволяет использовать мощность инструмента Zen coding для верстки HTML, отображает действия тэга на web-странице. Продукт осуществляет завершение кода для ключевых слов, лейблов, переменных, параметров и функций DOM и поддерживает специфические особенности популярных браузеров. Реализованные в решении функции рефакторинга позволяют преобразовывать структуру кода и файлов и.js.
WebStorm обеспечивает отладку кода и предоставляет широкий диапазон возможностей:
нахождение точки останова в HTML и, настройка параметров точки останова,
тестирование синтаксиса кода в режиме реального времени и т. д. Продукт
поддерживает платформы JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo и Bindows. WebStorm предусматривает
интегрированную проверку текста на тэги, последовательность кода, ошибки в
написании и т. д. WebStorm позволяет редактировать файлы и автоматически
синхронизировать их по требованию при удаленной работе или хранении.
Продукт поддерживает функцию контроля версий и предварительных вариантов кода и
фиксирует все произведенные действия и изменения. Благодаря созданию истории в
WebStorm можно восстанавливать кодовые выражения, блоки и даже целые файлы.
Скришоты
Внимание!
Если вы не любите долгие рассуждения, то переходите к следующей части статьи. Тут я разглагольствую о том, как могут развиваться события в жизни.
Ты когда-нибудь замечал, как быстро летит время? Когда ты был ребёнком, и даже школьником, (11 класс не в счёт, так как там уже начинаешь свыкаться с мыслью, что всё идёт к тому, что скоро всё начнётся по новой) вряд ли думал о времени, о том, как это время можно провести с пользой и других подобных вещах. Следующей ступенью становления личности как профессионала, в какой-то мере и какой-то области, является студенческая пора. Во время обучения в высшем учебном заведении ты уже начинаешь понимать, что время - это ресурс, причем невоспроизводимый. Время нельзя вернуть, повернуть вспять и тратить его на какие-то мелочи, которых можно избежать.
Если попытаться спроецировать этот поток мыслей на нашу с вами область, то получается, что все в самом начале пути не думают о том, что какие-то вещи можно делать намного, намного быстрее! По мере того, как ты развиваешься в какой-то области и твои мысли, действия, умения набирают определённый уровень - волей-неволей задумываешься о потраченном времени.
Попытайся вспомнить то, как ты первый раз запустил блокнот и написал свои первые строки кода, дальше пошло развитие, взлёты и неудачи. Потом ты узнал про, допустим, Dreamweaver, использовал его как основной инструмент. Когда ты достиг понимания того, что ты делаешь - ты осознал, что заложенный в этот визуальный редактор функционал тебе почти и не нужен. Вот теперь ты узнаешь о Sublime Text, который манит тебя элегантной темой, огромным количеством плагинов, высокой скоростью работы, отзывчивости. Основная идея редактора в том, что он, по сути своей, является обычным редактором текста, а за счёт плагинов ты можешь воссоздать тот же самый Dreamweaver, но с тем функционалом, что нужен лишь тебе. И это твоя первая победа.
Однако, самый драгоценный ресурс для человека идёт, и рано или поздно ты начинаешь задумываться о том, что тебе не хватает. Допустим, ты начинаешь пользоваться Bower , Grunt или Gulp ввиду того, что эти инструменты экономят твой самый важный ресурс. И в этом случае наступает такой момент, что твой любимый редактор не может полностью покрыть твои новые требования к нему. Вернее может, но ценой своей простоты.
После установки ещё десятка различных плагинов твой любимый редактор уже обретает черты монстра. Он стал уже настолько мощным, что может потягаться с некоторыми IDE и, даже не напрягаясь, затмить функционалом другие схожие редакторы. Всё идёт классно, как по маслу.
Проходит некоторое время, и ты начинаешь интересоваться ещё большим количеством инструментов. Некоторыми из них ты начинаешь пользоваться, за другими начинаешь следить и даже участвовать в их развитии. А время всё идёт и идёт.
И вот наконец кульминация - ты понимаешь, что нужно оптимизировать свою работу в большей степени. Стартует новый этап твоей жизни - поиск лучшего инструмента для работы. Нет, конечно же, твой любимый навороченный редактор отлично справляется со своей работой, как и раньше, безукоризненно, но вот сам ты понимаешь, что в некоторых местах он не сильно-то и хорош.
Например, ты начинаешь замечать, что он не так хорошо работает с автодополнением свойств, подсказки его не так хороши, а ещё не хватает автоматической проверки кода на валидность или какие-то личные правила. Первым делом ты отправляешься на поиски плагинов, которые могут помочь тебе справиться с этими недостатками, то есть устранить их. Ты установил ещё десяток плагинов (образно), но лучше от этого не стало. Автодополнение до сих пор работает странно.
Начинается самый сок - поиск того, как можно улучшить своё текущее положение дел. Да, тебе тяжело, потому что твой любимый редактор, которому ты был верен всё это время, начинает своеобразно шутить над тобой. Тяжело, но придётся рискнуть - поставить на кон время и победить.
Ты пребываешь в поисках уже около недели, попутно работая над проектами в том же самом редакторе. В свободное время ты пытаешься использовать найденные инструменты, тем самым определяя их возможности и удобства для себя лично.
Тут ты вспоминаешь, что пару лет назад ты слышал об IDE, которая может всё то, что ты надстраивал над своим любимым редактором кода. Всё то, что нужно тебе и намного больше. Конечно же, ты скептически к этому отнесешься, ведь всё это время ты работал в любимом редакторе и ни о чем не жалел. Разумеется, ты вспомнишь о всех минусах IDE, о их громоздкости и огромном количестве лишнего функционала. Но ты не можешь не попробовать снова - возможно, это твоя последняя надежда.
Автодополнение кода работает, проверка кода ещё лучше, чем та, что я делал с помощью плагинов. Ох, даже проверка на существование переменных в Less организована. Ух, нифига себе, тут даже есть автоматических поиск примесей в файлах и выведение их параметров при использовании. И это лишь малая часть того, что тебя изумляет на этот момент. Начинаешь задаваться вопросами: Ох, где же эта IDE была раньше? Почему я её не использовал всё это время?
На этом твои поиски заканчиваются. Ты счастлив, ведь твой новый инструмент куда лучше прежнего.
Просьба не разводить споров между сторонниками различных IDE и редакторов типа Sublime Text (далее ST3), Brackets, Atom и т.д. Ведь я точно знаю, что защищать то, чем пользуешься, ты будешь до последнего. Или, пока не найдешь что-то интереснее.
WebStorm
Моим новым редактором кода стала IDE WebStorm от компании JetBrains , которая отлично знает как заманить на свою темную сторону новых пользователей.
Наверное, некоторые из вас задались вопросом - «почему именно она?». Я постараюсь как можно подробнее ответить на этот вопрос ниже.
Почему WebStorm?
Мне хотелось иметь такой инструмент, который был бы изначально полностью заточен на веб-разработке. Так уж сложилось, что помимо WebStorm существует некоторое количество других IDE, которые были отброшены из-за различных ситуаций, которые лично для меня - недостатки. Я намеренно не буду перечислять их, так как среди моих читателей могут найтись сторонники тех или иных редакторов или IDE, которые затаят на меня обиду (если ещё не сделали этого) или начнут рассказывать о том, как исправить эти недостатки. Поэтому не обессудьте и поверьте, что лично для меня WebStorm победил по всем фронтам.
Чем же так он тебе понравился?
Автодополнение
Наконец-то я получил нормальное автодополнение, причем не только HTML, CSS (Less), но и JavaScript. Они были и в ST3, но там были проблемы в том, что переменные он не предлагал. Для того, чтобы это исправить, нужно было ставить плагин, однако, он работал по сочетанию клавиш, а не автоматически.
Кстати, с автодополнением JS у ST3 какие-то конфликты. Ну никак не предлагались мне переменные для подстановки. Вернее сказать, они предлагались, но когда уже было написано где-то 80% названия переменной. Тут же всё замечательно работает с первой же буквы.
А ещё я получил автодополнение переменных в зависимости от контекста. То есть, если я работаю с примесью, то переменные мне будут предлагаться, в первую очередь, из её аргументов. Это сверхкруто и удобно.
Помимо этого, автодополнение отлично работает с классами и примесями. Это ещё один плюс в копилку, так как примесей в проекте может быть куда больше, чем 10, 20, 50 и даже 100 штук. А ещё на скриншоте видно, что прямо в этом же окошке отображаются ожидаемые аргументы для примеси.
Почему я так много времени уделяю плюсам, связанным с автодополнением? - Это дико экономит время, если проект уже перерос ту психологическую отметку, когда вы помните все названия переменных, примесей и классов для расширения (&:extend(...)).
Разумеется, можно и не запоминать названия переменных, если применять какую-то логику их названий, то есть конструировать переменные, в зависимости от предполагаемого контекста их использования. Например, если это переменная, необходимая для всего проекта, то следует конструировать её название следующим образом:
@base-font-size: 14px; @base-body-color: #333; @base-body-background: #fff;
Проверка на ошибки и отладка кода
Теперь можно писать 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 февраля) - как только я созрел для покупки, так сразу же они решили поднять цены:)
Всем спасибо за внимание, хорошего кода и отменных инструментов вам!
