@rainbowatcher/eslint-config

Features

• Opinionated
• Auto fix for formatting, Double quotes, no semi colon
• Designed to work with TypeScript, JSX, Vue, JSON, YAML, Toml, Markdown, etc. Out-of-box.

We use double quotes, because Strings in many other backend languages that are using double quotes, It can reduce the discomfort when switching languages and make coding smoother.

Usage

Run init script

npx @rainbowatcher/eslint-config

Add script in package.json

For example:

{
    "scripts": {
        "lint": "eslint ."
    }
}

Config VS Code auto fix

Install VS Code ESLint extension and create .vscode/settings.json

{
    // recommend turn prettier disable when style option is enable
    "prettier.enable": false,
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.organizeImports": "never",
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "json",
        "jsonc",
        "json5",
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
        "markdown",
        "yaml",
        "toml",
    ],
}

Result

the final result will be like follow

// eslint.config.js
import { defineConfig } from "@rainbowatcher/eslint-config"

export default defineConfig({
    gitignore: true,
    json: true,
    markdown: true,
    style: true,
    typescript: true,
    vue: true,
    yaml: true,
    // ...
})

Options

/**
 * there has no default value for each properties, all properties are optional and be set by defineConfig
 */
export type Options = {
    /**
     * enable eslint for css
     */
    css?: boolean

    /**
     * enable git ignore intergration
     */
    gitignore?: boolean

    /**
     * enable lint for graphql
     */
    graphql?: boolean

    /**
     * enable lint for json
     */
    json?: boolean

    /**
     * enable lint for jsx
     */
    jsx?: boolean

    /**
     * enable lint for markdown
     */
    markdown?: boolean

    /**
     * enable stylistic rules
     */
    style?: boolean | StyleOptions

    /**
     * enable lint for toml
     */
    toml?: boolean

    /**
     * enable lint for typescript
     */
    typescript?: boolean | TypescriptOptions

    /**
     * enable lint for unocss
     */
    unocss?: boolean

    /**
     * enable eslint for vue
     */
    vue?: boolean

    /**
     * enable lint for yaml
     */
    yaml?: boolean
}

export type TypescriptOptions = {
    typeAware?: boolean
}

export type StyleOptions = {
    indent?: number
    quote?: "double" | "single"
    semi?: boolean
    trailingComma?: boolean
    useTabs?: boolean
}

Plan

We will consider referencing the following projects:

1. antfu/eslint-config
2. eslint-config-standard
3. eslint-config-xo
4. eslint-config-alloy

Development

1. Clone this repository
2. Install dependencies by using pnpm install
3. Add rules and test cases, then run tests by using pnpm test

License

MIT License © 2023-PRESENT Rainbow Watcher