Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🎉 Add vscode extension to find ETL step files more easily #3365

Merged
merged 17 commits into from
Oct 4, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,5 @@ site/
notebooks/

zpop/
node_modules/
dist/
50 changes: 50 additions & 0 deletions vscode_extensions/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
# Creating a new extension

## Initialize code

Install the tool to create all the boilerplate code:
```
npm install -g yo generator-code
```

Run the tool:
```
yo code
```

At this stage you may need to add some code to `src/extension.ts`, `package.json`, and elsewhere.

## Set up debug mode

Go to the root folder of the extension, and run
```
npm run install
```

Open a VSCode on that folder. On the terminal, run
````
npm run watch
````
(and keep this terminal open).

Then go to the debug pane, and hit the play button to "Run Extension". This will open a new VSCode window.

On the new window, hit cmd+shift+p and type the name of the extension (or its shortcut).

You can now make changes in the code, then go to the new window, and hit `cmd+r` to refresh.
Then, rerun the extension and it should reflect the latest changes.

## Package the extension

Once you are happy with the result, bump up the version in package.json, go to the terminal, ensure the extension compiles, and package it.
```
npm run compile
vsce package
```

This creates a new .vsix file for the new version.


## Install an extension

Press `cmd+shift+p` and select "Extensions: Install from VSIX". Select the `*.vsix` file of the extension you want to install. Restart VSCode to ensure the new version is installed (although it may not be necessary).
5 changes: 5 additions & 0 deletions vscode_extensions/find-latest-etl-step/.vscode-test.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { defineConfig } from '@vscode/test-cli';

export default defineConfig({
files: 'out/test/**/*.test.js',
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
// See http://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format
"recommendations": ["dbaeumer.vscode-eslint", "connor4312.esbuild-problem-matchers", "ms-vscode.extension-test-runner"]
}
18 changes: 18 additions & 0 deletions vscode_extensions/find-latest-etl-step/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/dist/extension.js", // Launch the built extension
"args": ["--extensionDevelopmentPath=${workspaceFolder}"], // Run in dev mode
"outFiles": ["${workspaceFolder}/dist/**/*.js"], // The output files to track
"runtimeExecutable": "${execPath}", // Use the current VSCode executable
"stopOnEntry": false,
"sourceMaps": true,
"smartStep": true,
"internalConsoleOptions": "openOnSessionStart"
}
]
}
13 changes: 13 additions & 0 deletions vscode_extensions/find-latest-etl-step/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// Place your settings in this file to overwrite default and user settings.
{
"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
},
// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
"typescript.tsc.autoDetect": "off"
}
34 changes: 34 additions & 0 deletions vscode_extensions/find-latest-etl-step/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"version": "2.0.0",
"tasks": [
{
"label": "watch",
"type": "npm",
"script": "esbuild-watch",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"fileLocation": [
"relative",
"${workspaceFolder}"
],
"pattern": {
"regexp": "^.*\\((\\d+,\\d+)\\):\\s*(error|warning)\\s+(TS\\d+):\\s*(.*)$",
"file": 1,
"line": 2,
"severity": 3,
"code": 4
},
"background": {
"activeOnStart": true,
"beginsPattern": "Entering watch mode...",
"endsPattern": "Build completed."
}
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
14 changes: 14 additions & 0 deletions vscode_extensions/find-latest-etl-step/.vscodeignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.vscode/**
.vscode-test/**
out/**
node_modules/**
src/**
.gitignore
.yarnrc
esbuild.js
vsc-extension-quickstart.md
**/tsconfig.json
**/eslint.config.mjs
**/*.map
**/*.ts
**/.vscode-test.*
9 changes: 9 additions & 0 deletions vscode_extensions/find-latest-etl-step/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Change Log

All notable changes to the "find-latest-etl-step" extension will be documented in this file.

Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.

## [Unreleased]

- Initial release
16 changes: 16 additions & 0 deletions vscode_extensions/find-latest-etl-step/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# Find Latest ETL Step Extension

This VSCode extension allows you to search for files in your ETL project by name.
Only the steps corresponding to the latest existing version will be shown.

## Usage

1. Press `Ctrl+Shift+L` to invoke the extension.
2. Start typing the name of the file you want to search for.
3. Select the file from the list (moving up and down with the cursor), and press enter to open.

## Installation

- Press `cmd+shift+p` and select "Extensions: Install from VSIX".
- Select the latest version of the packaged extension, e.g. `find-latest-etl-step-0.0.2.vsix`.
- Restart VSCode to ensure the new version is installed (although it may not be necessary).
34 changes: 34 additions & 0 deletions vscode_extensions/find-latest-etl-step/esbuild.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
const esbuild = require('esbuild');

// Common build options
const buildOptions = {
entryPoints: ['src/extension.ts'],
bundle: true,
outfile: 'dist/extension.js',
external: ['vscode'],
platform: 'node',
format: 'cjs',
sourcemap: true,
target: 'node12'
};

// Start the build
async function startBuild() {
try {
// If watch mode is enabled, create a context and start watching for changes
if (process.argv.includes('--watch')) {
const ctx = await esbuild.context(buildOptions);
console.log('Entering watch mode...');
await ctx.watch();
} else {
// Otherwise, just run the build once
await esbuild.build(buildOptions);
console.log('Build complete.');
}
} catch (error) {
console.error('Build failed:', error);
process.exit(1);
}
}

startBuild();
56 changes: 56 additions & 0 deletions vscode_extensions/find-latest-etl-step/esbuild.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
const esbuild = require("esbuild");

const production = process.argv.includes('--production');
const watch = process.argv.includes('--watch');

/**
* @type {import('esbuild').Plugin}
*/
const esbuildProblemMatcherPlugin = {
name: 'esbuild-problem-matcher',

setup(build) {
build.onStart(() => {
console.log('[watch] build started');
});
build.onEnd((result) => {
result.errors.forEach(({ text, location }) => {
console.error(`✘ [ERROR] ${text}`);
console.error(` ${location.file}:${location.line}:${location.column}:`);
});
console.log('[watch] build finished');
});
},
};

async function main() {
const ctx = await esbuild.context({
entryPoints: [
'src/extension.ts'
],
bundle: true,
format: 'cjs',
minify: production,
sourcemap: !production,
sourcesContent: false,
platform: 'node',
outfile: 'dist/extension.js',
external: ['vscode'],
logLevel: 'silent',
plugins: [
/* add to the end of plugins array */
esbuildProblemMatcherPlugin,
],
});
if (watch) {
await ctx.watch();
} else {
await ctx.rebuild();
await ctx.dispose();
}
}

main().catch(e => {
console.error(e);
process.exit(1);
});
28 changes: 28 additions & 0 deletions vscode_extensions/find-latest-etl-step/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";

export default [{
files: ["**/*.ts"],
}, {
plugins: {
"@typescript-eslint": typescriptEslint,
},

languageOptions: {
parser: tsParser,
ecmaVersion: 2022,
sourceType: "module",
},

rules: {
"@typescript-eslint/naming-convention": ["warn", {
selector: "import",
format: ["camelCase", "PascalCase"],
}],

curly: "warn",
eqeqeq: "warn",
"no-throw-literal": "warn",
semi: "warn",
},
}];
Binary file not shown.
Binary file not shown.
Loading
Loading