The Labcoat Editor

The Labcoat Editor allows you to edit stylesheets and scripts that will injected into the site via the Chrome Extension.

The code panel

The code panel uses CodeMirror to provide the editing environment. It provides syntax highlighting, auto-indenting, line-numbers, and more.

Keyboard shortcuts

Several keyboard shortcuts are available to streamline your coding efforts:

Saving Cmd+s Ctrl+s Save all of your files for that version
Commenting Cmd+/ Ctrl+/ Comment the current line or selected lines.
Full-screen F11 Enter into full-screen mode. F11 (and Esc) will exit. When in this mode, all controls are hidden. To save, use the keyboard short above.
Indenting Cmd+] Ctrl+] Indent the current line
Outdenting Cmd+[ Ctrl+[ Outdent the current line

The file sidebar

The file panel allows you to work with multiple files by navigating between them and adding/removing.

Adding a file

Click the + Add button next to the CSS or JS headings to add a new file. You can enter a filename and extension, or specify an external dependency (described below).

External dependencies

If you need an external library (either CSS or JS), you can insert it by specifying a URL or by selecting one of the pre-defined libraries.

These scripts/stylesheets will be inserted as-is into the target website. Labcoat does not host the files at all. For the popular libraries, they will be hosted directly from CDNjs.com (which is awesome, you should use them).

For your own external depenendencies, the URL will be inserted as is. Be mindful of files that are not available on the public internet. We also recommend using https at all times to ensure that the script isn’t blocked if the target website uses https.

Pre-processors

The Labcoat Editor support serveral pre-processors, when adding a file, simply choose the extension you’d like:

For Styesheets:

  • Sass, both in Sass and SCSS syntax. Note, you can import partials by starting your file with an underscore (e.g., _grid.scss and then import it using @import 'grid').
  • LESS. Note that importing partials is not supported at this time.

For Scripts:

  • Coffeescript. Hate semicolons and braces?
  • ES6 and JSX via Babel. Use the latest version of JavaScript. Note, Chrome itself supports many ES6 features already. If so, you might want to write ES6 using plain .js files and let Chrome handle it. To see if the feature you want works in Chrome natively, check out the ES6 Compatibility Matrix.

When using any pre-processor, syntax is important. Watch out for error messages at the top of the editor, they will appear when attempting to save. Invalid files will not be saved.

Removing a file

Clicking the x next to a file will delete the file after prompting you with an Are you sure… message.

Be very careful, there is NO UNDO.

Re-ordering files (controlling load order)

Each file listed will be added as a separate script or stylesheet to the target website. The files will be inserted in the order listed in the file sidebar.

To change the order, drag the handle up or down to drag and drop the file into your desired order.



Do you have any suggestions for how to improve this (or any) documentation?
Send an email to support@labcoat.io