Prettier - Code Formatting

Prettier is a code formatter used to ensure consistent formatting across your code base. The .prettierignore and .prettierrc files provided as part of this repository control the behavior of the Prettier formatter.

Warning The current Apex Prettier plugin version requires that you install Java 11 or above.

To run Prettier from the command line, run npm run prettier.

To use Prettier with Visual Studio Code, install this extension from the Visual Studio Code Marketplace.

Install prettier en VsCode

Currently, Prettier supports Apex, Aura, and Lightning Web Components (LWC) as well as standard file formats like .json, .md, .html, and .js.

Using Prettier for Apex, Aura, and LWC requires some configuration.

1. If you don’t already have a package.json in your project, run: npm init You can accept all the defaults.

2. Install Prettier by running: npm install --save-dev --save-exact prettier prettier-plugin-apex

3. Create a Prettier configuration file called .prettierrc, in the root of your project, with the following content.

   <aside> ⚠️ NOTE: The "trailingComma": "none" setting is required for Aura.

   </aside>

   {
     "trailingComma": "none",
     "overrides": [
       {
         "files": "**/lwc/**/*.html",
         "options": { "parser": "lwc" }
       },
       {
         "files": "*.{cmp,page,component}",
         "options": { "parser": "html" }
       }
     ]
   }
   

4. If you’d like to further customize Prettier, add other config options.

5. If you want to ensure that all your files are formatted, enable the setting editor.formatOnSave in VS Code. For information about configuring your settings, see User and Workspace Settings in the Visual Studio Code docs.

If you want to format your files each time that you commit changes to your Git repository, set up a Git hook.

ESLint is a popular JavaScript linting tool used to identify stylistic errors and erroneous constructs. The .eslintignore file is provided as part of this repository to exclude specific files from the linting process in the context of Lightning Web Components development.

To run ESLint from the command line, run npm run lint.

To use ESLint with Visual Studio Code, install this extension from the Visual Studio Code Marketplace. The extension provides a code overlay that help you identify linting issues quickly.

Pre-commit Hook

We use Husky and lint-staged to set up a pre-commit hook that enforces code formatting and linting by running Prettier and ESLint every time you git commit changes.