@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

1. Run init setup script

npx @rainbowatcher/eslint-config

finally it will generate a file 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,
    // ...
})

2. Add script in package.json

For example:

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

3. 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",
    ],
}

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 = {
    tsconfigPath: string
    typeAware?: boolean
}

export type StyleOptions = {
    semi?: boolean
    singleQuote?: boolean
    tabWidth?: number
    trailingComma?: "all" | "none"
    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