@persagy2/eslint-plugin/src/config/style.ts

一个适用于 vue3.x、typescript 项目的通用eslint预设插件

/** eslint-disable max-len */

import { Linter } from 'eslint'

import { createConfig } from '../utils/create-config'
import { resolvePrettierConfig } from '../utils/prettier'

/** 检索或使用默认的prettier配置 */
const prettierConfig = await resolvePrettierConfig()

/**
 * 编码风格策略
 *
 * 规则包含:
 *  1. prettier 推荐编码规范
 *  2. 一些保证多人开发一致性的编程范式规则
 */
export const style: Linter.Config = createConfig()
    .extends('plugin:@persagy2/parser')
    .level('warn')
    /**
     * 默认使用prettier的编码风格
     *
     * @description 如果项目中指定有 prettier 的配置文件 (需遵循prettier配置文件名), 那么将采用项目中的配置, 否则使用默认规则
     */
    .rule('prettier/prettier', prettierConfig)

    /* 注释风格 */
    .rule('spaced-comment') // 注释标识符`//`后, 必须要跟1个空格. re: `//aaa` -> `// aaa`
    .rule('lines-around-comment', { beforeBlockComment: true }) // 建议行注释上面要空一行. re:`// xxx \n func()` -> `\n // xxx \n func()`

    /** import 导入语句顺序 */
    .rule('sort-imports', {
        ignoreCase: true,
        ignoreDeclarationSort: true,
        memberSyntaxSortOrder: ['none', 'all', 'single', 'multiple'],
        allowSeparatedGroups: true
    })
    .rule('vue/prefer-import-from-vue') // 建议从"vue"导入，而不是从"@vue/*"导入（在 Vue.js 3.0.0+ 中）, re: `import { createApp } from '@vue/runtime-dom'` -> `import { createApp } from 'vue'`

    /* 方法变量定义 */
    .rule('prefer-arrow-callback') // 建议优先使用箭头函数回调, 而不是 function
    .rule('one-var', 'never') // 使用单独的 let、const 声明变量. re: `let a, b` -> `let a; let b;`

    /** 更精简的逻辑运算 */
    .rule('no-unneeded-ternary') // 当存在更简单的替代方案时，不允许使用三元运算符. re: `a === 1 ? true : false` -> `a === 1`
    .rule('@typescript-eslint/prefer-optional-chain') // 建议使用 `?.` 而不是一串非空判断

    /** 避免容易误解的语法 */
    .rule('yoda') // 禁止yoda条件 re: `'red' === color` -> `color === 'red'`
    .rule('@typescript-eslint/no-array-constructor') // 禁止使用 泛型 Array 构造函数创建数组
    .rule('@typescript-eslint/array-type') // 要求数组类型均采用 Array<T> 定义

    /* vue */
    .rule('vue/html-end-tags') // 强制统一的 html 标签样式 (标签必须闭合)
    .rule('vue/attribute-hyphenation') // 推荐使用 camecase 风格的属性 good: :my-prop , bad: :myProp
    .rule('vue/component-definition-name-casing', 'PascalCase') // 建议 vue 组件命名采用 `PascalCase` 风格, 且与文件名保持一致

    .config()