React Native新手配置ESLint双引号规则仍触发单引号错误求助

可能的原因 #

• 多配置文件冲突：你同时存在.eslintrc、.eslintrc.js、.eslintrc.json三个ESLint配置文件，ESLint会按优先级加载（.eslintrc.js优先级最高），不同文件的规则可能互相覆盖，导致你的双引号配置未生效。
• 继承规则覆盖自定义设置：@react-native-community/eslint-config可能集成了其他规则集（比如你依赖的eslint-config-airbnb默认要求单引号），继承规则的优先级高于你自定义的quotes规则，从而触发错误。
• Prettier与ESLint规则矛盾：你安装了Prettier但未协调两者的规则，如果Prettier默认使用单引号，会和ESLint的双引号配置冲突，导致报错。

解决步骤 #

1. 清理冗余配置文件 #

删除.eslintrc和.eslintrc.json，只保留.eslintrc.js，避免多文件规则冲突。

2. 强制覆盖继承的引号规则 #

修改.eslintrc.js，确保quotes规则明确设置，同时补充必要的环境和插件配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    amd: true,
    node: true,
    "react-native/react-native": true
  },
  root: true,
  extends: ["@react-native-community"],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["react", "react-native"],
  rules: {
    "quotes": [2, "double", { "avoidEscape": true }],
  },
};

3. 协调Prettier与ESLint规则 #

安装协调插件：

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

修改.eslintrc.js的extends字段，加入Prettier配置：

extends: ["@react-native-community", "plugin:prettier/recommended"],

创建.prettierrc文件，设置双引号：

{
  "singleQuote": false,
  "jsxSingleQuote": false
}

4. 验证配置 #

运行lint命令测试：

npm run lint

若仍有问题，可查看最终生效的规则：

eslint --print-config .eslintrc.js | grep -A 5 quotes

确认输出的规则是否为你设置的双引号配置。

内容的提问来源于stack exchange，提问作者Mohammed Ahmed