create-vscode-editor
Advanced tools
create-vscode-editor - npm Package Compare versions
Comparing version 0.0.2 to 0.0.3
| { | ||
| "name": "create-vscode-editor", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "description": "A custom editor for VS Code", | ||
@@ -18,7 +18,9 @@ "author": "@seflless", | ||
| "scripts": { | ||
| "start": "yarn start:editor && yarn start:extension", | ||
| "start": "concurrently npm:start:*", | ||
| "start:editor": "node scripts/dev-editor.mjs -w", | ||
| "start:extension": "code extension && node scripts/dev-extension.mjs -w", | ||
| "build": "npm run build:editor && npm run build:extension", | ||
| "build:editor": "node scripts/build-editor.mjs", | ||
| "build:extension": "node scripts/build-extension.mjs" | ||
| "build:extension": "node scripts/build-extension.mjs", | ||
| "package": "npm run build:editor && npm run build:extension && vsce package" | ||
| }, | ||
@@ -35,3 +37,3 @@ "dependencies": { | ||
| "@types/react-router-dom": "^5.1.8", | ||
| "concurrently": "6.0.1", | ||
| "concurrently": "^6.4.0", | ||
| "create-serve": "1.0.1", | ||
@@ -43,5 +45,6 @@ "esbuild": "^0.13.8", | ||
| "rimraf": "3.0.2", | ||
| "typescript": "4.2.3" | ||
| "typescript": "4.2.3", | ||
| "vsce": "^2.3.0" | ||
| }, | ||
| "gitHead": "a7dac0f83ad998e205c2aab58182cb4ba4e099a6" | ||
| } |
| ## Create VS Code Editors | ||
| Easily create custom VS Code editors, using React for the UI. | ||
| While working on the Tldraw extension I couldn't find any projects that uses React for the editor UI. Also none of the example editors supported web VS Code like GitHub.dev, vscode.dev, and GitHub Codespaces. This project generated an app that has all of these types of things working out of the box. Also a better dev workflow than the VS Code team's example code. | ||
| This is an opionated VS Code extension generator with the following features out of the box: | ||
| - Editor UIs are built with React | ||
| - Editors will automatically work in all VS Code distributions: | ||
| - [VS Code desktop](https://code.visualstudio.com/download) | ||
| - [github.dev](https://github.dev) | ||
| - [vscode.dev](https://vscode.dev) | ||
| - [Github Codespaces](https://github.com/features/codespaces) | ||
| - Fast HMR using Vite (Coming soon) | ||
| - VS Code (F5) launching integrating | ||
| - Instructions and scripts for automatically publishing to the VS Code Marketplace | ||
| https://github.com/microsoft/vscode-extension-samples/tree/main/custom-editor-sample | ||
| Checkout the [Tldraw VS Code editor extension](https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode), that others and I built. This code is extracted from the [Tldraw repo](https://github.com/tldraw/tldraw/tree/main/vscode). | ||
| ### Install and Run | ||
| Like create-react-app, this is a project generator that is very opinionated in order work out of the box. | ||
| Checkout the [Tldraw VS Code editor](https://marketplace.visualstudio.com/items?itemName=tldraw-org.tldraw-vscode), that this module was spun out from. | ||
| 1. `yarn create vscode-editor my-editor` | ||
| 1. `cd my-editor` | ||
| 1. `yarn start` | ||
| 1. This will automatically open your editor project in VS Code | ||
| 1. Now iterate on your custom editor by | ||
| 1. Changing the code in editor/src | ||
| 1. Use Command+R to reload the extension after you make changes to the editor code () | ||
| 1. Rinse and repeat | ||
| 1. To share your extension: | ||
| 1. Create an extension installer, you can share directly to people | ||
| 1. `yarn package` | ||
| 1. Coming soon: automated publishing to the Marketplace. For now you can use the workflow where you upload the .vsix installer file | ||
| ### Todos | ||
@@ -14,0 +33,0 @@ - Register create-vscode-editor. Running it would be |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.01%
1385301
- Lines of code
- increased by1.49%
23489
- Number of lines in readme file
- increased by18.45%
122
Worsened metrics
- Dev dependency count
- increased by7.69%
14
No dependency changes