A Prettier plugin to help you format Javascript and Typescript projects in a Ramses style easily.

Intro

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Install

npm install -D @frontboi/prettier-plugin-ramses-style

You then need to configure your .prettierrc.json:

{
  "plugins": ["@frontboi/prettier-plugin-ramses-style"]
}

How it works

A Prettier plugin must first parse the source code of the target language into a traversable data structure (Usually an Abstract Syntax Tree) and then print out that data structure in a "pretty" style.

‼️ A prettier plugin MUST be developped in CommonJS.

Code styling: cascading order

To keep code visually consistent, apply a cascading order for:

• JSX props
• object declarations
• object destructuring
• object parameters in functions
• TypeScript type and interface fields
• TypeScript enum members

Cascading order means entries are sorted by identifier length, from shortest to longest.

If two identifiers have the same length, sort them alphabetically.

Good:

<PromptCard id={id} icon={icon} title={title} isPinned={isPinned} />

const promptCardProps = {
  id,
  icon,
  title,
  isPinned,
}

const { id, icon, title, isPinned } = promptCardProps

function renderPrompt({
  id,
  icon,
  title,
  isPinned,
}: {
  id: string
  icon: ReactNode
  title: string
  isPinned: boolean
}) {
  return `${id}:${title}`
}

type PromptCardProps = {
  id: string
  icon: ReactNode
  title: string
  isPinned: boolean
}

enum PromptCardAction {
  Pin = 'pin',
  Open = 'open',
  Archive = 'archive',
}

Bad:

<PromptCard isPinned={isPinned} id={id} title={title} icon={icon} />

const promptCardProps = {
  title,
  id,
  isPinned,
  icon,
}

Testing

You can try this package on a file using this custom script:

npm run prettify -- test/fixtures/comments.js

Disable plugin for one file

If you need to bypass this plugin for a specific file, add this comment at the very top:

// @ramses-style-disable

When this marker is present in the first file comment, the plugin returns the source unchanged for that file.

Useful links

AST explorer Babel AST explorer) Simple tutorial

Support

You can create a PR on this project and I will review it. If you prefer, you can contact me on Linkedin or by email ([email protected]).

Tom Blanchet - 2024