@lightspeed-js/prettier-plugin

A Prettier plugin for formatting Lightspeed component files (.lsp).

Installation

npm install --save-dev @lightspeed-js/prettier-plugin
# or
yarn add -D @lightspeed-js/prettier-plugin
# or
pnpm add -D @lightspeed-js/prettier-plugin

Usage

Add it to your Prettier config (Prettier 3 only loads plugins listed there):

{ "plugins": ["@lightspeed-js/prettier-plugin"] }

# Format a single file
npx prettier --write components/Button.lsp

# Format all .lsp files
npx prettier --write "**/*.lsp"

How it works

The plugin recognises four block types in Lightspeed files:

| Block | Formatter | Language attribute support | | ------------ | ---------- | ------------------------------ | | <view> | HTML | - | | <skeleton> | HTML | - | | <logic> | JavaScript | lang="ts" for TypeScript | | <style> | CSS | lang="scss" or lang="less" |

Example

Before formatting:

<view>
  <div class="container">
    <h1>{{title}}</h1>
    <p>Welcome!</p>
  </div>
</view>

<logic>
  const state = reactive({title: 'Hello',count:0}) function
  increment(){state.count++}
</logic>

<style>
  .container {
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
  }
</style>

After formatting:

<view>
  <div class="container">
    <h1>{{ title }}</h1>
    <p>Welcome!</p>
  </div>
</view>

<logic>
  const state = reactive({ title: "Hello", count: 0 }); function increment() {
  state.count++; }
</logic>

<style>
  .container {
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
  }
</style>

Configuration

This plugin respects your existing Prettier configuration. You can also add Lightspeed-specific overrides:

{
  "semi": true,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.lsp",
      "options": {
        "printWidth": 100
      }
    }
  ]
}

Editor Integration

VS Code

Install the Prettier extension and add to your settings:

{
  "[lightspeed]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Nova

Use the Prettier extension for Nova and ensure the plugin is installed in your project.

TypeScript Support

Use the lang attribute for TypeScript in logic blocks:

<logic lang="ts">
  interface User { name: string; age: number; } const user: User = { name:
  "Alice", age: 30, };
</logic>

SCSS/LESS Support

Use the lang attribute for SCSS or LESS in style blocks:

<style lang="scss">
  .container {
    padding: 20px;

    .title {
      font-size: 24px;

      &:hover {
        color: blue;
      }
    }
  }
</style>

License

MIT