DOCSEARCHbyAlgolia
Submit Docs

Quokka.js

website·Indexed 34 days ago

https://quokkajs.com/docs/

A fast, real-time JavaScript and TypeScript runner and test runner that provides instant feedback directly in the editor. It supports VS Code, JetBrains editors, and Sublime Text, featuring tools like Time Machine, CPU Profiler, Logpoints, and support for runtimes such as node.js v21.x and vite-node.

Tokens
23.4K
Snippets
84
Records
259
Agent score
70%

What's inside Quokka

  1. Overview of Quokka.js features

    Quokka.js is a rapid prototyping tool for JavaScript and TypeScript that runs code in real-time within VS Code, WebStorm, or Sublime Text. It eliminates the need for manual execution or context switching to a browser console by displaying runtime values, console logs, and error messages inline as you type. Key capabilities include:

    • Live Execution: Code runs on unsaved changes with results displayed inline.
    • Live Coverage: Gutter indicators show which lines are executed or missed in real-time.
    • Project Integration: Ability to import and run files/modules from an existing project, with automatic updates when dependent files change.
    • Quick Package Install: Install node packages directly from the editor for a specific session or the entire project.

  2. Use Dingo VS Code extension to open git repos and npm source code

    The Dingo VS Code extension allows developers to download, install, and open git repositories and the source code for npm packages directly within the VS Code editor. The extension is free and open-source under the MIT license.

  3. Manage Quokka.js configuration precedence

    Quokka.js supports four configuration sources. Settings are applied in the following order of precedence (highest to lowest), where higher precedence overrides lower precedence:

    1. Inline code: Applied only to the specific file.
    2. .quokka file: Applied to all files in the project context.
    3. package.json: Applied to all files in the project context.
    4. Global config file: Applied to all Quokka files globally.

    Note: If you change any settings, you must restart your Quokka files for the changes to take effect.

  4. Use Live Code Coverage in Quokka.js Pro

    Live Code Coverage provides real-time indicators in the editor gutter to show which lines of code are fully covered, partially covered, or not covered. This allows developers to quickly identify the source of errors and gaps in test coverage. This feature is supported in VS Code, IntelliJ platform, and Sublime Text.

  5. Use Quokka Code Story Viewer to inspect code execution

    The Code Story Viewer is a VS Code-exclusive Pro feature that allows developers to inspect code execution in a single continuous view, reducing the context switching typically associated with traditional debuggers. It is fully integrated with Quokka's Time Machine, enabling users to select variables or expressions within the view to see their runtime values.

  6. Use Code Story Viewer in Quokka.js Pro

    The Code Story Viewer allows developers to inspect the code Quokka is executing in a single continuous view. By selecting a variable or expression, you can see its runtime value, which reduces context switching and accelerates the understanding of code execution flow.

  7. Use Wallaby.js for continuous test-driven development

    Wallaby.js is a test runner designed for projects with existing tests. It provides instant feedback by running JavaScript and TypeScript tests (supporting frameworks like Jest, Vitest, Mocha, and Jasmine) as you type. It integrates test results, code coverage, and error details directly into the editor and includes advanced features like Time Travel Debugging.

  8. Manage Quokka.js configuration precedence

    Quokka.js supports four configuration sources. Settings are applied in the following order of precedence (highest to lowest), where higher precedence overrides lower precedence:

    1. Inline config: Defined within the Quokka file itself; applies only to that specific file.
    2. .quokka file: A JSON file in the project root; applies to all files in the project.
    3. package.json: A quokka property in the project's package.json; applies to all files in the project.
    4. Global config file: A config.json file located in the user's home directory; applies to all Quokka files globally.

    Note: If you change any of these settings, you must restart your Quokka files for the changes to take effect.

  9. Use Console Ninja for integrated application logging

    Console Ninja displays console.log output and runtime errors from a running browser or Node.js application directly in the editor. This eliminates the need to switch between the editor and browser dev tools or terminal. It is specifically designed for apps running in dev mode with HMR or live-reloading.

  10. Understand Quokka JS output highlighting for logged values

    Quokka JS provides syntax highlighting for logged values in the Output pane to improve readability of large objects and arrays. The output recognizes and applies distinct highlighting for built-in types, including strings, numbers, objects, and arrays. Additionally, the number of hidden characters in the output is minimized to simplify the process of selecting and copying text from the output pane.

  11. Understand the Quokka.js execution pipeline

    Quokka.js runs code using Node.js regardless of project type. The execution pipeline follows these steps:

    1. Transpilation (if Babel or TypeScript is configured).
    2. Code adjustment to enable special features (Live Feedback, Live Code Coverage, Value Explorer).
    3. Execution of configured Quokka Plugins.
    4. Execution of the current file as the program entry-point.
    5. Handling imports: Project files are transpiled (Step 1), while external dependencies are not.

  12. Analyze performance with the Quokka.js CPU Profiler

    The CPU Profiler records the CPU usage profile of executing code to analyze runtime performance. It provides links to project files that open directly in the editor when clicked. This feature is supported in VS Code, IntelliJ platform, and Sublime Text.