microsoft/qdk
Publicmirrored from https://github.com/microsoft/qdkAvailable
source/vscode/src/webview/help.tsx
80lines · modecode
| 1 | // Copyright (c) Microsoft Corporation. |
| 2 | // Licensed under the MIT License. |
| 3 | |
| 4 | import { useEffect, useRef } from "preact/hooks"; |
| 5 | |
| 6 | declare const resourcesUri: string; // Set by the HTML in the window |
| 7 | |
| 8 | let svgPromise: Promise<Response>; |
| 9 | |
| 10 | export function HelpPage() { |
| 11 | // Need to load the SVG resource async and put it into the div. |
| 12 | // You can't use an img tag for the SVG, as parent styles don't apply. |
| 13 | const svgRef = useRef<HTMLDivElement>(null); |
| 14 | |
| 15 | // Ensure that the fetch is kicked off once for the module |
| 16 | if (!svgPromise) { |
| 17 | svgPromise = fetch(`${resourcesUri}/DebugDropDown.svg`); |
| 18 | } |
| 19 | |
| 20 | useEffect(() => { |
| 21 | // Once render is complete, load the SVG (when ready) into the div |
| 22 | svgPromise |
| 23 | .then((response) => response.text()) |
| 24 | .then((text) => { |
| 25 | if (svgRef.current) { |
| 26 | svgRef.current.innerHTML = text; |
| 27 | } |
| 28 | }); |
| 29 | }); |
| 30 | |
| 31 | return ( |
| 32 | <div class="qs-help"> |
| 33 | <h1>Azure Quantum Development Kit</h1> |
| 34 | <h2>Overview</h2> |
| 35 | <p> |
| 36 | Welcome to the Azure Quantum Development Kit. Below you will find a |
| 37 | quick overview of some of the features it enables in Visual Studio Code. |
| 38 | </p> |
| 39 | <h2>Powerful Q# editing</h2> |
| 40 | <p> |
| 41 | The Q# language is designed for maximum expressivity and productivity |
| 42 | when writing quantum code. Its type system allows for rich editor |
| 43 | features such as completion lists, signature help, go to definition, |
| 44 | find all references, renaming of functions and variables, and more. |
| 45 | </p> |
| 46 | <h2>Quantum simulation</h2> |
| 47 | <div style="float: right; width: 200px; margin: 6px" ref={svgRef}></div> |
| 48 | <p> |
| 49 | The built-in quantum simulator enables you to run your Q# code directly |
| 50 | in VS Code. Use the 'Play' icon at the top right of the editor, (or the |
| 51 | Ctrl+F5 keyboard shortcut), and the output from the simulator will |
| 52 | appear in the Debug Console of Visual Studio Code. Use the "Q#: Show |
| 53 | histogram" command to run a number of shots and display the results as a |
| 54 | histogram. |
| 55 | </p> |
| 56 | <h2>Debugging Q# code</h2> |
| 57 | <p> |
| 58 | The quantum simulator also supports debugging. Using the 'Play' icon |
| 59 | drop-down at the top right of the editor select "Debug Q# file", (or use |
| 60 | the F5 keyboard shortcut). You can set breakpoint and step through code, |
| 61 | viewing both the classical and quantum state. |
| 62 | </p> |
| 63 | <h2>Run jobs on real quantum hardware</h2> |
| 64 | <p> |
| 65 | If you have an Azure subscription, you can connect to your Azure Quantum |
| 66 | workspace and run your Q# programs directly on real quantum machines |
| 67 | using the 'Quantum Workspaces' view in the Explorer sidebar. |
| 68 | </p> |
| 69 | <h2>Learn more</h2> |
| 70 | <p> |
| 71 | You can find out more about the latest features in the Azure Quantum |
| 72 | Development Kit by visiting |
| 73 | <a href="https://aka.ms/AQ/Documentation"> |
| 74 | https://aka.ms/AQ/Documentation. |
| 75 | </a> |
| 76 | . Happy coding! |
| 77 | </p> |
| 78 | </div> |
| 79 | ); |
| 80 | } |
| 81 | |