*UPDATED 6.06.2018* 

So what should you do not to lose all the features in Visual Studio Code that you already got used to in WebStorm?

• file icons (by default there are no icons, but you can setup them)
• WebStorm shortcuts (plugin or manual setup)
• integrated terminal (just open it)
• autosave (change the setting)
• smart tags – to edit 2 tags same time (plugin)
• autoimport
• path autocomplete (plugin)
• live templates (they are called snippets)(also ng2 snippets)
• local history (unfortunately looks like plugin is too green for now)
• limit line – to keep line less than X symbols (settings -> “editor.rulers”: [120])

Did I miss something?

Really missing parts or problems:

• • folded blocks copy
  • a lot of bugs with path autocomplete
  • files multi-select (github issue)
  • smart tags not always work when code split into 2 lines
  • no autoformat for selected block
  • multiterminal without tabs
  • quick search/filter for file structure (by typing)
  • TODO parser by the whole project (plugin)

• SCSS class name completion for the HTML

Something Extra plugins:

• Angular Language Service – must have for Angular projects
• git history
• angular2-inline
• color-picker
• autocompletion and refactoring support for SCSS
• CSS class name completion for the HTML
• Wrap selected text with html tags
• npm autocomplete
• project manager
• import cost
• Settings Sync (store and share setting with git) – my settings.
• Angular 2 TypeScript Emmet
• TypeScript Hero – for automatic import

Fun:

• Send messages to slack from VSCode
• Human-like typing for GIFs and live demos
• Vim emulation

WebStorm Keymap

* для MacOS – вместо [CTRL] жмем [CMD].

Подробное описание со скринами можно найти тут.

I just got known that WebStorm has such a nice possibility to edit HTML that is presented like a string (in JavaScript code) in separate window. All you need to do is press [Alt]+[Enter] and vuala:

• Indent – отступ
• Continuation indent – отступ, если следующая строка продолжает предыдущую строку

UPD: статься обновлена 21.11.2015. Старое имя утилиты – Testacular

Karma – инструмент на node.js, позволяющий запускать JavaScript код в нескольких браузерах, нацеленная на поддержку TDD подхода.

Karma – это не фреймворк/библиотека для тестирования, поэтому совместно можно использовать:

• Mocha
• Jasmine
• QUnit
• либо же что-то совсем другое, но написав свой адаптер

Браузеры, которые можно использовать:

• Chrome and Chrome Canary (npm install karma-chrome-launcher)
• Firefox (npm install karma-firefox-launcher)
• Safari (npm install karma-safari-launcher)
• PhantomJS (npm install karma-phantomjs-launcher)
• Opera (npm install karma-opera-launcher)
• IE (npm install karma-ie-launcher)
• SauceLabs (npm install karma-sauce-launcher)
• BrowserStack (npm install karma-browserstack-launcher)
• и многие другие

Установка:

$ npm install -g karma

Проверяем что все установилось:

$ karma --version

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

npm install karma-jasmine

и подключение к браузеру(возьмем Chrome):

npm install karma-chrome-launcher

Настройка:

Все настройки можно задать в конфигурационном файле. Мы можем создать свой файл настроек воспользовавшись мастером инициализации:

$ karma init

Разберем основные моменты karma.config.js:

//в скобках указано значение по умолчанию
basePath('') -
files([]) - список файлов/шаблонов для загрузки
exclude([]) - список исключений для предыдущего пункта
reporters(['progress']) - вариант вывода прогресса
port(8080) - порт веб-сервера(testacular)
runnerPort(9100) - порт клиента
colors(true) - включение/выключение цветов при выводе
logLevel(LOG_INFO) - LOG_DISABLE|LOG_ERROR|LOG_WARN|LOG_INFO|LOG_DEBUG
autoWatch(false) - выполнение тестов при изменении файлов
browsers([]) - Chrome, ChromeCanary, Firefox, Opera, Safari, PhantomJS
captureTimeout(5000) - задание таймаута в миллисекундах
singleRun(false) - для одноразового запуска
preprocessors({}) - список обработчиков, которые будут применены к файлам, до загрузки в браузер, например - CoffeeScript

Итак, у файл настроек есть, теперь можем запускать утилиту:

$ karma start

