Skip to content

Latest commit

 

History

History
101 lines (69 loc) · 4.46 KB

formatting.md

File metadata and controls

101 lines (69 loc) · 4.46 KB

Formatting

Liferay's frontend formatting tool of choice is Prettier

Settings

To maintain some consistency with other parts of Liferay's codebase, we recommend overriding some of Prettier's default values to the following:

Setting Value Description Example
bracketSpacing false Print spaces between brackets in object literals. {foo: bar}
endOfLine "lf" Flavor of line endings in text files
jsxSingleQuote true Use single quotes instead of double quotes in JSX.
singleQuote true Use single quotes instead of double quotes
tabWidth 4 Specify the number of spaces per indentation-level
useTabs true  Indent lines with tabs instead of spaces

Workflow Integration

Standalone Projects

As a recommendation, create a .prettierrc file in your standalone projects with the following configuration:

{
    "bracketSpacing": false,
    "endOfLine": "lf",
    "jsxSingleQuote": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "none",
    "useTabs": true
}

Whenever possible, use npm scripts to configure a format and a format:check similar to the following:

{
    "scripts": {
        "format": "prettier --write"
        "format:check": "prettier --list-different"
    }
}

Run format locally to format your files and configure format:check to run on your CI builds to ensure unformatted files don't find their way into the project.

Check Prettier documentation for a more detailed explanation of different approaches and options.

Liferay DXP

Please, read the Liferay DXP Formatting Guidelines for specific information about how code is formatted inside the liferay-portal repo.

IDE integrations

Visual Studio Code

Install the Prettier - Code formatter extension and use the usage option that better suits you.

When working inside liferay-portal, there is some custom integration that you may wish to apply in order to have it automatically apply some minor overrides to Prettier's standard styling that are required by Liferay.

IntelliJ IDEA

If you're an IntelliJ IDEA user, you can use this Prettier plugin to format your JavaScript and SCSS files.

Requirements

You need to have Node.js installed.

Installation

In your terminal:

  • Create a folder in your user home npm-global
  • Execute: npm config set prefix ‘~/npm-global’
  • Execute: npm install --global prettier eslint eslint-config-liferay

In Intellij:

  • Install plugins FileWatchers and Prettier
  • Restart Intellij

Configuration

In Preferences > Languages and Frameworks > Javascript > Prettier, set

  • Prettier package: ~/npm-global/lib/node_modules/prettier

In Preferences > Tools > FileWatchers

  • Add new Watcher of type Prettier for files of type Javascript
    • File type: Javascript
    • Program: /Users/<your-user-name>/npm-global/bin/prettier
    • Arguments: --write $FilePath$
    • Output paths to refresh: $FilePath$
  • Add new Watcher of type Prettier for files of type SCSS Styles Sheets
    • File type: SCSS Styles Sheets
    • Program: /Users/<your-user-name>/npm-global/bin/prettier
    • Arguments: --write $FilePath$
    • Output paths to refresh: $FilePath$