Prettier config for API components

Usage no npm install needed!

<script type="module">
  import advancedRestClientPrettierConfig from 'https://cdn.skypack.dev/@advanced-rest-client/prettier-config';


Linting Prettier

Use Prettier to format your JS, CSS and HTML code.

Based on @open-wc/prettier-config.

  • Install @advanced-rest-client/prettier-config.
npm i --save-dev @@advanced-rest-client/prettier-config
  • Create prettier.config.js in the root directory of your project.
module.exports = require('@advanced-rest-client/prettier-config');
  • Add the following scripts to your package.json
"scripts": {
  "lint:prettier": "prettier \"**/*.js\" --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
  "format:prettier": "prettier \"**/*.js\" --write",
  • Update your .eslintrc.js to look like this:
module.exports = {
  extends: [

What you get

  • Apply formatting to JS files
  • Apply formatting to HTML inside of html tagged template literals used by lit-html
  • Apply formatting to CSS inside of css tagged template literals used by lit-css
  • Integration with ESLint to prevent potentially conflicting rules



  • npm run lint:prettier to check if your files are correctly formatted
  • npm run format:prettier to auto format your files

Linting Error Examples

$ npm run lint:prettier

↑↑ these files are not prettier formatted ↑↑

Simply run npm run format:prettier to format your files automatically.