Does we have any formatter for lit like eslint or prettier in VScode?

[jitendraP-ashutec]

I have used eslint and prettier for code formation, but some time its not format property specially into HTML template? do we have any support for it ?

[p-ob]

We've been using eslint and prettier for quite some time with our lit monorepos.

Here's an example of what we've set up and it's carried on strong for quite some time (it's been awhile since I've reviewed, so I'm sure it could be improved upon).

Packages:

• eslint-plugin-lit
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser
• eslint-config-prettier
• eslint-plugin-prettier

.prettierrc:

{
  "printWidth": 120,
  "overrides": [
    {
      "files": "*.ts,*.js",
      "options": {
        "htmlWhitespaceSensitivity": "strict"
      }
    },
    {
      "files": "*.scss",
      "options": {
        "parser": "scss",
        "singleQuote": true,
        "printWidth": 200
      }
    },
    {
      "files": "*.md",
      "options": {
        "printWidth": 200
      }
    }
  ]
}

.eslintrc,json:

{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "no-console": "warn",
    "no-var": "error",
    "prefer-const": "error",
    "curly": "error",
    "lit/no-duplicate-template-bindings": "error",
    "lit/no-template-map": "error",
    "lit/no-useless-template-literals": "error",
    "lit/attribute-value-entities": "error",
    "lit/binding-positions": "error",
    "lit/no-property-change-update": "error",
    "lit/no-invalid-html": "error",
    "eqeqeq": "error",
    "no-unused-vars": "off"
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2020
  },
  "plugins": ["prettier", "lit"],
  "parser": "@typescript-eslint/parser"
}