ESLint检测VUE和JSON文件

   ESLint 默认只支持检测JS文件中的文件，无法识别其它类型的文件，如果需要检测其它类型的文件就需要安装并指定对应的处理器，有点类似webpack的loader

处理vue文件

使用ESLint默认的处理器处理Vue文件大多数情况下会收到一个这样的错误。

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

这个时候就需要安装官方提供的对应的插件eslint-plugin-vue

pnpm i -D eslint-plugin-vue

然后在配置文件中添加

module.exports = {
 ...
  extends: ['plugin:vue/recommended'],
  ...
}

这个插件提供的配置文件中为.vue 文件指定了对应的处理器，同时通过recommended 开启了官方推荐的一些规则。也可以自行选择一些其它规则。

处理JSON文件

没有安装的时候，ESLint 处理JSON 文件一般会报下面这个错误，即解析错误。

Parsing error: Unexpected token :

所以需要处理JSON文件，首先要给ESLint 指定正确的处理器来处理JSON文件。eslint-plugin-jsonc这个插件和vue的插件一样在内部配置了对应的处理器，也有许多的规则可以使用

pnpm i -D eslint-plugin-jsonc

然后在配置文件中添加

module.exports = {
 ...
  extends: ['plugin:vue/recommended',"plugin:jsonc/recommended-with-jsonc"],
  ...
}

如果在外部指定了其它的处理器，需要通过override来为JSON文件指定处理器。

module.exports = {
  // ...
  extends: ["plugin:jsonc/recommended-with-jsonc"],
  // ...
  parser: "@babel/eslint-parser",
  // Add an `overrides` section to add a parser configuration for json.
  overrides: [
    {
      files: ["*.json", "*.json5", "*.jsonc"],
      parser: "jsonc-eslint-parser",
    },
  ],
  // ...
};

指定package.json 文件里面的属性顺序

eslint-plugin-jsonc 中包含的jsonc/sort-keys 规则可以用来指定JSON对象中属性的顺序

const { defineConfig } = require("eslint-define-config");

module.exports = defineConfig({
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:jsonc/recommended-with-jsonc",
  ],
  overrides: [
    {
      files: ["package.json"],
      rules: {
        "jsonc/sort-keys": [
          "error",
          {
            pathPattern: "^$",  // 命中根属性
            order: [
              "name",
              "version",
              "private",
              "packageManager",
              "description",
              "type",
              "keywords",
              "homepage",
              "bugs",
              "license",
              "author",
              "contributors",
              "funding",
              "files",
              "main",
              "module",
              "exports",
              "unpkg",
              "jsdelivr",
              "browser",
              "bin",
              "man",
              "directories",
              "repository",
              "publishConfig",
              "scripts",
              "peerDependencies",
              "peerDependenciesMeta",
              "optionalDependencies",
              "dependencies",
              "devDependencies",
              "engines",
              "config",
              "overrides",
              "pnpm",
              "husky",
              "lint-staged",
              "eslintConfig",
            ],
          },
          {
            pathPattern: '^(?:dev|peer|optional|bundled)?[Dd]ependencies$',
            order: { type: 'asc' },
          },
        ],
      },
    },
  ],
});