chore: add vscode extension to ftl repo (#1189)

.github/workflows/ci.yml

@@ -114,17 +114,32 @@ jobs:
       - name: Build Cache
         uses: ./.github/actions/build-cache
       - name: Console NPM Install
-        working-directory: frontend
-        run: npm install
-      - name: Console Type Check
-        working-directory: frontend
-        run: tsc
+        run: just npm-install
       - name: Console Lint
         working-directory: frontend
         run: npm run lint
+      - name: Console Build
+        run: just build-frontend
       - name: Console Test
         working-directory: frontend
         run: npm run test
+  extension:
+    name: VSCode Extension
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Init Hermit
+        uses: cashapp/activate-hermit@v1
+      - name: Build Cache
+        uses: ./.github/actions/build-cache
+      - name: VSCode Extension NPM Install
+        run: just npm-install
+      - name: VSCode Extension Lint
+        working-directory: extensions/vscode
+        run: npm run lint
+      - name: VSCode Extension NPM Build
+        run: just build-extension
   integration:
     name: Integration Tests
     if: github.ref == 'refs/heads/main'

.gitignore

@@ -21,4 +21,4 @@ testdata/**/go.work.sum
 buildengine/.gitignore
 go.work*
 junit*.xml
-/readme-tests
+/readme-tests

FTL.code-workspace

@@ -28,6 +28,10 @@
 			"path": "cmd/ftl",
 			"name": "CLI"
 		},
+		{
+			"path": "extensions/vscode",
+			"name": "VSCode Extension"
+		},
 		{
 			"path": "."
 		}
@@ -46,6 +50,7 @@
 			"**/go.work.sum": true,
 			".hermit": true,
 			"**/*.zip": true,
+			"**/*.map": true,
 		}
 	}
 }

Justfile

@@ -10,6 +10,7 @@ TIMESTAMP := `date +%s`
 SCHEMA_OUT := "backend/protos/xyz/block/ftl/v1/schema/schema.proto"
 ZIP_DIRS := "go-runtime/compile/build-template go-runtime/compile/external-module-template go-runtime/scaffolding kotlin-runtime/scaffolding kotlin-runtime/external-module-template"
 FRONTEND_OUT := "frontend/dist/index.html"
+EXTENSION_OUT := "extensions/vscode/dist/extension.js"
 PROTOS_IN := "backend/protos/xyz/block/ftl/v1/schema/schema.proto backend/protos/xyz/block/ftl/v1/console/console.proto backend/protos/xyz/block/ftl/v1/ftl.proto backend/protos/xyz/block/ftl/v1/schema/runtime.proto"
 PROTOS_OUT := "backend/protos/xyz/block/ftl/v1/console/console.pb.go backend/protos/xyz/block/ftl/v1/ftl.pb.go backend/protos/xyz/block/ftl/v1/schema/runtime.pb.go backend/protos/xyz/block/ftl/v1/schema/schema.pb.go frontend/src/protos/xyz/block/ftl/v1/console/console_pb.ts frontend/src/protos/xyz/block/ftl/v1/ftl_pb.ts frontend/src/protos/xyz/block/ftl/v1/schema/runtime_pb.ts frontend/src/protos/xyz/block/ftl/v1/schema/schema_pb.ts"
 
@@ -62,6 +63,16 @@ build-zips: build-kt-runtime
 build-frontend: npm-install
   @mk {{FRONTEND_OUT}} : frontend/src -- "cd frontend && npm run build"
 
+# Rebuild VSCode extension
+build-extension: npm-install
+  @mk {{EXTENSION_OUT}} : extensions/vscode/src -- "cd extensions/vscode && npm run compile" 
+
+package-extension: build-extension
+  @cd extensions/vscode && vsce package
+
+publish-extension: package-extension
+  @cd extensions/vscode && vsce publish
+
 # Build the Kotlin runtime (if necessary)
 build-kt-runtime:
   @mk {{KT_RUNTIME_OUT}} : kotlin-runtime/ftl-runtime -- mvn -f kotlin-runtime/ftl-runtime -Dmaven.test.skip=true -B install
