Ett litet tips för frontendutveckling med IntelliJ

Ett litet tips för frontendutveckling med IntelliJ
december 12, 2015 Ola Petersson

Under gårdagen hade vi i Squeed återigen en av de vida känt trevliga luncherna på Ritz. Då vi i februari kommer ha närvaro med en hands on workshop på JFokus (Hands-on Lab: JHipster, the best way to breed a new webapp) så hade vi en konversation om en av de tools som används av just JHipster, nämligen Browser Sync

I korthet är Browser Sync ett verktyg som pushar ut dina ändringar i js, html, css till de browsers du har igång. Istället för att behöva byta fokus från ditt IDE och refresha din(a) browser(s) så kan du i realtid se effekten av dina ändringar.

Under eftermiddagen hittade jag ett plugin till IntelliJ med ambitionen att göra samma sak. Detta plugin är inte i närheten av Browser Sync (fungerar t.ex. endast för Chrome), men eftersom inte alla idag sitter med gulp/grunt i sin befintliga stack kan detta vara ett bra förstasteg att göra för att öka sin produktivitet med en minimal tröskel.

Installera LiveEdit plugin

LiveEdit kommer förinstallerat och klart för den som kör WebStorm, men för oss Java-utvecklare är det ofta vanligare att man tankar ner Ultimate-versionen av IntelliJ där det ej är inkluderat. Det första vi behöver göra är därför att installera LiveEdit i IntelliJ.

För att få syncen mellan din browser och IntelliJ behöver du också ladda ner och installera JetBrains IDE Support for Chrome.

För att aktivera den automagiska refreshen behöver man också gå in i settings (ctrl+alt+s) och i Build, Execution, Deployment -> Debugger -> LiveEdit aktivera Auto in (ms) och jag skulle också rekommendera att bocka i alternativet att highlighta dina HTML-element.

Få det att rulla

För att sätta igång med ditt frontend-hackande kan du nu sätta upp en debug-konfiguration (alt+shift+f9) av typen JavaScript Debug och där skriva in den URL du vill gå mot. I mitt fall har jag en separat konfiguration som redan har deployat en spring-boot applikation.

LiveEdit

Genom att starta debuggern kan du nu se dina HTML-element markeras i din browser medans du bearbetar de i koden samt få ut dina js-uppdateringar på direkten.

Av någon anledning fick jag inte css-ändringar att forcera en refresh men det är ändock en bra bit på vägen mot en ännu produktivare vardag :-).

via GIPHY

Happy coding!

0 Kommentarer

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.