Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

create-vscode-editor

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-vscode-editor - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

13

package.json
{
"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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc