Cara menggunakan can javascript handle files?

Quokka.js is a rapid prototyping playground in your editor, with access to your project’s files, inline reporting, code coverage and rich output formatting. Runtime values are updated and displayed in your IDE next to your code, as you type.

Quokka ‘Community’ edition is free for everyone. We also offer a commercial Quokka ‘Pro’ edition that provides a number of additional advanced features (marked with ‘Pro’ label in the docs below).

Quokka.js is brought to you by the Wallaby.js team and is built on top of the same technology used in the Wallaby.js Core. If you like what you see in Quokka.js and would like the same live features for your unit tests and all files of your project, and a lot more, then definitely check out Wallaby.js.

Getting started

To get started with Quokka.js in VS Code, install the extension first by clicking on the Extensions icon in the Activity Bar on the side of VS Code and searching for Quokka. Note that Quokka requires VS Code version 1.10.0 or higher.

To get started with Quokka.js in JetBrains IDE, install the plugin first by using Settings - Plugins and searching for Quokka.

To get started with Quokka.js in Sublime Text, install the package first by using Package Control: Install Package and searching for Quokka.

Once the extension is installed, press

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

Once the extension is installed, press

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

Once the extension is installed, press

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

Now you are ready to go, just start typing some code in your editor and see what happens next.

Live Feedback

You may create a new Quokka file, or start Quokka on an existing file. The results of the execution are displayed right in the editor. To see the full execution output, you may view the Quokka Console by invoking the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

You may create a new Quokka file, or start Quokka on an existing file. The results of the execution are displayed right in the editor. To see the full execution output, you may view the Quokka Console by invoking the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

You may create a new Quokka file, or start Quokka on an existing file by using the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

If you create a new Quokka scratch file and want to save it, then you may press

{
    "installPackageCommand": "yarn add {packageName}"
}

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

It is recommended that you memorize a couple of Quokka keyboard shortcuts (you may see them when using the editor’s command palette). This will make working with Quokka much faster.

To open a new Quokka file use

{
    "installPackageCommand": "yarn add {packageName}"
}

{
    "installPackageCommand": "yarn add {packageName}"
}

{
    "installPackageCommand": "yarn add {packageName}"
}

Live Logging/Compare

You may use

{
    "installPackageCommand": "yarn add {packageName}"
}

