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' },
},
],
},
},
],
});
精彩链接
您阅读本篇文章共花了：
发表评论