eslint config for stencil component projects.

Usage no npm install needed!

<script type="module">
  import w33bleEslintConfigStencil from 'https://cdn.skypack.dev/@w33ble/eslint-config-stencil';



eslint config for stencil component projects.

GitHub license npm Project Status


  • Uses eslint-airbnb-airbnb-base
  • Supports typescript
  • Lints JSX


Start by installing the package and its peer dependencies.

yarn add -D eslint-config-stecil
npx install-peerdeps --dev eslint-config-stecil

Then create an eslint file with at least the following:

  "extends": [
  "parserOptions": {
    "project": "./tsconfig.json",
    "tsconfigRootDir": "."

Lastly, add the following script to your package.json file:

"lint": "eslint src --ext .ts --ext .tsx --ignore-pattern 'src/**/*.d.ts'"

Now you can use yarn lint or npm run lint to lint your component code.


This config makes use of eslint-plugin-idiomatic-jsx, which you can use to require or prevent attributes on specific components, as well as prevent components from being used. This requires that you add some rules to your eslintrc file. You can find more about configuring these features in the eslint-plugin-idiomatic-jsx docs.

Code formatting

This config does not include a formatter, so you'll need to add one yourself. Prettier is a fine choice.


MIT © w33ble