configs

Opinionable & sharable linter configs.

Install

Install eslint and peers:

yarn add @qxy/eslint-config@next eslint typescript -D

Install prettier and peers:

yarn add @qxy/prettier-config@nex prettier -D

Install stylelint and peers:

yarn add @qxy/stylelint-config@nex @qxy/prettier-config@nex postcss stylelint prettier -D

Config

ESLint

Configuration in .eslintrc.json:

{
  "root": true,
  "extends": ["@qxy"]
}

Prettier

Configuration in package.json:

{
  "prettier": "@qxy/prettier-config"
}

Stylelint

Configuration in stylelint.config.cjs:

module.exports = {
  extends: ['@qxy/stylelint-config'],
  rules: {
    // override rules
  },
}

Usage

Run linter with npm scripts:

{
  "scripts": {
    "lint:script": "eslint .",
    "lint:style": "stylelint \"src/**/*.{vue,scss}\""
  }
}

Use yarn lint:script --fix and yarn lint:style --fix to autofix fixable problems.

Lint staged files only via nano-staged:

{
  "nano-staged": {
    "*.{js,ts,json,vue,html,md,yml,yaml}": "eslint --fix",
    "*.{css,vue,scss}": "stylelint --fix"
  }
}

Auto fix when coding with VSCode:

Configuration in .vscode/settings.json

{
  "prettier.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "vue",
    "yaml",
    "html",
    "json",
    "jsonc",
    "json5",
    "markdown",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always"
  },
  "[javascript][typescript][vue]": {
    "editor.formatOnSave": false
  }
}

License

MIT License © 2020-PRESENT qxy-fe