Note that when using identifier expressions for logging (for example, typing

{
    "installPackageCommand": "yarn add {packageName}"
}

{
    "installPackageCommand": "yarn add {packageName}"
}

{
    "installPackageCommand": "yarn add {packageName}"
}

Please also note that Boolean, Number and Function data types are not supported when use sequence expressions to compare objects (e.g.

{
    "installPackageCommand": "yarn add {packageName}"
}

Live Code Coverage

Once Quokka.js is running, you can see the code coverage in the gutter of your editor. The coverage is live, so you can start changing your code and the coverage will automatically be updated, just as you type.

As you may see, there are various colored squares displayed for each line of your source code.

• Gray squares mean that the source line has not been executed.
• Green squares mean that the source line has been executed.
• Yellow squares mean that the source line has only been partially executed. Quokka supports branch code coverage level, so if a line contains a logical expression or a ternary operator with both covered and uncovered branches, it will be displayed with yellow gutter indicator.
• Red squares mean that the source line is the source of an error, or is in the stack of an error.

Value Explorer

Value Explorer allows you to inspect everything that is logged in Quokka with

{
    "installPackageCommand": "yarn add {packageName}"
}

Expression paths and values can be copied using the tree node’s context menu.

Note that while Value Explorer is available for both Community and Pro editions, in Community edition only 2 levels of the explorer’s tree can be expanded.

Auto-Expand Value Explorer Objects

Identifier Expressions and Live Comments can be provided with an additional hint to automatically expand objects when they are logged to Value Explorer. Inserting the special comment

a() //?. $

Use this feature with small- to medium-sized objects when you want to expand all properties in Value Explorer. Having the properties expanded also helps when using the ‘Copy Data’ action on the Value Explorer tree node, because it only copies expanded properties’ data.

Note that automatically expanded objects have the following limitations:

• Cyclic Depedencies are not automatically expanded
• Functions are not automatically expanded
• Strings beyond 8192 characters are not automatically expanded
• Only the first 100 properties on a single object will be expanded
• Only the first 100 elements of an array will be expanded
• Only the first 10 levels of nested properties will be expanded
• Only the first 5000 properties across all objects will be expanded

Time Machine

Quokka’s Time Machine allows you to move forward and backwards through your code, jump or auto-play to a specific line of code, view runtime values and step into, over and out of your code. In addition to Quokka Community time machine features, Quokka PRO edition also allows you to edit your code without stopping the time machine and continue to explore your code’s execution path.

Once Quokka has started on a file, the time machine is available at any time. It can be started via a command or by using code lens in Quokka output.

a() //?. $

a() //?. $

a() //?. $

a() //?. $

a() //?. $

Time machine Actions

Time machine actions are available from from the file header actions and Quokka output header code lens, as well as via keyboard shortcuts.

Inspecting Runtime Values

Inspecting runtime values during time-travel sessions is quick and easy. All you need to do is select the object, object property, parameter, expression or variable that you want to view. When you do this, Quokka will display the value that you selected. If your selection is invalid (e.g. you only selected part of a variable) then no output will be displayed. For nested expressions statements (e.g.

{
    ...

    "quokka.colors": {
        "covered": "#62b455",
        "errorPath": "#ffa0a0",
        "errorSource": "#fe536a",
        "notCovered": "#cccccc",
        "partiallyCovered": "#d2a032"
    }
}

Note that your selection must be either on the current step or a previous step for the value to be displayed.

In addition to displaying selected expression values beside your code, selected expressions are also available in in an easy-to-navigate, real-time tree view. Nested properties can be expanded to any depth, and values/paths may be copied to the clipboard.

Edit-and-continue

Quokka PRO edition allows you to edit your code without stopping the time machine and continue to explore the code’s execution path.

Code Story Viewer

Quokka’s Code Story Viewer provides a unique and highly efficient way of inspecting what your code is doing in a single continuous view. The viewer is fully integrated with Quokka’s Time Machine, which means you can simply select a variable or expression to see its runtime value. Seeing the executed code displayed in a single continuous view really cuts down on context switching that you may experience in a traditional debugger experience while trying to understand the execution of your code.

Once Quokka has started on a file, the Code Story can be launched using the Quokka2 command. The Quokka2 command will start also Quokka’s Time Machine if it is not already started. The Code Story can also be launched using the Quokka2 code lens in the Quokka output header code lens after starting the Time Machine. Quokka’s are also fully available when a Code Story is displayed.

Codeclip

Quokka’s Quokka5 feature allows you to share code that you run with Quokka, as well as its output and recording. Check out our example at Codeclip.io.

Once Quokka has been started on a file, your code can be shared using the Quokka5 command. Code can also be shared using the Quokka5 CodeLens link in the header of Quokka’s Output window. Running this command will upload your code and a recording of its execution and output to Codeclip.io. After upload, you have a chance to review it and change some settings before publishing. Once you publish your clip, you can share the URL with the world.

Recent Files

The list of all recently launched Quokka files (both physical and scratch files) can be viewed by using the Quokka8 command. This view displays the contents of the files (search with Quokka9), the date the file was last run, and provides the following actions:

• Run the file within the context of the currently opened project.
• Clone and Run action runs the file as a new scratch file within the context of the currently opened project. The cloned file will be displayed separately from the original scratch file in the recent files view.
• Run in [project_root] action runs the file within the context of the project where it was last ran.
• Clone and Run in [project_root] action runs the file as a new scratch file within the context of the project where it was last ran. The cloned file will be displayed separately from the original scratch file in the recent files view.
• Remove from recent files action removes the entry from the list of recent files. Physical file content is not affected.

VS Code Live Share Integration

When Microsoft’s VS Code plugin for Live Share is installed alongside Quokka, Quokka provides software developers with the ability to interactively collaborate on the same code at the same time. This feature adds a new dimension to real-time instructor-led training as well as interactive prototyping/debugging and works best when guests and host use Live Share’s Settings - Plugins0 command.

How does it work?

When the host and client both have Quokka plugin installed during a Live Share collaboration, when code changes are made and Quokka is running, Quokka will execute the code changes on the host and immediately send the display values to all collaboration participants. Before sharing the Quokka session with clients, the host will be prompted to either Settings - Plugins1 or Settings - Plugins2 sharing Quokka with the Live Share collaboration.

Members of the Live Share collaboration see the same Quokka display values when they are visible to the host. If the Live Share session is configured to be read-only, only the host can edit code but collaborators will see all of the Quokka execution results. If the Live Share session is editable by other collaborators, as non-host code edits are made, Quokka will evaluate the changes on the host and send the execution results to all collaborators.

Interactive Examples

The Wallaby.js team curates a set of interactive examples that may be launched from within VS Code using the Settings - Plugins3 command. These examples are useful for both experienced developers (as references) and for new developers (to learn).

Live Comments

While

{
    "installPackageCommand": "yarn add {packageName}"
}

The most powerful way to log any expression is to use a special comment right after the expression you want to log.

Inserting the special comment Settings - Plugins8 after an expression (or just Settings - Plugins9 after a statement) will log just the value of that expression.

For example,

a.b()/*?*/.c().d()

will output the result of Quokka0 expression, and

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

will output the result of the full Settings - Plugins5 expression.

You may also write any JavaScript code right in the comment to shape the output. The code has the access to the Quokka2 variable which is the expression that the comment is appended to. The executed code is within a closure, so it also has the access to any objects that you may access from within the current lexical environment.

Note that there’s no constraints in terms of what the comment code can do. For example, the watch comment below is incrementing Quokka3 value, and returning Quokka2, which points to the expression that the comment is appended to (Quokka5).

Also, unlike console logging, the special comment logging has some built-in smarts. For example, when you place the comment after an expression that is a promise, the resolved value of the promise is logged. Similarly, if an expression is an observable, then its values are displayed. So you don’t need to insert a Quokka6 function to just inspect the resolved value of the promise or a Quokka7/Quokka8 function to inspect the observable values.

Live comment snippet

To save some time on typing the comment when you need it, you may with a custom keybinding.

To save some time on typing the comment when you need it, you may create a live template.

To save some time on typing the comment when you need it, you may create code snippets.

Live Value Display

While the feature provides an excellent way to log expression values and will keep displaying values when you change your code, sometimes you may want to display or capture expression values without modifying code. The

a() //?. $

Show Value

If you want to quickly display some expression value, but without modifying your code, you may do it by simply selecting an expression in an editor.

If you want to quickly display some expression value, but without modifying your code, you may do it by simply selecting an expression in an editor.

Copy Value

If you want to copy an expression value to your clipboard without modifying your code, Live Value Display allows you to do it with a special command (Package Control: Install Package0 command, or with the Package Control: Install Package3 keyboard shortcut).

If you want to copy an expression value to your clipboard without modifying your code, Live Value Display allows you to do it with a special intention action (Package Control: Install Package4 & select the Package Control: Install Package0 action).

Show Line Value(s)

If you want to output the values of multiple lines, you may use the Package Control: Install Package6 command. This command will output the same as

a() //?. $

If you want to output the values of multiple lines, you may use the Package Control: Install Package6 intention action. This action will output the same as

a() //?. $

Show Line Timing(s)

If you want to output the execution time of a line, you may use the Quokka0 command. This command will output the same as if you had used the Quokka1 comment for the selected line(s).

If you want to output the execution time of a line, you may use the Quokka0 intention action. This action will output the same as if you had used the Quokka1 comment for the selected line(s).

Toggle Auto Log

If you want Quokka to show the runtime values for every single line of your code then you may use the Quokka4 commandintention action. By default, Quokka will start with Quokka5 disabled, but this can be changed with .

This feature is useful in scenarios such as when you are live coding and have intermediate results that you want to be displayed as you type.

Sticky Values

Live Values are sticky which means that they survive your file changes while being updated as you type.

You may press Quokka6 to quickly clear a value or Quokka7 to clear all values in a file, which are the default keyboard shortcuts for Quokka8 and Quokka9 commands accordingly.

You may press Quokka6 to clear a value or Quokka7 to clear all values in a file. In addition to the keyboard shortcuts there are also

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

Live Value Display feature may be adjusted to different workflows by changing and settings.

Project Files Import

Quokka ‘Community’ edition allows you to import any locally installed node modules to a Quokka file. In addition to that, Quokka ‘Pro’ edition also allows to import any files from your project:

• with or compilation if required;
• Quokka will also watch project files for changes and automatically update when dependent files change.

Quokka also resolves imported modules with non-relative names when using

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

CPU Profiler

Quokka’s CPU Profiler allows you to quickly record the of your code to analyze its runtime performance.

To record and view the CPU profile, you may use the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

Before the profile is displayed, you may choose where to display it: in Quokka Chrome Dev Tools or directly in VS Code.

If you select to open the CPU profile in VS Code, then it will be displayed with VS Code’s built-in CPU profile table extension (and optional ).

You may use the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

16 tab to view which functions cause the most work, or the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

17 tab to view which functions directly took up the most time in aggregate.

In all the views

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

18 represents the time directly spent in that function.

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

19 represents the time spent in that function or any of its children. You may click

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

18,

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

19, or

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

22 to sort the table by that column.

Quick Package Install

This feature allows you to quickly install any node package, via

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

23 or

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

24, without switching away from your editor, and without even having to type the package name (there is enough information in your code already). The package may be installed just for the active Quokka session, so that when you are just playing with things, your

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

25 folder is not trashed. Having said that, you may also target the project’s

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

25, if you want to do it.

You may install missing packages via intention actions (Package Control: Install Package4), or via the links in the Quokka output.

You may install missing packages by using the hover message, or with the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

28 keyboard shortcut (whenever there’s a missing package), via command palette (

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

29 commands), or via the links in the Quokka output.

By default Quokka uses the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

30 command. You may change it to

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

31 by setting the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

32 value in your Quokka config:

{
    "installPackageCommand": "yarn add {packageName}"
}

Live Performance Testing

The feature allows to quickly see how various parts of your code perform. It can be very helpful for identifying possible bottlenecks in your app and for doing the performance optimization, or just for experimenting to see how different things perform.

Inserting the special comment

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

33 after any expression will report how much time it took to execute the expression.

Adding the comment to an expression that gets executed multiple times, for example inside a loop, will make the tool to display total execution time, average execution time (total execution time divided by number of times the expression had been executed), minimum and maximum execution time.

You may also use the execution time reporting comment and add to it any expression that you may use in live comments to display both an expression execution time and execution result.

For example,

a() //?. $

displays

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

34 execution time and result.

Run on Save/Run Once

Choose how and when Quokka should run on your files. In addition to the community edition’s Automatic mode, you can start Quokka and only Run on Save or tell Quokka to start and just Run Once. This feature is helpful for using Quokka to run slow-running scripts, or scripts with side-effects.

The Run on Save and Run Once actions are available along-side other Quokka commands, in your IDE’s list of commands. If you use these commands often, you can improve your productivity by adding key-bindings.

Runtime

By default, Quokka.js uses your system’s node.js to run your code. You also may configure Quokka to use , if you are using

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

35 for example.

Quokka uses

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

36 module for JavaScript files, allowing ES imports and top level await to be used with zero configuration.

Browser-like Runtime

To simulate a browser environment, Quokka supports jsdom. The

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

37 package must be installed and available from your project as well adding as .

Vite-node Runtime

For projects using Vite, Quokka uses

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

38 to run your JavaScript/TypeScript code in node.js using Vite’s resolvers and transformers. To use Quokka with

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

38, The

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

38 package must be installed in your project; Quokka will automatically detect and use

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

38 once it is installed.

Configuration

Quokka.js does not need any configuration by default. It will run your code using your system’s node.js. It may also run your TypeScript code without any configuration.

If you would like to use Babel/React JSX or override your

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

04 settings, then you may configure Quokka.js.

If you are using VS Code, you can override our editor display settings with VS Code User Setting overrides. You can view the overridable settings in the VS Code Settings editor under Settings -> Extensions -> Quokka.

You may override the coverage indicator colors in VS Code’s user settings (

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

43 file). The snippet below shows the config with Quokka’s default colors.

{
    ...

    "quokka.colors": {
        "covered": "#62b455",
        "errorPath": "#ffa0a0",
        "errorSource": "#fe536a",
        "notCovered": "#cccccc",
        "partiallyCovered": "#d2a032"
    }
}

If you are using VS Code, you may change your Quokka console output to

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

44 mode by updating your VS Code setting

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

45 to

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

46.

If you are using VS Code, you may configure Quokka to automatically start on a file if it was running when the file was last closed by updating your VS Code setting

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

47 to

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

46. Please note that this setting is ignored if your file is opened using Run on Save or Run Once.

If you are using VS Code, you may configure Quokka to start automatically if your file matches a regular expression by updating your VS Code setting

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

49. For example, to have Quokka start automatically on all files that end with

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

50, you would update the setting to

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

51.

If you are using VS Code, then by default, your license and settings will automatically be synchronized between VS Code remoting instances, and between other machines when

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

52 is enabled. This can be disabled by setting the VS Code setting

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

53 to

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

54.

Plugins

Quokka.js provides a plugin model that may be configured by using . Quokka’s plugin model allows you to specify a file or a node module with code to execute at various stages of Quokka.js’ code execution pipeline. You may find more information about how to write a Quokka plugin in the Extensibility docs section.

Monorepos / Nested packages

Quokka supports running from root-level monorepos and projects with nested packages. If you start Quokka on an existing file within a nested package, then Quokka will automatically run in the context of the nested package. In this case, the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

56 directory will be the nested package directory containing the

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

57 file for the existing file.

Examples

Because Quokka.js runs your code using

a.b().c().d() /*?*/
// or just
a.b().c().d() //?

58, sometimes a little more configuration may be required to match your project’s runtime configuration. If the examples below aren’t relevant for your project, search our support repository for an existing configuration.