@lightspeed-js/prettier-plugin weekly downloads statistics

@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