net

25 JavaScript tools

EDITOR PLUGINS

Above Quokka will output the contents of the file to a window connected to the editor

Emmet

emmet.io

Emmet is a set of

plugins available

for most code

editors that aims

to enable developers to code

quickly by removing all of the

slow, repetitive tasks

involved. When developers

enter a small keyword, it can

detect and replace it with a

larger block of content.

Emmet will also understand

their intentions, parse the

syntax and even expand the

code automatically.

Import Cost

github.com/wix/import-cost

Over time,

applications can

soon become

bloated with

large dependencies weighing

them down. Import Cost is a

simple plugin for VS Code that

will highlight the size of any

imports inline as they are

added and are colour-coded to

see at a glance what might be

over-inflating the bundle. The

developer can then decide

whether that extra weight is

justified or not.

BracketHighlighter

facelessuser.github.io/

BracketHighlighter

Code can often

get buried inside

nested objects,

functions or

elements. Sometimes that can

make it hard to see exactly

which open bracket marries

up to which close bracket.

BracketHighlighter for

Sublime Text will highlight

one bracket when the other is

selected and will even work

with multiple selections and

inside strings.

Chrome Debugger

github.com/Microsoft/

vscode-chrome-debug

VS Code can

create

breakpoints and

provide feedback

on running Node applications

already but what about the

browser? The Chrome

Debugger plugin will hook the

editor up to a DevTools

instance to enable the same

behaviour in-browser. Step

through code, pause execution

and monitor variable values in

a familiar environment.

Quokka

quokkajs.com

Despite our best efforts, no

developer can get everything

right first time. When a

small idea needs trying out,

setting up a project just to see if it works

can be overkill. When working with

unfamiliar tools and libraries it is best to

have an isolated workspace that shows

exactly what is happening at each step.

Quokka is an environment that lives

inside an editor. It evaluates code inline

and displays the result as it gets used.

This makes it great for trying out blocks

of logic without having to build a new

bundle and check it in the browser.

Coloured blocks alongside each line

number shows that it’s covered by

Quokka. A green block indicates there are

no problems, while red alerts that there

is an issue with that line. The comment

at the end of that line provides more

information. A grey box shows a line is

never reached, which may or may not be

an intentional decision.

While Quokka works with most

setups straight away, its settings can

be customised within each file or inside

package.json if used with npm. Most

languages based on JavaScript are already

supported, including JSX and TypeScript,

but plugins are also available to work

with other syntaxes such as jQuery

without having to explicitly import it.

Plugins can be brought in to set up and

tear down environments each time the

code runs.

The project is made by the same team

as wallaby.js, which features similar

functionality but for test suites. As a

failing test gets written, Wallaby will

highlight the issue straight away, which

means errors are caught sooner.

Quokka is available as a plugin for

VS Code, Atom or JetBrains IDEs. The

free Community edition will cover

most cases, but the optional Pro edition

enhances things further by enabling

inline inspection of code to identify slow

performance issues.