Installing the VS Code extension

The VS Code Extension is a really good place to start since it works out of the box. Just create a new hello-world.pc file, and start writing plain HTML & CSS. Play around by creating a style block, use the color pickers. Get a real good feel for Paperclip.

alt Realtime editing alt Realtime editing

Tips

  • To Open a live preview, execute the Paperclip: Live Preview while a *.pc file is open.
  • To zoom, scroll & hold down the meta / ctrl key.
  • To measure between elements, just select an element, then hold meta / ctrl by hovering over another element.
  • You can turn off visual tools by clicking the raindrop.
  • You can open the web inspector by running the command: Developer: Open Webview Developer tools.
  • If the extension stops working for whatever reason (might happen during Alpha), then run the Developer: Reload Window command.