|
2 | 2 |
|
3 | 3 | ## What's in the folder |
4 | 4 |
|
5 | | -* This folder contains all of the files necessary for your extension. |
6 | | -* `package.json` - this is the manifest file in which you declare your extension and command. |
7 | | - * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. |
8 | | -* `src/extension.ts` - this is the main file where you will provide the implementation of your command. |
9 | | - * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. |
10 | | - * We pass the function containing the implementation of the command as the second parameter to `registerCommand`. |
| 5 | +- This folder contains all of the files necessary for your extension. |
| 6 | +- `package.json` - this is the manifest file in which you declare your extension and command. |
| 7 | + - The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. |
| 8 | +- `src/extension.ts` - this is the main file where you will provide the implementation of your command. |
| 9 | + - The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. |
| 10 | + - We pass the function containing the implementation of the command as the second parameter to `registerCommand`. |
11 | 11 |
|
12 | 12 | ## Get up and running straight away |
13 | 13 |
|
14 | | -* Press `F5` to open a new window with your extension loaded. |
15 | | -* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. |
16 | | -* Set breakpoints in your code inside `src/extension.ts` to debug your extension. |
17 | | -* Find output from your extension in the debug console. |
| 14 | +- Press `F5` to open a new window with your extension loaded. |
| 15 | +- Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. |
| 16 | +- Set breakpoints in your code inside `src/extension.ts` to debug your extension. |
| 17 | +- Find output from your extension in the debug console. |
18 | 18 |
|
19 | 19 | ## Make changes |
20 | 20 |
|
21 | | -* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`. |
22 | | -* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. |
| 21 | +- You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`. |
| 22 | +- You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. |
23 | 23 |
|
24 | 24 | ## Explore the API |
25 | 25 |
|
26 | | -* You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`. |
| 26 | +- You can open the full set of our API when you open the file `node_modules/vscode/vscode.d.ts`. |
27 | 27 |
|
28 | 28 | ## Run tests |
29 | 29 |
|
30 | | -* Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`. |
31 | | -* Press `F5` to run the tests in a new window with your extension loaded. |
32 | | -* See the output of the test result in the debug console. |
33 | | -* Make changes to `test/extension.test.ts` or create new test files inside the `test` folder. |
34 | | - * By convention, the test runner will only consider files matching the name pattern `**.test.ts`. |
35 | | - * You can create folders inside the `test` folder to structure your tests any way you want. |
| 30 | +- Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`. |
| 31 | +- Press `F5` to run the tests in a new window with your extension loaded. |
| 32 | +- See the output of the test result in the debug console. |
| 33 | +- Make changes to `test/extension.test.ts` or create new test files inside the `test` folder. |
| 34 | + - By convention, the test runner will only consider files matching the name pattern `**.test.ts`. |
| 35 | + - You can create folders inside the `test` folder to structure your tests any way you want. |
36 | 36 |
|
37 | 37 | ## Go further |
38 | 38 |
|
39 | | -* Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/testing-extension). |
40 | | -* [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VSCode extension marketplace. |
41 | | -* Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration). |
| 39 | +- Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/testing-extension). |
| 40 | +- [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VSCode extension marketplace. |
| 41 | +- Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration). |
42 | 42 |
|
43 | 43 | ## Local Development |
44 | 44 |
|
45 | 45 | ### Prerequisites |
46 | 46 |
|
47 | | -* Node.js 14+ installed |
48 | | -* VS Code installed |
49 | | -* Overmind project for testing |
| 47 | +- Node.js 14+ installed |
| 48 | +- VS Code installed |
| 49 | +- Overmind project for testing |
50 | 50 |
|
51 | 51 | ### Setup for Local Development |
52 | 52 |
|
53 | 53 | 1. First, build the DevTools client: |
54 | 54 |
|
55 | | - ```bash |
56 | | - # Navigate to the client package |
57 | | - cd packages/overmind-devtools-client |
| 55 | + ```bash |
| 56 | + # Navigate to the client package |
| 57 | + cd packages/overmind-devtools-client |
58 | 58 |
|
59 | | - # Build the client |
60 | | - npm run build |
61 | | - ``` |
| 59 | + # Build the client |
| 60 | + npm run build |
| 61 | + ``` |
62 | 62 |
|
63 | 63 | 2. Build the VSCode extension: |
64 | 64 |
|
65 | | - ```bash |
66 | | - # Navigate to the extension directory |
67 | | - cd ../overmind-devtools-vscode |
| 65 | + ```bash |
| 66 | + # Navigate to the extension directory |
| 67 | + cd ../overmind-devtools-vscode |
68 | 68 |
|
69 | | - # Build the extension |
70 | | - npm run build |
71 | | - npm run compile |
72 | | - ``` |
| 69 | + # Build the extension |
| 70 | + npm run build |
| 71 | + npm run compile |
| 72 | + ``` |
73 | 73 |
|
74 | 74 | ### Running the Extension Locally |
75 | 75 |
|
76 | 76 | 1. Open the extension in VS Code: |
77 | 77 |
|
78 | | - ```bash |
79 | | - # Open VSCode in this directory |
80 | | - code . |
81 | | - ``` |
| 78 | + ```bash |
| 79 | + # Open VSCode in this directory |
| 80 | + code . |
| 81 | + ``` |
82 | 82 |
|
83 | 83 | 2. Open `extension.ts` in the editor and press `F5` to start debugging |
84 | | - * Select `VS Code Extension Development` if prompted |
85 | | - * This will open a new VS Code window with the extension loaded |
| 84 | + |
| 85 | + - Select `VS Code Extension Development` if prompted |
| 86 | + - This will open a new VS Code window with the extension loaded |
86 | 87 |
|
87 | 88 | 3. In the Extension Development Host window: |
88 | | - * Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on macOS) |
89 | | - * Type and select `Overmind: Start DevTools` |
| 89 | + |
| 90 | + - Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on macOS) |
| 91 | + - Type and select `Overmind: Start DevTools` |
90 | 92 |
|
91 | 93 | 4. The Overmind DevTools should appear in a new tab within VS Code |
92 | 94 |
|
|
95 | 97 | 1. Open an Overmind project in VS Code |
96 | 98 | 2. Update your Overmind initialization to connect to the extension: |
97 | 99 |
|
98 | | - ```js |
99 | | - const overmind = createOvermind(config, { |
100 | | - devtools: true // Will connect to default port 3031 |
101 | | - }) |
102 | | - ``` |
| 100 | + ```js |
| 101 | + const overmind = createOvermind(config, { |
| 102 | + devtools: true // Will connect to default port 3031 |
| 103 | + }) |
| 104 | + ``` |
103 | 105 |
|
104 | 106 | 3. Run your application and it should connect to the DevTools |
105 | 107 |
|
106 | 108 | ### Debugging Tips |
107 | 109 |
|
108 | | -* You can set breakpoints in your extension code |
109 | | -* Check the Debug Console for logs |
110 | | -* To reload the extension, press `Ctrl+R` (or `Cmd+R` on macOS) in the Extension Development Host |
111 | | -* Check the Output panel (select "Overmind DevTools" from the dropdown) for extension logs |
| 110 | +- You can set breakpoints in your extension code |
| 111 | +- Check the Debug Console for logs |
| 112 | +- To reload the extension, press `Ctrl+R` (or `Cmd+R` on macOS) in the Extension Development Host |
| 113 | +- Check the Output panel (select "Overmind DevTools" from the dropdown) for extension logs |
112 | 114 |
|
113 | 115 | ### Packaging the Extension |
114 | 116 |
|
|
0 commit comments