给 eslint 写一个插件

$ yarn add --dev eslint

$ yarn eslint --init

module.exports = {
  extends: 'eslint:recommended',
}

module.exports = {
  extends: [
    'standard',
    // 加上 prettier 的配置，关掉部份样式检查，顺序很重要
    'prettier',
    'prettier/standard',
    // 如果是插件提供的配置项需要以 `plugin:` 开始
    'plugin:eslint-comments/recommended',
  ],
  // 额外的规则，这里也可以决定是否要关掉某些规则
  rules: {
    // 设置 plugin `eslint-plugin-simple-import-sort` 的 `sort` 规则是 `error`，也就是不符合时是会报错的
    // 另外还可以设置为 `warn` 只警告，或是 `off` 关掉
    // 有的规则也有选项，这是就要用 ['error', {<options>}] 这种像 babel 的格式了
    'simple-import-sort/sort': 'error',
  },
  // 配置指定的环境，这会影响到判断哪些是全局变量
  env: {
    browser: true
  },
  // 设置 eslint 自己的 parser 用的是哪一版本的 js ，一般设置为 eslint --init 就行了
  parserOptions: {
    ecmaVersion: 12,
  },
}

export default {
  name: 'Foo',

  props: {},

  data: () => ({}),
}

module.exports = {
  meta: {
    // 可以被修复的规则一定要定义，这里除了 'whitespace' 外还有 'code' ，不过知识分类上的问题
    // 这里因为是要加换行，所以选 'whitespace'
    fixable: 'whitespace',
    // 可以定义可能会出现的信息，这就可以进行统一管理。这是 eslint 的推荐做法
    // 你也可以直接把数据写在 context.report
    messages: {
      requireNewline: 'require newline between',
    },
  },
  create: function (context) {
    return {
      ObjectExpression(node) {
        if (
          // 判断副节点是否为 export default
          node.parent.type === 'ExportDefaultDeclaration' ||
          // 或父节点是 `Vue.extend`
          (node.parent.type === 'CallExpression' && isVueExtend(node.parent.callee))
        ) {
          // 得到 source code 对象，后面的 fixer 需要用到
          const sourceCode = context.getSourceCode()
          // 用 for 循环把对象的属性每两个氛围一组，检查中间有没有加空行
          for (let i = 0; i < node.properties.length - 1; ++i) {
            // 这里的判断方法很简单，上一个属性结尾的行号必须与下一个属性结尾的行号相差 2 以上
            // 也就是中间有两个以上的空行
            if (node.properties[i + 1].loc.start.line - node.properties[i].loc.end.line < 2) {
              context.report({
                // 用预先定义的数据
                messageId: 'requireNewline',
                // 或是你可以直接把数据写进来
                // message: 'require newline between',
                // 指定出错的位置，因为是在两个属性之间，所以就用上一个的 end 与后一个的 start 来指定
                loc: {
                  start: node.properties[i].loc.end,
                  end: node.properties[i + 1].loc.start,
                },
                // 如果出错的位置正好是某个 AST 的节点，那也可以传入节点
                // node: node
                fix(fixer) {
                  // 这里是自动修复的部分稍后再加上
                },
              })
            }
          }
        }
      },
    }
  },
}

// eslint 的 Linter
const { Linter } = require('eslint')
// 我们要定义的规则
const rule = require('./space-between-properties')

const linter = new Linter()

// 为规则设定一个 id
const id = 'space-between-properties'
// 加入规则定义，也就是上面的那个东西
linter.defineRule(id, rule)

// 执行规则
const res = linter.verify(
  `
export default {
  name: 'Foo',
  props: {},
}
`,

  {
    rules: {
      [id]: 'error',
    },
    parserOptions: {
      sourceType: 'module',
      ecmaVersion: 2015,
    },
  }
)

// 如果有错误的话就打印出来
if (res.length) {
  console.log(res)
}

// 接上面的 fix 部份
fix(fixer) {
  // 取得两个节点中间的 token
  const tokens = sourceCode.getTokensBetween(node.properties[i], node.properties[i + 1])
  // “通常”中间只会有逗号，所以唯一的节点就是逗号
  const comma = tokens[0]
  // 要求 eslint 在都好后面加上换行
  return fixer.insertTextAfterRange(comma.range, '\n')
}