react native项目配置eslint+prettier

一、创建react native项目pnpm create expo-app --template defaultsdk-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包作用eslint检查代码问题eslint-config-expoExpo/RN/TS 官方规则集prettier格式化eslint-config-prettier关掉和 Prettier 冲突的 ESLint 规则eslint-plugin-prettier把 Prettier 问题当 ESLint 报错可选你用了 NativeWind/Tailwindpnpm 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忽略文件 .prettierignorenode_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.xeslint-config-expo开发用的也是^9.18.0pnpm add -D eslint^9我目前安装的eslint是^9.39.5四、文件清单小结文件是否需要eslint.config.js✅ 需要.prettierignore✅ 需要.prettierrc✅ 建议有.eslintrc.js❌ SDK 57 用 Flat不必再加五、最快上手npx expo lint npx expo install --dev prettier eslint-config-prettier eslint-plugin-prettier然后按上面写好 eslint.config.js 和 .prettierrc再跑bashpnpm lint