ci: release workflow for VS Code extension (#14695)

* ci: release workflow for VS Code extension

* fix: knip

* fix: oops

.github/workflows/release.yml

@@ -59,6 +59,38 @@ jobs:
           # Use OIDC for npm authentication instead of NPM_TOKEN
           NPM_TOKEN: '' # https://github.com/changesets/changesets/issues/1152#issuecomment-3190884868
 
+      - name: Check if astro-vscode was published
+        id: vscode-published
+        if: steps.changesets.outputs.published == 'true'
+        run: |
+          if echo '${{ steps.changesets.outputs.publishedPackages }}' | jq -e '.[] | select(.name == "astro-vscode")' > /dev/null; then
+            echo "published=true" >> $GITHUB_OUTPUT
+          else
+            echo "published=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Prepare vscode folder
+        if: steps.vscode-published.outputs.published == 'true'
+        working-directory: ./packages/language-tools/vscode
+        run: |
+          sleep 60s # wait for npm registry to update
+          rm -rf node_modules
+          npm i --workspaces=false # vsce does not support pnpm, so we need to pretend this is not a monorepo and use npm
+          npm run build
+          npm run build:grammar
+
+      - name: Publish to VSCode Marketplace
+        if: steps.vscode-published.outputs.published == 'true'
+        working-directory: ./packages/language-tools/vscode
+        run: |
+          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
+
+      - name: Publish to OpenVSX
+        if: steps.vscode-published.outputs.published == 'true'
+        working-directory: ./packages/language-tools/vscode
+        run: |
+          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
+
       - name: Generate Announcement
         id: message
         if: steps.changesets.outputs.published == 'true'

CONTRIBUTING.md

@@ -77,6 +77,10 @@ During the development process, you may want to test your changes to ensure they
 
 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.
 
+#### Contributing to language tooling
+
+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).
+
 #### Naming convention and APIs usage
 
 > [!NOTE]

knip.js

@@ -17,7 +17,9 @@ export default {
 				'@astrojs/check', // Used by the build script but not as a standard module import
 			],
 			// In smoke tests, we checkout to the docs repo so those binaries are not present in this project
-			ignoreBinaries: ['docgen', 'docgen:errors', 'playwright'],
+			// vsce and ovsx are only used in CI for publishing, and due to how we have to publish the VS Code extension have
+			// to be installed in the vscode package, but knip is expecting them to be in the root node_modules
+			ignoreBinaries: ['docgen', 'docgen:errors', 'playwright', 'vsce', 'ovsx'],
 		},
 		'packages/*': {
 			entry: [testEntry],

packages/language-tools/CONTRIBUTING.md

@@ -0,0 +1,86 @@
+# Contributing
+
+## Setup
+
+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:
+
+```shell
+pnpm install
+pnpm build
+```
+
+## VS Code extension
+
+### Debugging
+
+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:
+
+```shell
+pnpm dev
+```
+
+> [!NOTE]
+> 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.
+
+### Start Debugger
+
+Then in VSCode:
+
+1. Switch to **Run and Debug**.
+2. Click **Launch Extension**.
+
+<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">
+
+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.
+
+### Open Debug Console
+
+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.
+
+1. Ctrl+Shift+P (CMD+Shift+P on OSX) opens the command palette.
+2. Select **Debug Console**.
+3. At the bottom, switch to **Attach to Server**. This is most of the information you'll want to see.
+
+<img width="1628" alt="Steps to open the command palette" src="https://user-images.githubusercontent.com/361671/130805127-83e3935f-39a3-435d-9116-64eb53e115f4.png">
+
+### Make changes and set breakpoints
+
+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:
+
+1. In the extension editor window, go to **Run and Debug** if you are not already there.
+2. Click on the **Restart** button under **Launch Client**.
+
+This will restart the extension and reload your test window.
+
+<img width="406" alt="Shows how to restart the extension" src="https://user-images.githubusercontent.com/361671/130806011-c36b6b50-d2f1-4ef3-a2da-ca7e9ab2a8fe.png">
+
+### Troubleshooting
+
+### Changes are not picked up
+
+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.
+
+1. Click on **Extensions**.
+2. Search for _astro_.
+3. Click the extension and then click **Disable**.
+
+<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">
+
+## TS Plugin
+
+To start development on the TS Plugin, you'll need to first run the following command:
+
+```shell
+pnpm dev
+```
+
+### Logging
+
+Logs from TypeScript plugins are shown in the TSServer log. To open this log, follow these steps:
+
+1. Ctrl+Shift+P (CMD+Shift+P on OSX) opens the command palette.
+2. Select **TypeScript: Open TS Server log**.
+
+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
+
+> 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

@@ -262,6 +262,7 @@
     "js-yaml": "^4.1.0",
     "kleur": "^4.1.5",
     "mocha": "^10.2.0",
+    "ovsx": "^0.10.6",
     "vscode-languageclient": "^9.0.1",
     "vscode-tmgrammar-test": "^0.1.2"
   },