Что лучше webstorm или visual studio code
Хочу поделиться с сообществом открытой недавно для самого себя новой IDE от JetBrains—WebStorm, оказавшейся просто превосходной, и сравнить ее с Visual Studio в плане редактирования Javascript.
Статья будет короткой, скорее рекламной. Disclaimer—я никакого отношения к JetBrains не имею, но IDE действительно очень хороша; и многим она сильно облегчит жизнь. Ссылка на виновника--вуаля.
Обзор
Подробно описывать все ее достоинства я не собираюсь, благо можно найти их по ссылке.
Основная цель—web-разработка: редактирование css, html, javascript.
Она очень легкая и быстрая. Инсталлятор занимает всего 67 мегабайт, установка—за секунды, при открытии потребляет около 27 мегабайт памяти; при открытии файла jQuery 1.4.1 стала потреблять 80 мегабайт.
Она кроссплатформенная. Что тут еще скажешь?
Она платная, но есть пробный период в 45 дней, стоит 69 долларов для личного использования. Я думаю, что WebStorm стоит того.
Visual Studio vs WebStorm
Базовое редактирование текста
Visual Studio безумно плохо справляется с основной задачей IDE—базовым редактированием кода. Она не умеет сворачивать функции, классы, по умолчанию не выводит вертикальных indent lines, не указывает пару при наведении на одну из скобок.
И VisualStudio:
Code Completion, error search
В Visual Studio 2010 есть неплохой Intellisense, но он работает с большими временными задержками, и большую часть синтаксических ошибок не находит, так что все равно приходится пользоваться jsLint.
WebStorm почти мгновенно находит синтаксические ошибки и использование необъявленных переменных или функций (учитывая и другие файлы в директории).
В WebStorm есть code completion, но, правда, почему-то только после того, как вы набираете точку. Это один из немногих недостатков, которые я заметил. Надеюсь, он будет поправлен с предстоящим выходом новой версии. И он, как оказалось, не критичен.
Code navigation
В WebStorm есть удобный code navigation, аналогичный Resharperовскому: при зажатой кнопке ctrl и щелчке левой кнопкой мыши. В Visual Studio ничего похожего нет.
WebStorm умеет переходить к параметрам функции, объявлениям переменных в теле функции, объявлениям переменных в функции-конструкторе, когда вы находитесь в одной из функций прототипа, и даже больше.
Пример (он бессмысленнен, поскольку сокращен; а вообще это плагин к jQuery для перевода через Bing):
Так вот, при навигации к translateUrl в методе handleClick (строчка 9) WebStorm отправит нас к объекту TranslationManager.prototype.defaults (хотя в этом методе используется сформированный на строчке 20 другой объект). По-моему, это просто отлично!
Find usages
Умеет искать использования по проекту. Если в примере выше искать использования по функции конструктору, то выведет вот что:
Visual Studio, как водится, не умеет.
Refactoring
Умеет переименовывать переменные так, чтобы имя менялось во всех использованиях.
Visual Studio… и так понятно.
Code Structure
Есть окно для структуры класса. Например, вот:
Visual Studio… на лопатках, вроде. Что бы Scott Gu не писал когда-то в своем блоге, что у VS 2010 лучший редактор javascript.
Side Panels
Я не научился заставлять боковые панельки в WebStorm выезжать/скрываться автоматически, как в Visual Studio, это их недостаток. Но и с открытыми можно прожить.
Некоторые другие аспекты
Поскольку WebStorm рассчитана на совместное использование с какой-то основной IDE, то умеет просто открывать готовые папки с файлами. К сожалению, в открытых папках появляются служебные подпапки вида .idea, что может доставить неудобство при работе с системой контроля версий. Но ведь всегда можно добавить исключение, верно?
Code completion в WebStorm browser-specific, то есть указывает, какие dom-методы поддерживаются какими браузерами.
На сайте JetBrains указано, что можно подключить документацию для популярных библиотек типа jQuery. Но я не пытался, поскольку все методы для объекта jQuery WebStorm и так видит, если файл jQuery расположен в директории с редактируемым файлом.
Заключение
Web Storm определенно намного превосходит Visual Studio в качестве редактора яваскрипта. Равно как и css, и html (это рекомендуется проверить самим).
К сожалению, я не работал ни в Aptana studio, ни в Emacs + js2. Если у кого-то есть опыт сравнения с этими или какими-либо другими продуктами, добро пожаловать в комментарии.
Пару лет назад пользовался Webstorm, ему не было равных по функционалу, потом перешел на Vs code, он на сегодня очень развился и очень крут. Но видимо webstorm тоже не стоял на месте.
Так вот на 2019 год чем webstorm реально превосходит vscode?
А может появились какие то еще более крутые ide для фронтенда?
Простой 1 комментарий
Ну если интересует частное мнение, то я считаю, что на сегодняшний день, как и два года назад, безусловный лидер в области IDE для веба это webstorm/phpstorm.
Зато VS Code можно с собой на флешке носить.
Я бы хотел прекратить платить каждый год за WebStorm и пользоваться бесплатным опенсорсным софтом, но.
Простой пример: есть export class MyClass <> в файле MyClass.js, переименовываем класс, WebStorm предлагает заодно переименовать файл и исправляет все импорты. И таких мелочей, которые снимают с человека дурацкую ручную работу -- полно. В VS Code такого нет.
s0xzwasd, поставил расширение, открыл router.ts в своем проекте, нажал Ctrl+F2 и переименовал константу в routr. Имя файла не поменялось. Хуже того, в main.ts так и осталось import . ЧТЯДНТ?
- Adobe Dreamweaver
- Eclipse
- Komodo IDE
- Codelobster
- NetBeans IDE
- Visual Studio
P.S. Многие говорят что у VS Code есть плагины, но все почему-то забывают что у WS они тоже есть.
Ой, ну это холиварная тема. На первый взгляд, webstorm из коробки может больше, чем VS Code. Но VS Code отлично допиливается расширениями, причем очень круто. Расширения пишутся тоже довольно легко, как к браузеру. Да и на мой взгляд, VS Code работает шустрее, чем webstorm, и жрет меньше памяти (я помню про electron) чем webstorm.
Это как условное Renault и BMW, вроде бы и то, и то машина, но во втором ты садишься и все на своем месте, это совсем другое ощущение.
Вот разница где-то такая, хотя ехать и на VS code можно.
А вот как вспомогательный редактор, VS code божественный!
Долго мучался со всякими настройками линтеров, форматированием и плагинами в vs code по разным официальным документациям, которые быстро устаревают. Потратил несколько дней времени на это. Сейчас работаю в WebStorm, и большинство этих настроек уже есть из коробки, а за один день работы я мог бы заработать на год подписки Webstorm. Вот и что в итоге дешевле?
Ахаха, я вот щас этим и занимаюсь, поставил vs code ), я как и вы уже 2 день потратил на настройки и мне советую WebStorm.
WebStorm - ну что есть первые тесты ), ошибки в css подсвечивает плохо, поставил из коробки, если скролить то можно и не заметить такую ошибку, где слева идет нумерация, не показывает ошибку, так что видно не будет ) если не скролить.
Простая ошибка не закрыл тег.
В js, убрал тупо >); и он вообще ничего не подсветил ), хотя WebStorm идет больше для js
В index,php, ну где css,js,php,html, я добавил два лишних дива закрывающих, и он не показывает ошибки )))
Там же в index,php, если поставить в начале тега, пытался везде поставить, то он конец не показывает, в js показывает и в css, а вот в html странице нет, это плохо.
Типичные проблемы которые у меня были в VS code, а вы говорили что типа лучшая прога ))
Пытался найти настройках где на Русский переключить не нашел.
Программа Русского производства, а Русского языка я так понял нет, почитал об этом ) странно как-то ))
Сразу скажу, нет единого ответа. Все инструменты хороши. Лично я использую оба этих редактора в зависимости от задачи.
Тем не менее в этой статье хочу наглядно показать разницу между WebStorm и VS Code.
WebStorm это IDE. VS Code - редактор кода
Знаете в чем разница?
Редактор кода
По сути это просто тестовый редактор. Редакторы кода обычно специализируются на том, что помогают писать код проще - автокомплитом, подсветкой синтаксиса и так далее.
Аббревиатура от Integrated Development Environment - интегрированная среда разработки.
Это программа, которая включает в себя набор специализированных инструментов для упрощения и автоматизации разработки.
Например, IDE может включать в себя:
- Редактор кода
- Анализ кода
- Работа с VSC (например Git)
- Инструменты для тестирования/компиляции/дебаггинга кода
- Инструменты для безопасного рефакторинга
- Другие инструменты
Сравнение WebStorm и VS Code
В WebStorm все доступно "из коробки»
Для меня это очень важный пункт. Когда я работаю с WebStorm, то мне не нужно думать про то, какие плагины и расширения нужно установить. Я просто ставлю программу и у меня идет полный набор функционала по умолчанию.
VS Code мы можем расширять дополнениями, и получать мощный функционал. Но тут нужно четко знать, что установить или провести много времени в поисках.
Анализ кода
Приведу пример с Promise
На скринах ниже мы видим, что WebStorm понимает, что метод возвращает Promise, но мы никак его не обрабатываем. Как следствие можем лучше оптимизировать код или заранее выявлять ошибки. В VS Code такой возможности нет.
WebStorm
VS Code
Инспеция кода
Как один из примеров, WebStorm может заранее понимать, какие методы используются, а какие нет. Тем самым на проектах, где много кода нам это очень сильно может помочь.
WebStorm
VS Code
Локальная история
В WebStorm есть очень крутая фишка, которая позволяет смотреть за локальными изменениями в вашем файле. Мне на проектах это очень помогало не терять части кода. В VS Code такого нет
Безопасный рефакторинг
В WebStorm вы можете находить использование конкретных переменных по всему коду. При необходимости рефакторить их название не руками, а одним кликом. Программа гарантирует вам, что код будет работать, все места где переменная используется будут поменяны, все импорты исправлены. Помимо этого вы так же одновременно можете менять название файлов.
Тестирование и дебаггинг
В WebStorm встроен тест раннер, который позволяет прямо в программе дебажить и тестировать код. В VSCode это возможно только с использованием Chrome Debugger или дополнительными плагинами. Пример в WebStorm
Интеграция системы контроля версий
Есть в обеих программах. Но в WebStorm намного удобней ей пользоваться и это коробочное решение. То есть вам не нужно ничего дополнительно устанавливать, весь функционал уже доступен.
Интеграция Angular CLI
Просто оставлю тут эту гифку. Разработчики ангуляра будут в восторге. Это WebStorm
Скорость
WebStorm написан на Java.
VS Code написан на HTML + CSS + JavaScript (Electron)
В целом VS Code работает быстрее, особенно при загрузке проекта. Но если у вас хороший компьютер, то разница будет незначительной.
А если вы работаете с одним проектом, то разницы практически не будет, после того, как WebStorm проиндексирует ваш проект. Так же стоит учесть, что если установить очень много плагинов под VS Code, то он может проигрывать по скорости.
Стоимость
VS Code бесплатный и на мой взгляд это лучшее бесплатное решение.
WebStorm платная программа. Стоит всего 5.9$ (около 440 рублей) в месяц.
На официальном сайте можно скачать пробную бесплатную версию на 30 дней. А если вы студент, то вы можете получить бесплатно программу на год.
Как я и говорил в начале, нет правильного решения. Данная статья не говорит, что один инструмент хороший, а другой плохой. Оба решения - отличные.
Лично я следую такому алгоритму:
На Youtube я в основном записываю ролики используя VS Code. Причиной тому служит тот факт, что решение бесплатное. Это означает, что бОльшее количество зрителей сможет получить тот же интерфейс, что и у меня на экране.
Так же я использую VS Code для быстрого прототипирования или в качестве вспомогательного редактора.
Для остальных случаев и своих проектов я использую WebStorm. Когда я работаю с большими проектами, то мне удобней сразу находится в мощной инфраструктуре и иметь надежный инструмент в написании кода.
Особенно хочу отметить разработку на Angular - тут я всегда выбираю WebStorm, так как у них очень плотная и мощная интеграция. Не разработка, а одно удовольствие. Когда редактор почти сам за тебя пишет код)
Александр, вим мод есть для любого редактора, но именно сам вим юзаю только чтобы быстро что-то написать.
Евгений Амирасланов
Антон Ширшов
Евгений, из того, что написано. VS Code поддерживает множество языков и бесплатно, WebStorm только JS и платное. Я не пробовал ни то ни другое. И я выберу VS Code. Судя по тому, что я прочитал.
Андрей Нерсесян ответил Арсению
Андрей Беренда
+ можно взять подписку не только на WebStorm, а так же другие аналоги, и будет поддержка не одного языка(PyCharm, GoLand, . )
Join the DZone community and get the full member experience.
Ok, ok, I know the title is contentious, but don't start with me. I've been locked up for over 9 weeks now due to COVID-19, homeschooling my kids, doing my full-time job (which I am feeling very grateful for), and trying not to get heart disease from over-eating and drinking too much. So just run with me here.
I need to start out by saying this is not a VS Code hating session. I actually really like VS Code. I think it’s a great piece of engineering, the community and ecosystem are fantastic, the start times are so good (I love code . ), the price point is perfect and — full disclosure — I am currently writing this piece using VS Code! So this is not a hater’s session.
It’s also not a corporate fluff piece. Instil is a training partner for JetBrains but we’ve used their stuff internally for development long before that and I used JetBrains products before joining Instil. We recommend their products to clients and on training because we actually think they are the best and help with your day to day work. So, we’re not getting a commission — this piece is all my own opinions, and they’re just that, opinions.
So let’s get into it. I wanted to write this post after coming off a recent project (React, TypeScript, Electron) where I was frequently pairing with a colleague who was using VS Code. This reminded me why I prefer development in WebStorm, JetBrains’ JavaScript IDE. Note, I’m not a VS Code expert, so there may be (probably is) a way to do everything WebStorm does in VS Code, which is why I’m starting with…
1. It Works Out of Box
There are some great bundle packs out there, but this hunting is not fun for me. There have been so many times teaching a team who actually use VS Code and each one of them has different features available. I might have some features on my VS Code, too, but I can’t tell them which extension enabled it. I’ve also had scenarios where I’ve been trying to replicate a WebStorm feature so I install an extension, and it sort of works, maybe 75 % of the way. So I try another, and now I get a conflict and multiple menu options for the same thing.
It’s not to say you can’t get VS Code exactly the way you want, and then share that with the team. But it is more work.
I’m too busy. I install WebStorm. I do updates with Toolbox. I get on with my work.
2. Column Mode
This feature is so useful in WebStorm and the other JetBrains IDEs. Hold Shift + Alt and drag the mouse to select columns rather than lines. The UX is just really nice. When dragging at the end of lines the cursor hugs the end of the line which is what you usually want.
Alt + click allows placement of multiple cursors at arbitrary locations. Pressing Ctrl twice and holding down also allows you to have multiple cursors with keyboard arrows. Also, using line navigation (home, end, arrows, Ctrl + arrows etc.) all work with the multiple cursors as well.
VS Code does this, too, but it is a little bit more clunky. You can use one modifier ( Shift + Alt + drag) for column mode but it’s not the nice hugging-the-line-end version. It also extends from where the cursor currently is rather that starting the selection from the first click. Alt + click also does arbitrary multi-cursor placement but you also need to toggle it on first. You can select a block and then use another key-press ( Alt + Shift + I ) to place the cursor at the line end. So like a lot of things in VS Code, the features may be there, but they don’t work quite as well or as intuitively.
3. Quick Fixes
Alt + Enter is your best friend in WebStorm. The Quick Fixes are so good at doing the heavy lifting as you’re coding. For example, I usually call methods before they exist, passing in the parameters, thinking about the name and the intent, and then a quick Alt + Enter brings up the quick fix to generate the method or function. You learn the positions of various fixes and can quickly use arrows and Enter to select. For example, to generate a method/function it is the top one so a quick sequence of Alt + Enter , Enter creates my method.
The generated code template then allows me to cycle through the names of the arguments quickly before placing me in the method body. These quick fixes are everywhere — invert if , remove redundant code elements, update method return, add an argument to the method signature, ES Lint fix, ignore directives etc.
So VS Code has Ctrl + . for similar functionality. It’s just it never seems to offer as many and the ones that are there don’t seem to work as well. For example, the generate method (at least on my setup) didn’t add white space to separate the generated method, didn’t allow me to edit the names of the parameters, and left the cursor at the call site.
Also, when I went to create an example for number 5 below, I wrote some code and then tried to use the assist to generate functions. The menu didn’t provide me the action to generate a function. It does seem to work for methods inside classes but not functions. Very frustrating — like a lot of my experiences in VS Code — it almost works. It gets you 75% of the way there.
4. Auto-Import and Move Refactoring
The auto-import in WebStorm just works. I know the type I want, I use it in code and let the IDE auto-complete. This not only auto-completes but does the auto-import too. If I have the name written first (or have pasted something into the file) then a simple Alt + Enter brings me up to my Quick Fixes, and I can quickly add the imports.
I also love being able to move files, just drag and drop, and be confident that all the imports will update correctly. I think about the way I want the code structured and then make the changes without worrying about the effort as the IDE is doing the heavy lifting. This is how it should be.
I have in the past found the VS Code auto-import extensions to be a bit flakier (though re-testing for this article they seem to be pretty good). There are some minor annoyances like when I move files it opens all the other files that need updating.
5. Extract Variables, Constants, and Methods
This is something I do all the time. Highlighting an expression or a block of code and extracting as a variable, constant or function. There are extensions to do this in VS Code, but WebStorm just works better. We can use Ctrl + Alt + V for variables, P for parameters, and C for constants, and the IDE is clever enough to see multiple occurrences and replace them all.
For functions, it will allow me to choose where the function is placed. This is very useful with nested structures and higher-order functions. For example, in a test, I may break out a helper function.
Ctrl + Alt + M extracts the highlighted code into a method or function. Since we’re in TypeScript, this could be placed at 4 scopes, inside the it arrow function, in either of the describe arrow functions, or globally. WebStorm lets me choose where easily.
VS Code only offered to place at the module level.
Interesting as well that I did this in VS Code using Ctrl + . as pressing F1 , which should show all actions, didn’t offer Extract function. I also found that it would offer to place in various scopes in other parts of the code. It’s this sort of inconsistency that I find frustrating. It also won’t find multiple occurrences.
6. Inlining
This is the other side of the coin to extracting variables, constants, and functions. I’ll have something named which is not adding any value and I can easily inline to the places it is used via Ctrl + Alt + N . I didn’t see a way to do this in VS Code.
7. Git Integration
I mainly use Git from the command line, but for a few operations the GUI is much better. The integration into VS Code is pretty good but WebStorm has some great UX on this. For example, getting the history on a block of code.
8. Code Inspections and Suggestions
I find WebStorm is really good at informing me about my code, indicating situations where I may be making a mistake or could write a cleaner solution. Some of these things will come from compiler services or ES Lint and VS Code can often provide these. Others, VS Code doesn’t provide. For example, here I am getting a hint that I am calling a method that returns a promise, but I am not using await .
I find WebStorm keeps up to date with the languages and frameworks regularly. Then these hints are great for learning new features and idioms of a language or framework. A handy Alt + Enter applies a quick fix to make the update.
9. Find
This is a ubiquitous feature for an editor. However, the speed of the WebStorm Find in Files is just so good. I press Ctrl + Shift + F and then the window is there. I start typing, and I am immediately seeing results. Easy filtering by file type, case, regex, directory etc. just make this an awesome feature for navigating code. The Find result window also has full editor capability so I can make the changes there and then.
VS Code also has a Find in File, but the interface is nowhere near as smooth.
10. All the Rest
There are lots of little things the IDE just does better. For example, VS Code will move a line of code up or down with Alt + Up / Down . WebStorm does this too via Ctrl + Shift + Up / Down but is also block aware. So I can quickly move functions and classes up as a single block - without having to select them. I only need to have the cursor on the function signature line, or the first line of a for/while etc. The undo/redo tracking is great. Local (non-Git) history is a lifesaver when I’m over-eager with my Git commands…and many more.
Conclusion
I don’t think I’m being overly biased. I am quite lazy, which is why I want an easy path to do what I actually care about, writing clean code to build useful software for clients. WebStorm gives me that.
There’s still lots to like in VS Code and lots of things on par with WebStorm (and a few better). I look forward to the post “10 Reasons I Prefer VS Code to WebStorm” — I may even write it myself one day.
I also don’t pay the bills (well not directly) so I’m not weighing up value for money here. But as a professional developer I see the cost of the license paying for itself in the time it would take to configure VS Code.
Finally, I don’t mind which IDE you use. I have my preference, but whichever one you use, try to become a master of it. If VS Code is your thing, learn the keyboard shortcuts, pair with other proficient users, learn the best extensions, and share with your team. This will all pay dividends in the long run and you’ll spend more time thinking about your code and less time typing… and that’s a good thing.
Published at DZone with permission of Eamonn Boyle . See the original article here.
Читайте также: