Linting Prettier

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

TIP

This is part of the default open-wc recommendation

Setup

npm i -g yo
npm i -g generator-open-wc

yo open-wc:linting-prettier

Manual

  • Install @open-wc/prettier-config.
    yarn add --dev @open-wc/prettier-config
    
  • Create prettier.config.js in the root directory of your project.
    module.exports = require('@open-wc/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: [
        '@open-wc/eslint-config',
        'eslint-config-prettier'
      ].map(require.resolve),
    };
    

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

Usage

Run:

  • 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

test/set-card.test.js
test/set-game.test.js
↑↑ these files are not prettier formatted ↑↑

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

Last Updated: 1/13/2019, 10:46:34 AM