AD1 Gitpod Extensions and Settings

Extensions

vortizhe.simple-ruby-erb - allows the ERB tag keyboard shortcut toggle.

jnbt.vscode-rufo - allows the "Format Document" option to work for .rb files. Requires the rufo gem. A forked version of this extension should be included in each project and installed in workspace setup.

aliariff.vscode-erb-beautify - allows the "Format Document" option to work for .erb files. Requires the htmlbeautifier gem and the files.associations VS Code setting.

.gitpod.yml should look something like:

image: XXXXXXXXXX

tasks:
  - before: |
      bin/setup
      .vscode/manage_extensions
ports:
  - port: 3000
    onOpen: open-preview
  - port: 9500-9999
    onOpen: ignore


vscode:
  extensions:
    - vortizhe.simple-ruby-erb
    - aliariff.vscode-erb-beautify

---

- port: 9500-9999
  onOpen: ignore

If specs require JS to run, the test server will run on some port in this range. This setting prevents the "Open in a new tab" popup dialogue from appearing which previously, confused students.

tasks:
  - before: |
      source $(rvm <RUBY_VERSION> do rvm env --path)
      bin/setup
      .vscode/manage_extensions

Make sure the replace <RUBY_VERSION> with the current Ruby version for the project.

The before task runs first before a workspace has been fully created, and again each time before the workspace starts. This should now copy the gems that were installed in the Docker image to vendor/bundle/. Bundler is then configured to use vendor/bundle as the default gem directory, effectively pre-installing all gems. The Rails database is then setup with any seed data. This code only runs if the gems have not been copied over to the current directory.

.vscode/manage_extensions runs a script that will uninstall extensions that Gitpod installs by default (refer to this PR for more details).

Settings

• .theia folder is no longer needed as long as grade_runner gem is up to date.

• .vscode/settings.json should look like:

{
  "editor.tabSize": 2,
  "editor.acceptSuggestionOnEnter": "off",
  "editor.bracketPairColorization.enabled": false,
  "editor.cursorSurroundingLines": 8,
  "editor.dragAndDrop": false,
  "editor.guides.bracketPairs": true,
  "editor.linkedEditing": true,
  "editor.minimap.enabled": false,
  "editor.smoothScrolling": false,
  "editor.wordBasedSuggestionsMode": "allDocuments",
  "editor.wordWrap": "on",
  "editor.wrappingIndent": "deepIndent",
  "workbench.editor.closeOnFileDelete": true,
  "workbench.fontAliasing": "auto",
  "workbench.startupEditor": "none",
  "workbench.tree.renderIndentGuides": "always",
  "files.associations": {
    "*.html.erb": "erb"
  },
  "files.autoSaveDelay": 500,
  "files.exclude": {
		"**/.git": true,
		".vscode": true,
		".bundle": true
  },
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "screencastMode.onlyKeyboardShortcuts": true,
  "screencastMode.verticalOffset": 10,
  "explorer.compactFolders": false,
  "explorer.incrementalNaming": "smart",
  "html.format.endWithNewline": true,
  "html.format.preserveNewLines": true,
  "html.format.templating": true,
  "terminal.integrated.altClickMovesCursor": true,
  "[erb]":  {
		"editor.formatOnSave": false
  },
  "[ruby]":  {
		"editor.formatOnSave": false
  },
  "vscode-erb-beautify.keepBlankLines": 1,
  "vscode-erb-beautify.useBundler": true,
  "ruby.intellisense": false,
  "gitpod.openInStable.neverPrompt": true,
  "redhat.telemetry.enabled": false,
  "solargraph.useBundler": true,
  "rufo.useBundler": true,
  "emmet.includeLanguages": {
    "erb": "html"
  }
}

• Auto save is enabled by default in VS Code (unlike Theia).