Т.к. мы еще не добавили сами тесты, то должно вывести что-то типа:

Executed 0 of 0 ERROR (0.006 secs / 0 secs)

Давайте создадим простой тест (на Jasmine):

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(true).toBe(true);
    });
});

сохраним его в файл test.js и подключим этот файл в конфиг:

files: [
  'test.js'
],

после чего снова запустим karma и посмотрим в консоль:

Executed 1 of 1 SUCCESS (0.086 secs / 0.002 secs)

Как видим: тесты прошли успешно, один тест выполнился.

 Подключение в WebStorm

UPD: WebStrom начиная с версии 7 уже добавили поддержку Karma, поэтому не нужно уже выполнять танцы с бубном и настройкой node debug, который были до этого.

Заходим в настройки запуска и отладки:

Добавляем карму:

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

Если мы хотим выполнять тесты после каждого изменения в коде, включим вот эту опцию:

Теперь webstorm будет нас информировать о состоянии тестов, в том числе в бекграунде:

то есть если мы сделаем TDD или просто хотим знать момент, когда мы что-то пошло не так, это довольно удобно:

Как извесно с пятой версии в WebStorm/PhpStorm появилась новый плагин под названием LiveEdit, который дает возможность писать код и сразу смотреть результат.

Вот прекрасное видео, которое демострирует возможности плагина:

Если понравилось – пару слов о найстройке:

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

Далее найти файл

/PhpStorm/plugins/JavaScriptDebugger/extensions/HowToInstallGoogleChromeExtension.html

с инструкцией по установке расширения для Chrome: в большей части случаев она заключает в том, чтобы установить новое расширение  из файла /PhpStorm/plugins/JavaScriptDebugger/extensions/jb.crx

Для Linux есть своя специфика:

$ sudo mkdir -p -m0777 /opt/google/chrome/extensions

На свякий случай ссылка на страничку с возможными проблемами:
http://confluence.jetbrains.net/display/WI/LiveEdit

Покопавшись в плагинах WebStorm (который является моим текущим IDE), я обнаружил, что для mongoDb расширения, увы, еще нет. Ну что же, играем дальше. Есть плагин на node.js, который довольно просто настраивается. После чего можем в настройках запуска проекта

добавить вариант запуска текущего скрипта нодой.

Надеюсь, вы не забыли поставить монго драйвер на ноду.

Итак, у нас есть удобный редактор, подключенная нода и консольный вывод в самом редакторе. Осталось только накидать код:

var mongo = require('mongodb');
var host = 'localhost';
var port = mongo.Connection.DEFAULT_PORT;

var db = new mongo.Db('test', new mongo.Server(host, port, {}), {safe:false});
db.open(function(err, db) {
    console.log("Connected!");

    // а вот тут и пишем наш код, который хотим отладить

    db.close();
});

Happy codding!

JSHint – бесплатный инструмент для проверки JavaScript кода на соответствие стандартам оформления кода и внутри командным соглашениям. Возник как ответвление от JSLint, который разработал автор JSON формата Дуглас Крокфорд. Инструмент не имеет фиксированных правил и легко конфигурируется под конкретные требования к коду.

Как пишет создатель JSHint: “It is quickly transforming from a tool that helps developers to prevent bugs to a tool that makes sure you write your code like Douglas Crockford.”

Что касается WebStorm, то поддержка JSHint/JSLint(включены 2 инструмента) появилась начиная с версии 3.0. Включается довольно просто в настройках:

Там же мы можем задать все необходимые параметры.

После чего у нас появятся подсказки об ошибках в оформлении кода:

На официальном сайте есть довольно подробная документация.

Сам WebStrorm хранит настройки в файле .idea/jsLinters/jshint.xml, соследующей структурой:

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JSHintConfiguration">
<option bitwise="true" />
<option curly="true" />
<option noarg="true" />
<option forin="true" />
<option strict="true" />
<option noempty="true" />
<option undef="true" />
<option eqeqeq="true" />
<option nonew="true" />
<option browser="true" />
<option maxerr="50" />
<option predef="can, windown" />
</component>
</project>

К сожалению, WebStorm еще не подружили с .json стандартным форматом для JSHint. Пример .json варианта можно посмотреть тут.