Docs / Everyday

The editor

The editor suggests names, shows types, underlines mistakes and formats your code.

On this page

Suggestions
Types on hover
Mistakes
Format Code
Format before runningJSpark+
Tailwind suggestionsJSpark+
Good to know

The editor knows JavaScript and TypeScript. It reads your Snippet as you type, with the same TypeScript that checks a TypeScript Snippet, and it works with no connection.

Suggestions

As you type a name, or after a dot, a list of names that fit appears under the cursor. The pane beside it says what the picked name is: its type, and its documentation when it has some.

1⌄const word = "ha"

2⌄word.rep

After word.rep, the list offers repeat, replace and replaceAll; the pane explains repeat.

Press ↑ and ↓ to pick a name, Enter to put it in, and Esc to close the list.
Press ⌃Space or Ctrl+Space to open the list when it is not showing.
After import … from ", the list offers your installed packages.
To stop the list from appearing by itself, turn off Settings → Editor → Suggest while typing. ⌃Space or Ctrl+Space still opens it.

When you type a function call, a box lists what the function takes, and marks the argument you are typing.

Types on hover

Rest the pointer on a name to see its type. This works in JavaScript too: the type is the one TypeScript works out from your code.

type Item = { name: string; cents: number }

1⌄type Item = { name: string; cents: number }

2⌄

3⌄const cart: Item[] = [

4⌄ { name: "Coffee", cents: 450 },

5⌄ { name: "Bagel", cents: 300 },

6⌄]

7⌄

8⌄function price(cents: number) {

9⌄ return `$${(cents / 100).toFixed(2)}`

10⌄}

11⌄

12⌄const total = cart.reduce((sum, item) => sum + item.cents, 0)

13⌄console.log(price(total))

14⌄console.log(price("12.50"))

$7.50

$0.13

Done in 3ms·Runs as you type

Hovering price shows the function’s type; hovering the underlined argument shows why it is wrong.

To turn this off, open Settings → Editor → Show types on hover. In the Timeline, hovering a name shows its value instead, whatever this setting says.

Mistakes

The editor underlines mistakes a moment after you stop typing. Rest the pointer on an underline to read the message.

In a TypeScript Snippet, it checks types too, and underlines type errors, as in the picture above.
In a JavaScript Snippet, it underlines mistakes in the syntax. TypeScript syntax is one of them.

type Point = { x: number; y: number }

1⌄type Point = { x: number; y: number }

2⌄

3⌄function distance(a: Point, b: Point) {

4⌄ return Math.hypot(b.x - a.x, b.y - a.y)

5⌄}

6⌄

7⌄console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }))

Line 1: SyntaxError: Unexpected identifier 'Point'

Didn’t run·Runs as you type

TypeScript types in a JavaScript Snippet are underlined, and the Run fails. Picking TypeScript fixes it.

A type error does not stop the Run: the code runs, and the console shows what it did. To make a type error stop a TypeScript Run, see My TypeScript did not run because of a type error.

Format Code

Format Code tidies the spacing, line breaks and quotes of the code on screen. Do one of these:

Press ⇧⌥F or Shift+Alt+F.
Choose Edit → Format Code.
Click the Format button in the footer.

1⌄const order={items:[{name:'Tea',price:3},{name:'Cake',price:4.5}],paid:false}

2⌄function total(o){return o.items.reduce((sum,i)=>sum+i.price,0)}

3⌄console.log( total(order) );

1⌄const order = {

2⌄ items: [

3⌄ { name: "Tea", price: 3 },

4⌄ { name: "Cake", price: 4.5 },

5⌄ ],

6⌄ paid: false,

7⌄}

8⌄function total(o) {

9⌄ return o.items.reduce((sum, i) => sum + i.price, 0)

10⌄}

11⌄console.log(total(order))

The same code before and after Format Code: no semicolons, double quotes, and each item on its own line.

JSpark formats with Prettier, built into the app, so it works offline. The first time, it takes a moment to load.
The style is fixed: no semicolons, double quotes, and lines up to 90 characters.
In a web Snippet, it formats the Part you are looking at, and no other.
Code that can’t be read, such as a missing bracket, is left as it is. The Format button then says Fix the syntax first.

Format before running JSpark+

In JSpark+, Settings → Editor → Format before running formats your code each time you press Run or open the Timeline. It does not format while Run as you type runs your code. It is on at first.

Code that can’t be formatted runs as it is. In JSpark, the setting stays off, and Format Code works as above.

Tailwind suggestions JSpark+

In JSpark+, when the Snippet’s style uses Tailwind, the list inside class="…" or className="…" offers Tailwind’s class names. The pane beside it shows the CSS each class makes. In JSpark, there are no Tailwind suggestions, and Tailwind styles still work. See Tailwind CSS.

Good to know

A long line runs on and the editor scrolls sideways. To wrap it onto the next row, turn on Settings → Editor → Wrap long lines.
Brackets and quotes close themselves as you type the opening one.
While the Timeline is open, the editor is read-only.

The pictures show JSpark on a Mac. On Windows, the window looks a little different and uses Ctrl for ⌘, but everything works the same way.