react native项目配置eslint+prettier

一、创建react native项目

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

具体参见Expo官网

二、安装prettier和eslint相关依赖

安装prettier相关依赖

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相关依赖

pnpm add -D eslint eslint-config-expo

可选（你用了 NativeWind/Tailwind）：

pnpm add -D prettier-plugin-tailwindcss

三、配置文件

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

// 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`：

/** @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

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）：

pnpm add -D eslint@^9

我目前安装的eslint是^9.39.5

四、文件清单小结

五、最快上手

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

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

```bash
pnpm lint
```