一个基本的 .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` 规则启用,用于检测使用 `` 组件时的无效链接问题