一个基本的 .eslintrc 文件配置,适用于 Gatsby 项目:
{
"parser": "babel-eslint",
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended"
],
"plugins": [
"react",
"jsx-a11y"
],
"env": {
"browser": true,
"node": true,
"es6": true
},
"globals": {
"graphql": true
},
"rules": {
"react/prop-types": 0,
"react/jsx-uses-vars": 2,
"react/jsx-uses-react": 2,
"jsx-a11y/anchor-is-valid": [ "error", {
"components": [ "Link" ],
"specialLink": [ "to" ]
}]
}
}
这个配置使用了以下插件和规则:
- `babel-eslint` 解析器,用于解析 ES6 和 JSX 代码
- `eslint:recommended`,基本的 ESLint 规则
- `plugin:react/recommended`,React 相关的规则
- `plugin:jsx-a11y/recommended`,用于检查 JSX 元素的可访问性
- `react` 和 `jsx-a11y` 插件
- `browser`、`node` 和 `es6` 环境
- `graphql` 全局变量
- `react/prop-types` 规则关闭,因为 Gatsby 的组件 props 通常是通过 GraphQL 查询传递的,不需要手动验证
- `react/jsx-uses-vars` 和 `react/jsx-uses-react` 规则启用,用于检测未使用的变量和未导入 React 的问题
- `jsx-a11y/anchor-is-valid` 规则启用,用于检测使用 `<Link>` 组件时的无效链接问题