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' },},],},},],
});