@storyblok/eslint-config

Opinionated ESLint configuration for Storyblok projects.

• Single quotes, no semi
• Auto fix for formatting (aimed to be used standalone without Prettier)
• Sorted imports, dangling commas
• Reasonable defaults, best practices, only one line of config
• Designed to work with TypeScript, JSX, Vue out-of-box
• Lints also for json, yaml, toml, markdown
• Opinionated, but very customizable
• ESLint Flat config, compose easily!
• Using ESLint Stylistic
• Respects .gitignore by default
• Optional React, Svelte, UnoCSS, Astro support
• Optional formatters support for CSS, HTML, etc.
• Style principle: Minimal for reading, stable for diff, consistent

🛠️ Setup

Installation

pnpm i -D eslint @storyblok/eslint-config

Configuration

With "type": "module" in package.json (recommended) add these scripts:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

Basic use

Using the default config without arguments uses the following @antfu/eslint-config options as defaults:

• autodetects Vue
• autodetects Typescript
• enables ESlint Stylistic

// eslint.config.js
import { storyblokLintConfig } from '@storyblok/eslint-config';

export default storyblokLintConfig();

Setting options and using custom rules

It is possible to add custom rules with the following configuration.

• The first item must contain options to be passed to @antfu/eslint-config (read more on its docs for possible options). It must always be present even if left empty.
• From the second item going on, you can add as many custom ESlint flat config objects as you need.

// eslint.config.js
import { storyblokLintConfig } from '@storyblok/eslint-config';

export default storyblokLintConfig(
  // @antfu/eslint-config options, must be the first argument
  {
    stylistic: false,
  },
  // Addtionals flat configs start from here
  {
    rules: {
      curly: 'off',
    },
  },
);

📝 VS Code Support

If you use VS Code, you should manually enable support for ESLint flat config.

Install VS Code ESLint extension.

Add the following settings to your .vscode/settings.json:

{
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "eslint.experimental.useFlatConfig": true,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off", "fixable": true },
    { "rule": "format/*", "severity": "off", "fixable": true },
    { "rule": "*-indent", "severity": "off", "fixable": true },
    { "rule": "*-spacing", "severity": "off", "fixable": true },
    { "rule": "*-spaces", "severity": "off", "fixable": true },
    { "rule": "*-order", "severity": "off", "fixable": true },
    { "rule": "*-dangle", "severity": "off", "fixable": true },
    { "rule": "*-newline", "severity": "off", "fixable": true },
    { "rule": "*quotes", "severity": "off", "fixable": true },
    { "rule": "*semi", "severity": "off", "fixable": true }
  ],

  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

🔗 Related Links

• Storyblok Technology Hub: Storyblok integrates with every framework so that you are free to choose the best fit for your project. We prepared the technology hub so that you can find selected beginner tutorials, videos, boilerplates, and even cheatsheets all in one place.
• Getting Started: Get a project ready in less than 5 minutes.
• Storyblok CLI: A simple CLI for scaffolding Storyblok projects and fieldtypes.

ℹ️ More Resources

Support

• Bugs or Feature Requests? Submit an issue.
• Do you have questions about Storyblok or you need help? Join our Discord Community.

Contributing

Please see our contributing guidelines and our code of conduct. This project use semantic-release for generate new versions by using commit messages and we use the Angular Convention to naming the commits. Check this question about it in semantic-release FAQ