@@ -71,6 +82,7 @@ build-kt-runtime:
 # Install Node dependencies
 npm-install:
   @mk frontend/node_modules : frontend/package.json frontend/src -- "cd frontend && npm install"
+  @mk extensions/vscode/node_modules : extensions/vscode/package.json extensions/vscode/src -- "cd extensions/vscode && npm install"
 
 # Regenerate protos
 build-protos: npm-install
@@ -86,4 +98,4 @@ integration-tests *test:
 
 # Run README doc tests
 test-readme:
-  mdcode run README.md -- bash test.sh
+  mdcode run README.md -- bash test.sh

extensions/vscode/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "@typescript-eslint/naming-convention": [
+            "warn",
+            {
+                "selector": "import",
+                "format": [ "camelCase", "PascalCase" ]
+            }
+        ],
+        "@typescript-eslint/semi": ["error", "never"],
+        "curly": "warn",
+        "eqeqeq": "warn",
+        "no-throw-literal": "warn",
+        "semi": "off"
+    },
+    "ignorePatterns": [
+        "out",
+        "dist",
+        "**/*.d.ts"
+    ]
+}

extensions/vscode/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+*.vsix
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*/.parcel-cache

extensions/vscode/.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'out/test/**/*.test.js',
+});

extensions/vscode/.vscode/launch.json

@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/dist/**/*.js"
+			],
+			"preLaunchTask": "npm: watch",
+		}
+	]
+}

extensions/vscode/.vscode/settings.json

@@ -0,0 +1,25 @@
+{
+    "files.exclude": {
+        "out": false, // set this to true to hide the "out" folder with the compiled JS files
+        "dist": false // set this to true to hide the "dist" folder with the compiled JS files
+    },
+    "search.exclude": {
+        "out": true, // set this to false to include "out" folder in search results
+        "dist": true // set this to false to include "dist" folder in search results
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "always"
+    },
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact"
+    ],
+}

extensions/vscode/.vscode/tasks.json

@@ -0,0 +1,40 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$ts-webpack-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never",
+				"group": "watchers"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		},
+		{
+			"type": "npm",
+			"script": "watch-tests",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never",
+				"group": "watchers"
+			},
+			"group": "build"
+		},
+		{
+			"label": "tasks: watch-tests",
+			"dependsOn": [
+				"npm: watch",
+				"npm: watch-tests"
+			],
+			"problemMatcher": []
+		}
+	]
+}

extensions/vscode/.vscodeignore

@@ -0,0 +1,14 @@
+.vscode/**
+.vscode-test/**
+out/**
+node_modules/**
+src/**
+.gitignore
+.yarnrc
+webpack.config.js
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
+**/.vscode-test.*

extensions/vscode/LICENSE

@@ -0,0 +1 @@
+../../LICENSE

extensions/vscode/README.md

@@ -0,0 +1,39 @@
+# FTL VSCode extension
+
+## Getting started
+
+Within the FTL.vscode-workspace, select the `VSCode Extensions` workspace. Select "Run and Debug" on the activity bar, then select `Run Extension`. This will open a new VSCode window with the extension running.
+
+In the extension development host, open an FTL project (with `ftl-project.toml` or `ftl.toml` files).
+
+If you get any errors, you might need to build the extension first (see below).
+
+## Building the extension
+
+We use `just` for our command line tasks. To build the extension, run:
+```bash
+just build-extension
+```
+
+## Packaging the extension
+
+To package the extension, run:
+```bash
+just package-extension
+```
+
+This will create a `.vsix` file in the `extensions/vscode` directory.
+
+## Publishing the extension
+
+To publish the extension, run:
+```bash
+just publish-extension
+```
+
+This will publish the extension to the FTL marketplace. This command will require you to have a Personal Access Token (PAT) with the `Marketplace` scope. You can create a PAT [here](https://dev.azure.com/ftl-org/_usersSettings/tokens).
+
+## Useful links
+
+- [VSCode extension samples](https://github.com/microsoft/vscode-extension-samples)
+- [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)