[0.77.0] .prettierrc.js options not working anymore

[flixyudh]

Description

I've a default config for prettier, and I want to show an eslint error if the code is not following prettier config. but I notice that .prettierrc.js is not working. is it expected behavior or does the .prettierrc.js is not needed anymore?

Steps to reproduce

1. init project npx @react-native-community/cli@latest init prettierError
2. add the following config into .prettierrc.js

module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: true,
  bracketSpacing: false,
  singleQuote: true,
  jsxSingleQuote: true, // <<< new option
  singleAttributePerLine: true, // <<< new option
  trailingComma: 'all',
};

3. copy this code into App.tsx

import React from 'react';
import {View, useWindowDimensions, Text, SafeAreaView} from 'react-native';

const App = props => {
  const {width, height} = useWindowDimensions();
  const a = "WAKWAW"

  React.useEffect(() => {}, []);

  return (
    <SafeAreaView style={{flex: 1}} id="wakwaw">
      <Text>App</Text>
    </SafeAreaView>
  );
};

App.displayName = 'App';

export default App;

4. run npx prettier App.tsx --config-precedence=file-override --check --loglevel=debug (add --write argument to run the formatter)

React Native Version

0.77.0

Affected Platforms

Other (please specify)

Output of npx react-native info

failed running `npx react-native info` using `Template Reproducer`


> npx react-native info

⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }

Stacktrace or Logs

VSCode

Reproducer

https://github.com/flixyudh/prettierError

Screenshots and Videos

No response

[Pnlvfx]

they use both prettier and prettier inside eslint, and it surely make conflict, i think they don't care a lot about those thing as they don't update prettier/eslint from at least 1 year, despite react native has made really a lot of improvements from when I left it, I've seen that they use the same version of prettier and eslint that i was using more than 1 year ago, pretty sad but it is what it is.

[Shmublon]

+1

[divyangkhatri]

+1

[flixyudh]

I managed to fix it using this step

1. run yarn add -D eslint-plugin-prettier
2. edit .eslintrc.js file to:

 module.exports = {
   root: true,
-  extends: '@react-native',
+  extends: ["@react-native", "plugin:prettier/recommended"],
+  rules: {
+    "prettier/prettier": "error",
+  },
 };

3. run node_modules/.bin/eslint .

fixed result:

   2:9   error    'View' is defined but never used                                                            @typescript-eslint/no-unused-vars
   4:13  error    'props' is defined but never used. Allowed unused args must match /^_/u                     @typescript-eslint/no-unused-vars
   5:10  error    'width' is assigned a value but never used                                                  @typescript-eslint/no-unused-vars
   5:17  error    'height' is assigned a value but never used                                                 @typescript-eslint/no-unused-vars
   6:9   error    'a' is assigned a value but never used                                                      @typescript-eslint/no-unused-vars
   6:13  error    Replace `"WAKWAW"` with `'WAKWAW';`                                                         prettier/prettier
  11:18  error    Replace `·style={{flex:·1}}·id="wakwaw"` with `⏎······style={{flex:·1}}⏎······id='wakwaw'`  prettier/prettier
  11:26  warning  Inline style: { flex: 1 }                                                                   react-native/no-inline-styles
  19:20  error    Insert `⏎`                                                                                  prettier/prettier

@cortinico could react-native template add .vscode folder with settings.json value "eslint.useFlatConfig": false as default? because RN not supported yet to use new eslint flat config. this make sure the eslint error also appear on vscode editor.

without .vscode settings.json

using .vscode settings.json