предисловие
Среди инструментов IDE, используемых студентами, изучающими фронтенд-разработку, два являются абсолютно популярными: WebStorm и VSCode. Это также два основных инструмента, которые мы рекомендуем новичкам для начала работы, и эта статья используется для Amway WebStorm.Ограничения неизбежны, судите сами.
Webstorm был разработан компанией Jetbrains, которая была основана в Праге, столице Чехии, в 2000 году. Их самый известный продукт — IntelliJ IDEA, первая в мире Java IDE. Конечно, мне не нужно говорить, кто является первой IDE во вселенной.
Что касается VSCode, я фактически использую его в обычное время, и я использую версию Insider, но здесь у них совершенно разные позиции, один — IDE, а другой — nodepad.exe. Честно говоря, VSCode очень легко использовать в качестве блокнота, это действительно отличный редактор.
Кроме того, автор этой статьи является мягким порошком
Сравнение функций
Из коробки!
Webstorm | VSCode | |
---|---|---|
проверка кода | Надежный, умный, разработал собственный Линтер, который выявляет неиспользуемые селекторы, избыточную логику, необработанные промисы и т. д. и даже обучает языку | В основном полагаться на бесконечные возможности ESLint (то есть пока нет) |
контроль версий | Лучший клиент git на данный момент | Лучше, чем командная строка, лучше с установленными плагинами |
Встроенный контроль версий | Поставляется с LocalHistory, записывает изменения в режиме реального времени, отменяет результаты вашего гандикапа git reset --hard, поставляется с улучшенной версией Stash (Shelve) | Установить плагин |
Рефакторинг | Безопасное удаление переименования переменных в коде и в комментариях | Установить плагин |
плагин | Интересная разработка, качественные официальные плагины | Автомобиль с открытым исходным кодом! |
цена | Предприятие куплено / предварительная версия бесплатно | Денег нет вообще! |
Эффективность разработки | Медленное начало, быстрое развитие | Запуск очень быстрый, куча плагинов не обязательно быстрая |
проверка кода
Компания JetBrains в процессе долгосрочной разработки создала набор линтеров, который, на мой взгляд, очень прост в использовании. Например, он может проверять ваш код на наличие неиспользуемых переменных, что, конечно же, поддерживается ESLint, но он также может проверять наличие неиспользуемых селекторов, избыточной логики, неиспользуемых файлов или папок.
Что касается избыточной логики, то в основном это означает, например, чтоif (foo) return true else return false
Для такого рода избыточной логики WebStorm подскажет, что оператор If можно упростить, а также оператор Redundant else, потому что вы уже возвращались ранее и определенно не нуждаетесь в другом.
О unhandled Promise то, что он напомнит вам, если вы забыли подождать.
Он также проверяет наличие регулярных выражений. Например, если вы напишете регулярное выражение /(\d|.)/, вам будет предложено изменить его на /[\d.]/.
Для VSCode возможности Линтера полностью зависят от ESLint, насколько ESLint может это сделать. С этой точки зрения VSCode — это IDE с безграничными возможностями и безграничным будущим.
контроль версий
Можно сказать, что WebStorm интегрировал лучший клиент VCS на сегодняшний день, и это не только клиент git, Subversion, CVS, все они работают успешно.
Посмотрите на этот скриншот: Cherry-pick, Rebase, Merge и Undo commit или Reword. Хотя я не очень часто использую эти два, вам будет очень больно, если вы не будете использовать WebStorm. Конечно, фиксация отмены является только локальной, если она удалена, она позволит вам отправить фиксацию отмены.
И возможности WebStorm VCS на этом не заканчиваются. На мой взгляд, для Git Merge это лучший пользовательский интерфейс на рынке.
Умное слияние, большую часть времени проблем не будет. Он не уведомит вас, если один файл может быть автоматически объединен с другим, в противном случае он сохранит части автоматического слияния, чтобы вы могли их увидеть.В нем будут перечислены все файлы с конфликтами.
Итак, как же выглядит Git в VSCode? Ничего похожего, но есть плагин под названием Git Lens, который рекомендуется установить пользователям VSCode. Короче говоря, вам нужно установить плагины.
Встроенный контроль версий
WebStorm поставляется с функцией LocalHistory. В основном это выглядит так.
Он также поддерживает просмотр истории из выбора, и его VCS также имеет эту функцию, вы можете просматривать историю отдельного файла или папки или просматривать историю изменений небольшого фрагмента кода, короче, вы можете проверить, как вы хотите . Если VSCode хочет поддерживать эту функцию, установите плагин.
Студенты, в этом разница между автомобилем с открытым исходным кодом и Tesla.
Рефакторинг
В файловом меню первого уровня WebStorm вы не найдете таких опций, как «Удалить» и «Переименовать», все они хранятся в меню второго уровня, которое называется «Рефакторинг».
Вы можете видеть, что есть функция под названием «Безопасное удаление». Что оно делает? Это поможет вам проверить, где используется файл, перед его удалением, точность 99%, если не 100%. Оставшийся 1%, вероятно, является файлом в выходной папке, который ссылается на файл с тем же именем в выходной папке.
Эта функция относится к функции рефакторинга WebStorm. Он будет искать не только переменные, но и комментарии, строки и может включать текстовые константы и другие файлы, не относящиеся к коду.
Пользователям VSCode рекомендуется устанавливать плагины.
Суммировать
Итак, мы видим, что WebStorm практически не нуждается в установке плагинов сам по себе, он работает из коробки. Конечно, это не означает, что WebStorm не нуждается в плагинах, когда WebStorm будет установлен, он будет поставляться с более чем 50 плагинами, включая поддержку git, поддержку Markdown и другие базовые вещи. Стабильность этих плагинов зависит от денег на покупку лицензий, а для VSCode плагины в основном являются плагинами сообщества.
Мы так много сказали, что могут быть пользователи VSCode, которые скажут: запустите VSCode один раз, прошло несколько секунд, запустите WebStorm один раз, и прошла минута. Тогда тоже можно попробовать.Если установить плагин для VSCode до уровня WebStorm, запуск VSCode займет несколько минут.
Итак, когда выбрать VSCode?
Я подытожил здесь несколько опытов.
- Когда вам просто нужен nodepad.exe
- когда у тебя нет денег. Упс, моя подписка на WebStorm отключена уже 6 месяцев.
- Когда вы думаете, что Java работает на 3 миллиардах устройств, это глупо и думаете, что Java — это какой-то вирус
- Когда вы хотите написать плагин для своего резюме. Поскольку WebStorm — это Java, а VSCode — это Electron, фронтенд-программистам, безусловно, проще разрабатывать плагины VSCode.
- Когда вам действительно нужна удаленная разработка. Я должен сказать, что функция удаленной разработки VSCode является важной функцией, в том числе I am dead 2. Опыт удаленной разработки очень хорош.В отличие от этого, WebStorm не рекомендует пользователям выполнять удаленную разработку, потому что это необходимо делать в реальном времени. анализ тайм-кода и т. д. Что-то, что требует производительности дискового ввода-вывода. Если вам необходимо разрабатывать удаленно, вы можете использовать подключаемый модуль WebStorm Deployment для автоматической загрузки изменений в SFTP и их удаленной компиляции.
- Или вы лояльный пользователь vim, который любит возиться с IDE. Тогда вы действительно будете счастливы в процессе выбора плагинов, в этом случае я рекомендую вам использовать ArchLinux, вы будете счастливее.
Немного не по теме, ArchLinux очень модульная операционная система.После установки вы обнаружите, что у вас даже нет оболочки, только менеджер пакетов и драйвер проводной сети. вы можете выкатывать обновления каждый день, да, ArchLinux имеет только один канал выпуска и не предоставляет возможности отката версии. Напротив, второе место в ежедневном обновлении, Windows, все еще может удалить патч отдельно.
Начните работу с WebStorm
- Искать везде: Shift Shift
- Переключиться на файловую панель: Alt + 1
- Довольно много многофункциональных панелей можно открыть по Alt + Number.
- Измените терминал на свою любимую оболочку ~
- сделайте резервную копию ваших настроек
- Синхронизировать с учетной записью JetBrains
- Экспортировать как файл конфигурации
- Удаленная разработка
- Поскольку WebStorm анализирует код с высокой плотностью, мы не рекомендуем использовать магию, например удаленные файловые системы, для удаленной разработки. Если вам это действительно нужно, вы можете использовать инструменты > развертывание для автоматической загрузки продуктов.
- Также из-за этого WebStorm автоматически предложит вам добавить его в список исключений антивирусного программного обеспечения для повышения производительности.
- Редактор поставляется с горячими клавишами
- Alt + Enter, чтобы использовать предложения по исправлению
- Ctrl + D, чтобы заменить код
- Alt + Shift + перетаскивание мышью Вытягивает ряд курсоров
- Alt + Shift + ArrowKeys код перемещения
моя схема горячих клавиш
Не обязательно для всех.
- переместить курсор влево
Ctrl + Left
- перейти влево к следующему слову
Left
- Переместите курсор влево и выберите
Ctrl + Shift + Left
- Переместите курсор влево к следующему слову и выберите
Shift + Left
- перейти влево к следующему слову
- То же самое касается движения вправо.
- закрыть окно
Ctrl + W
- Расширить избирательный округ
Ctrl + Alt + W
, это функция, которую я почти никогда не использую
- Расширить избирательный округ
- переключать окна
Ctrl + 数字键
,Alt + 方向键
- переместить окно
Alt + .
- Разделить окно по вертикали
Alt + \
,Alt + F24
- Переключение между разделенными окнами
Alt + [
,Alt + ]
- перестроить код
Alt + ;
,Alt + F24
- Рефакторинг кода с помощью ESLint
Alt + '
Моя схема плагина
WebStorm действительно не нуждается в большом количестве плагинов.
У меня установлено только 5 плагинов, 3 из которых являются темами и плагинами внешнего вида.
- Nyan Progress Bar
- Rainbow Brackets
- GitToolBox
- Автоматическая выборка, встроенная авторизация, статус Git
- Git Branch Cleaner
- Автоматически удалять полностью объединенные ветки без отслеживания ветки