Suggested Project Layout, Editor + Extensions + Plugins

#1

Hello,

I’ve followed along with the documentation and have done the “Build Your Own IDE” as well as “Authoring an Extension” and “Authoring a Plugin” using yeoman/lerna. I’m wondering what the best project layout would be if you perhaps wanted the flexibility to do all 3?

Thanks for any advice,

Dehru

[original thread by dehru]

#2

[dehru]

In other words, would you recommend starting a project with one of the yeoman generators to scaffold it, or some combination, or build it up from scratch? ( again, to support custom editor plus extensions / plugins )

#3

[Peter Haumer]

I forgot the details, but the yeoman template did not work for me. I manually created a workspace by copying selected files over into an empty repo that looks like this and adding our own to that. The goal was to end up with a repo that would allow creating a workspace that would support building, watching, and debug, which as much as possible only contained our own files. So there are several files copied from Theia’s repo directory and I do a manual compare every time we adopt a new release on these to look for changes. Any tips on how to improve on this would be appreciated.

  • .vscode (copied from Theia and adjusted debug launches)

  • configs (copied from Theia and adjusted slightly for our rules)

  • packages (only contains our extensions)

    • extension1 (standard extension layout plus compile.tsconfig.json, tslint.json from Theia)

    • extension2

  • application (our application directory with only a package.json inside as we only build for browser)

  • .npmignore (copied from Theia)

  • .yarnrc (copied)

  • lerna.json (copied)

  • package.json (copied and heavily adjusted, see below)

  • tsconfig.json (copied)

  • tslint.json (copied)

The top-level package.json is based on the Theia one and the contains our packages. Plus we added resolutions for all @theia packages as it does not support building older versions.

"workspaces": [
    "packages/extension1",
    "packages/extension2",
    "application"
  ],
  "resolutions": {
    "@theia/application-package": "0.3.17",
    "@theia/application-manager": "0.3.17",
    "@theia/callhierarchy": "0.3.17",
    ...
#4

I’ve used the generator last week and it was working. If something is wrong with it, please file a bug and let us know.

#5

The generator produces a standard layout for a single extension development. But you can extend it by adding new extensions and npm scripts to simplify building them.

#6

[dehru]

Thanks for the information ( from both of you ). I want to get started on the right foot.