Skip to content

Commit be566b3

Browse files
PrincesseuhPrincesseuh
authored
ci: release workflow for VS Code extension (#14695)
* ci: release workflow for VS Code extension * fix: knip * fix: oops
1 parent 5fe3c27 commit be566b3

6 files changed

Lines changed: 869 additions & 1 deletion

File tree

‎.github/workflows/release.yml‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,38 @@ jobs:
5959
# Use OIDC for npm authentication instead of NPM_TOKEN
6060
NPM_TOKEN: '' # https://github.com/changesets/changesets/issues/1152#issuecomment-3190884868
6161

62+
- name: Check if astro-vscode was published
63+
id: vscode-published
64+
if: steps.changesets.outputs.published == 'true'
65+
run: |
66+
if echo '${{ steps.changesets.outputs.publishedPackages }}' | jq -e '.[] | select(.name == "astro-vscode")' > /dev/null; then
67+
echo "published=true" >> $GITHUB_OUTPUT
68+
else
69+
echo "published=false" >> $GITHUB_OUTPUT
70+
fi
71+
72+
- name: Prepare vscode folder
73+
if: steps.vscode-published.outputs.published == 'true'
74+
working-directory: ./packages/language-tools/vscode
75+
run: |
76+
sleep 60s # wait for npm registry to update
77+
rm -rf node_modules
78+
npm i --workspaces=false # vsce does not support pnpm, so we need to pretend this is not a monorepo and use npm
79+
npm run build
80+
npm run build:grammar
81+
82+
- name: Publish to VSCode Marketplace
83+
if: steps.vscode-published.outputs.published == 'true'
84+
working-directory: ./packages/language-tools/vscode
85+
run: |
86+
npx vsce publish -p ${{ secrets.VSCE_TOKEN }} --target win32-x64 win32-arm64 linux-x64 linux-arm64 linux-armhf darwin-x64 darwin-arm64 alpine-x64 alpine-arm64
87+
88+
- name: Publish to OpenVSX
89+
if: steps.vscode-published.outputs.published == 'true'
90+
working-directory: ./packages/language-tools/vscode
91+
run: |
92+
npx ovsx publish -p ${{ secrets.OVSX_TOKEN }} --target win32-x64 win32-arm64 linux-x64 linux-arm64 linux-armhf darwin-x64 darwin-arm64 alpine-x64 alpine-arm64
93+
6294
- name: Generate Announcement
6395
id: message
6496
if: steps.changesets.outputs.published == 'true'

‎CONTRIBUTING.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@ During the development process, you may want to test your changes to ensure they
7777

7878
Overall, it's up to personal preference which method to use. For smaller changes, using the examples folder may be sufficient. For larger changes, using a separate project may be more appropriate.
7979

80+
#### Contributing to language tooling
81+
82+
For information on contributing to the language tooling (VS Code extension, language server, etc.), see [packages/language-tools/CONTRIBUTING.md](./packages/language-tools/CONTRIBUTING.md).
83+
8084
#### Naming convention and APIs usage
8185

8286
> [!NOTE]

‎knip.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export default {
1717
'@astrojs/check', // Used by the build script but not as a standard module import
1818
],
1919
// In smoke tests, we checkout to the docs repo so those binaries are not present in this project
20-
ignoreBinaries: ['docgen', 'docgen:errors', 'playwright'],
20+
// vsce and ovsx are only used in CI for publishing, and due to how we have to publish the VS Code extension have
21+
// to be installed in the vscode package, but knip is expecting them to be in the root node_modules
22+
ignoreBinaries: ['docgen', 'docgen:errors', 'playwright', 'vsce', 'ovsx'],
2123
},
2224
'packages/*': {
2325
entry: [testEntry],

‎packages/language-tools/CONTRIBUTING.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# Contributing
2+
3+
## Setup
4+
5+
All Astro projects use [pnpm](https://pnpm.io/) and [Turbo](https://turborepo.org/) to enable development in a monorepo. Once you've cloned the project install dependencies and do an initial build:
6+
7+
```shell
8+
pnpm install
9+
pnpm build
10+
```
11+
12+
## VS Code extension
13+
14+
### Debugging
15+
16+
During the normal course of development on the VSCode extension you'll want to run the debugger. First run the build in watch mode with:
17+
18+
```shell
19+
pnpm dev
20+
```
21+
22+
> [!NOTE]
23+
> If you haven't ran `pnpm build` or `pnpm dev` already, you may see some errors related to some files being missing. This is normal on a first run, and you can safely ignore these errors.
24+
25+
### Start Debugger
26+
27+
Then in VSCode:
28+
29+
1. Switch to **Run and Debug**.
30+
2. Click **Launch Extension**.
31+
32+
<img width="406" alt="Showing the steps to launching the debugger" src="https://user-images.githubusercontent.com/361671/130799724-aa724b67-9d15-4c79-8ff5-0b90e398e147.png">
33+
34+
This will launch a new window for your editor. Here you can navigate to a test Astro project that you will use to develop your changes.
35+
36+
### Open Debug Console
37+
38+
The Debug console in the main editor is where you will get logging information. When developing in the language server, logging is helpful to figure out what is going on.
39+
40+
1. Ctrl+Shift+P (CMD+Shift+P on OSX) opens the command palette.
41+
2. Select **Debug Console**.
42+
3. At the bottom, switch to **Attach to Server**. This is most of the information you'll want to see.
43+
44+
<img width="1628" alt="Steps to open the command palette" src="https://user-images.githubusercontent.com/361671/130805127-83e3935f-39a3-435d-9116-64eb53e115f4.png">
45+
46+
### Make changes and set breakpoints
47+
48+
Now you can start developing your changes. You can set breakpoints or add `debugger;` statements. To see your changes reflect you'll need to take these steps:
49+
50+
1. In the extension editor window, go to **Run and Debug** if you are not already there.
51+
2. Click on the **Restart** button under **Launch Client**.
52+
53+
This will restart the extension and reload your test window.
54+
55+
<img width="406" alt="Shows how to restart the extension" src="https://user-images.githubusercontent.com/361671/130806011-c36b6b50-d2f1-4ef3-a2da-ca7e9ab2a8fe.png">
56+
57+
### Troubleshooting
58+
59+
### Changes are not picked up
60+
61+
If you have the Extension installed you'll need to turn it off, or your development extension will not be used and you'll be confused why your changes are not working.
62+
63+
1. Click on **Extensions**.
64+
2. Search for _astro_.
65+
3. Click the extension and then click **Disable**.
66+
67+
<img width="1530" alt="Show the steps of disabling the extension" src="https://user-images.githubusercontent.com/361671/130800518-177b2e9f-f2e0-46ff-adac-31ff099b67fe.png">
68+
69+
## TS Plugin
70+
71+
To start development on the TS Plugin, you'll need to first run the following command:
72+
73+
```shell
74+
pnpm dev
75+
```
76+
77+
### Logging
78+
79+
Logs from TypeScript plugins are shown in the TSServer log. To open this log, follow these steps:
80+
81+
1. Ctrl+Shift+P (CMD+Shift+P on OSX) opens the command palette.
82+
2. Select **TypeScript: Open TS Server log**.
83+
84+
If you've never opened the TS Server log before, you'll first need to enable logging and restart the TSServer. The command will prompt you to do this if needed
85+
86+
> Hint: TSServer's logs are really noisy, even at the lowest level. Make sure to disable other plugins when working on the TS Plugin. Alternatively, grepping for "Astro Plugin" can help

‎packages/language-tools/vscode/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,7 @@
262262
"js-yaml": "^4.1.0",
263263
"kleur": "^4.1.5",
264264
"mocha": "^10.2.0",
265+
"ovsx": "^0.10.6",
265266
"vscode-languageclient": "^9.0.1",
266267
"vscode-tmgrammar-test": "^0.1.2"
267268
},

0 commit comments

Comments
 (0)