☀️ Collection of configurations

This project includes configurations for Eslint and Stylelint and will be update in the future, you may be interested in these configurations if you want:

🌊 Modern best practices for Typescript, Vue and Styles include Scss, CSS Modules
🌿 Different style guides for Vue / Nuxt based on version with auto detection out-of-box
💅 Flexible formatting rules with auto fix for Json, Yaml, Markdown

Packages

Eslint

NOTE Since v2.0.0 version eslint configuration will be rewritten to the new Eslint Flat config, but you can still use standard one while staying on v1.0.0

Install

# pnpm
pnpm add -D @trpl/eslint-config

# yarn
yarn add -D @trpl/eslint-config

# npm
npm add -D @trpl/eslint-config

VSCode settings

Install Eslint extension and add following rules in your settings.json

NOTE: Set eslint.experimental.useFlatConfig to true if you want to use Flat config

{
  "prettier.enable": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "never"
  },
  "editor.formatOnSave": false,
  "eslint.experimental.useFlatConfig": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "json",
    "jsonc",
    "yaml"
  ]
}

Stylelint

NOTE: Configurations for CSS Modules is coming soon

Install

If you only want to use standard rules without Scss or CSS Modules

# pnpm
pnpm add -D @trpl/stylelint-config-standard

# yarn
yarn add -D @trpl/stylelint-config-standard

# npm
npm add -D @trpl/stylelint-config-standard

If you want to use Scss

# pnpm
pnpm add -D @trpl/stylelint-config-scss

# yarn
yarn add -D @trpl/stylelint-config-scss

# npm
npm add -D @trpl/stylelint-config-scss

VSCode settings

Install Stylelint extension and add following rules in your settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": [
    "css",
    "scss",
    "postcss",
    "vue"
  ]
}