react native项目配置eslint+prettier

一、创建react native项目

复制代码

pnpm create expo-app --template default@sdk-57

具体参见Expo官网

二、安装prettier和eslint相关依赖

安装prettier相关依赖

javascript 复制代码

pnpm add prettier eslint-config-prettier eslint-plugin-prettier @ianvs/prettier-plugin-sort-imports prettier-plugin-sort-json eslint-plugin-unused-imports prettier-plugin-tailwindcss -D

安装eslint相关依赖

javascript 复制代码

pnpm add -D eslint eslint-config-expo

|------------------------|----------------------------|
| 包 | 作用 |
| eslint | 检查代码问题 |
| eslint-config-expo | Expo/RN/TS 官方规则集 |
| prettier | 格式化 |
| eslint-config-prettier | 关掉和 Prettier 冲突的 ESLint 规则 |
| eslint-plugin-prettier | 把 Prettier 问题当 ESLint 报错 |

可选（你用了 NativeWind/Tailwind）：

复制代码

pnpm add -D prettier-plugin-tailwindcss

三、配置文件

1、eslint.config.js`（项目根目录，Flat Config）

javascript 复制代码

// https://docs.expo.dev/guides/using-eslint/
const { defineConfig } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');
const prettierConfig = require('eslint-config-prettier');
const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
const unusedImports = require('eslint-plugin-unused-imports');
const prettierOptions = require('./prettier.config.js');

module.exports = defineConfig([
  expoConfig,
  prettierConfig,
  eslintPluginPrettierRecommended,
  {
    plugins: {
      'unused-imports': unusedImports,
    },
    rules: {
      '@typescript-eslint/no-unused-vars': 'off',
      'no-unused-vars': 'off',
      'unused-imports/no-unused-imports': 'error',
      'unused-imports/no-unused-vars': [
        'warn',
        {
          vars: 'all',
          varsIgnorePattern: '^_',
          args: 'after-used',
          argsIgnorePattern: '^_',
        },
      ],
      // 显式传入同一份 Prettier 配置，避免编辑器缓存旧 .prettierrc 导致排序打架
      'prettier/prettier': ['error', prettierOptions],
    },
  },
  {
    ignores: ['dist/*', 'android/*', 'ios/*', '.expo/*'],
  },
]);

2、创建prettier.config.js

选用json文件若装了 `prettier-plugin-tailwindcss`：

javascript 复制代码

/** @type {import('prettier').Config} */
module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
  tabWidth: 2,
  endOfLine: 'lf',
  singleAttributePerLine: true,
  // require.resolve: ESLint / pnpm 下也能稳定加载插件
  plugins: [
    require.resolve('@ianvs/prettier-plugin-sort-imports'),
    require.resolve('prettier-plugin-sort-json'),
    require.resolve('prettier-plugin-tailwindcss'),
  ],
  importOrder: [
    '^(react/(.*)$)|^(react$)',
    '^(expo(.*)$)|^(expo$)',
    '<THIRD_PARTY_MODULES>',
    '',
    '^@/(.*)$',
    '^[./]',
  ],
  importOrderParserPlugins: ['typescript', 'jsx'],
  importOrderTypeScriptVersion: '5.0.0',
};

3、 prettier忽略文件 .prettierignore

javascript 复制代码

node_modules
dist
android
ios
.expo
pnpm-lock.yaml
*.lock

可选：`.eslintignore` 在 Flat Config 下一般用 `ignores` 即可，可不单独建。

注释

完成以上配置以后，有时候会出现代码不规范编辑器不爆出红色的现象。这不是编辑器设置的问题，是 ESLint 本身崩了，所以红线出不来。

根本原因：项目装的是 ESLint 10.7.0，而 eslint-config-expo 依赖的 eslint-plugin-react 还不支持 ESLint 10

解决办法：把 ESLint 钉在 9.x（eslint-config-expo 开发用的也是 ^9.18.0）：

javascript 复制代码

pnpm add -D eslint@^9

我目前安装的eslint是^9.39.5

四、文件清单小结

|------------------|----------------------|
| 文件 | 是否需要 |
| eslint.config.js | ✅ 需要 |
| .prettierignore | ✅ 需要 |
| .prettierrc | ✅ 建议有 |
| .eslintrc.js | ❌ SDK 57 用 Flat，不必再加 |

五、最快上手

javascript 复制代码

npx expo lint
npx expo install --dev prettier eslint-config-prettier eslint-plugin-prettier

然后按上面写好 `eslint.config.js` 和 `.prettierrc`，再跑：

```bash

pnpm lint

```