Skip to content

Setup A Development Environment

Jump to bottom
Barry de Graaff edited this page Apr 8, 2020 · 2 revisions

An extensive getting started guide on how to create Zimlets and Java extensions can be found at:

Hardware/OS

Any environment where you can run the required software below can be an effective development environment. Mac, Linux, and Windows OSs should all be effective environments. It is perfectly acceptable and encouraged for this to all run on your local laptop/desktop for speed and ease of development.

Required Software

You must have the following software installed in your development environment:

IDE

Developing zimlets will be much easier if you have a good IDE with an integrated eslint plugin. That will eliminate many common bugs that could be hard to find on your own. Below are some recommended editors and plugins for them that you may find useful

Atom

Many developers use the _Atom IDE. Guide to Installing/Updating/Using Atom Packages. Below are some helpful packages that you'll want to install and some settings that are handy for them:

  • linter-eslint package - Show eslint errors in Atom, using the rules defined in the project of the active file
    • Select the "Fix errors on save" checkbox
    • For the "Silence specific rules while typing" field, enter the following.  This will prevent you from being bugged by errors that will be fixed when you save the file
      • keyword-spacing, no-trailing-spaces, no-spaced-func, no-multiple-empty-lines, object-curly-spacing, quotes, react/jsx-space-before-closing
  • nice-index - Instead of showing index.js for every file, shows the folder name instead of index.js in the tab.
  • editorconfig - loads the .editorconfig configuration for your editor behavior automatically
  • language-babel - provides full language support for fancy Javascript and JSX
  • merge-conflicts - easy resolution of merge conflicts, in Atom
  • pigments - shows the color codes you put in your css in their actual color (including LESS variables)

Visual Studio Code

Download Here: https://code.visualstudio.com/

Install extensions through the View->Extensions menu

Some other plugins you may find useful:

  • ESLint - Show eslint errors in Atom, using the rules defined in the project of the active file
  • Babel ES6/ES7 - Adds JS Babel es6/es7 syntax coloring
  • Color Highlight - Highlight web colors in your editor
  • EditorConfig for VS Code - EditorConfig Support for Visual Studio Code
  • GitLens - Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
  • Highlight Matching Tag - Highlights matching closing or opening tag
  • Node.js Modules Intellisense - Autocompletes Node.js modules in import statements
  • NPM Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements

Install Zimlet Cli tool

$ npm install -g @zimbra/zimlet-cli

Clone this wiki locally