Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fresh RN projects fails ESLint / Prettier by default #25477

Closed
JonnyBurger opened this issue Jul 3, 2019 · 9 comments
Closed

Fresh RN projects fails ESLint / Prettier by default #25477

JonnyBurger opened this issue Jul 3, 2019 · 9 comments
Labels
Bug

Comments

@JonnyBurger
Copy link
Contributor

React Native version:
0.60.0

Steps To Reproduce

  1. Create new project react-native init rn60stable && cd rn60stable
  2. Run npm run lint

Describe what you expected to happen:

  • No errors

Snack, code example, or link to a repository:

  • Output:
/Users/jonnyburger/rn60stable/App.js
   9:16  error  Replace `Fragment}·from·'react'` with `·Fragment·}·from·"react"`                              prettier/prettier
  16:12  error  Delete `,`                                                                                    prettier/prettier
  17:8   error  Replace `'react-native'` with `"react-native"`                                                prettier/prettier
  24:21  error  Delete `,`                                                                                    prettier/prettier
  25:8   error  Replace `'react-native/Libraries/NewAppScreen'` with `"react-native/Libraries/NewAppScreen"`  prettier/prettier
  34:36  error  Insert `⏎········`                                                                            prettier/prettier
  72:36  error  Delete `,`                                                                                    prettier/prettier
  75:34  error  Delete `,`                                                                                    prettier/prettier
  79:26  error  Delete `,`                                                                                    prettier/prettier
  83:17  error  Replace `'600'` with `"600"`                                                                  prettier/prettier
  84:24  error  Delete `,`                                                                                    prettier/prettier
  89:17  error  Replace `'400'` with `"400"`                                                                  prettier/prettier
  90:23  error  Delete `,`                                                                                    prettier/prettier
  93:17  error  Replace `'700',` with `"700"`                                                                 prettier/prettier
  94:4   error  Delete `,`                                                                                    prettier/prettier

/Users/jonnyburger/rn60stable/__tests__/App-test.js
   5:8   error  Replace `'react-native'` with `"react-native"`                prettier/prettier
   6:19  error  Replace `'react'` with `"react"`                              prettier/prettier
   7:17  error  Replace `'../App'` with `"../App"`                            prettier/prettier
  10:22  error  Replace `'react-test-renderer'` with `"react-test-renderer"`  prettier/prettier
  12:4   error  Replace `'renders·correctly'` with `"renders·correctly"`      prettier/prettier

/Users/jonnyburger/rn60stable/babel.config.js
  2:13  error  Replace `'module:metro-react-native-babel-preset'],` with `"module:metro-react-native-babel-preset"]`  prettier/prettier

/Users/jonnyburger/rn60stable/index.js
  5:9   error  Replace `AppRegistry}·from·'react-native'` with `·AppRegistry·}·from·"react-native"`      prettier/prettier
  6:17  error  Replace `'./App'` with `"./App"`                                                          prettier/prettier
  7:9   error  Replace `name·as·appName}·from·'./app.json'` with `·name·as·appName·}·from·"./app.json"`  prettier/prettier

/Users/jonnyburger/rn60stable/metro.config.js
  13:30  error  Delete `,`  prettier/prettier
  14:8   error  Delete `,`  prettier/prettier
  15:7   error  Delete `,`  prettier/prettier
  16:4   error  Delete `,`  prettier/prettier

Maybe there should be a prettier config? Or no prettier integration at all?
However, that there can be lint errors in a fresh projects does not seem right.
@JonnyBurger JonnyBurger added the Bug label Jul 3, 2019
@jpdriver jpdriver mentioned this issue Jul 3, 2019
Closed
@glaydsoncosta
Copy link

Same error over here. Fresh project came up with all these errors.

@keshav00001
Copy link

Please help , create new app , I am getting
image

@keshav00001
Copy link

React Native version:
0.60.0

Steps To Reproduce

  1. Create new project react-native init rn60stable && cd rn60stable
  2. Run npm run lint

Describe what you expected to happen:

  • No errors

Snack, code example, or link to a repository:

  • Output:
/Users/jonnyburger/rn60stable/App.js
   9:16  error  Replace `Fragment}·from·'react'` with `·Fragment·}·from·"react"`                              prettier/prettier
  16:12  error  Delete `,`                                                                                    prettier/prettier
  17:8   error  Replace `'react-native'` with `"react-native"`                                                prettier/prettier
  24:21  error  Delete `,`                                                                                    prettier/prettier
  25:8   error  Replace `'react-native/Libraries/NewAppScreen'` with `"react-native/Libraries/NewAppScreen"`  prettier/prettier
  34:36  error  Insert `⏎········`                                                                            prettier/prettier
  72:36  error  Delete `,`                                                                                    prettier/prettier
  75:34  error  Delete `,`                                                                                    prettier/prettier
  79:26  error  Delete `,`                                                                                    prettier/prettier
  83:17  error  Replace `'600'` with `"600"`                                                                  prettier/prettier
  84:24  error  Delete `,`                                                                                    prettier/prettier
  89:17  error  Replace `'400'` with `"400"`                                                                  prettier/prettier
  90:23  error  Delete `,`                                                                                    prettier/prettier
  93:17  error  Replace `'700',` with `"700"`                                                                 prettier/prettier
  94:4   error  Delete `,`                                                                                    prettier/prettier

/Users/jonnyburger/rn60stable/__tests__/App-test.js
   5:8   error  Replace `'react-native'` with `"react-native"`                prettier/prettier
   6:19  error  Replace `'react'` with `"react"`                              prettier/prettier
   7:17  error  Replace `'../App'` with `"../App"`                            prettier/prettier
  10:22  error  Replace `'react-test-renderer'` with `"react-test-renderer"`  prettier/prettier
  12:4   error  Replace `'renders·correctly'` with `"renders·correctly"`      prettier/prettier

/Users/jonnyburger/rn60stable/babel.config.js
  2:13  error  Replace `'module:metro-react-native-babel-preset'],` with `"module:metro-react-native-babel-preset"]`  prettier/prettier

/Users/jonnyburger/rn60stable/index.js
  5:9   error  Replace `AppRegistry}·from·'react-native'` with `·AppRegistry·}·from·"react-native"`      prettier/prettier
  6:17  error  Replace `'./App'` with `"./App"`                                                          prettier/prettier
  7:9   error  Replace `name·as·appName}·from·'./app.json'` with `·name·as·appName·}·from·"./app.json"`  prettier/prettier

/Users/jonnyburger/rn60stable/metro.config.js
  13:30  error  Delete `,`  prettier/prettier
  14:8   error  Delete `,`  prettier/prettier
  15:7   error  Delete `,`  prettier/prettier
  16:4   error  Delete `,`  prettier/prettier

Maybe there should be a prettier config? Or no prettier integration at all?
However, that there can be lint errors in a fresh projects does not seem right.

How did You solve this problem?

@glaydsoncosta
Copy link

Reading another thread I figured out that another people are facing the same issue, and the problem is related with the RN 0.60 templates.

In this case I solved the problem creating a custom “eslintrc.js” with the correct rules.

Hope RN core team solve the problem asap.

@0xinhua
Copy link

0xinhua commented Jul 18, 2019

How to solve this problem? I use the RN 0.60, the same problem by using npm run lint. any suggestion ?

@AlbertVilaCalvo
Copy link

@M1sery see this solution: #25840 (comment)

@0xinhua
Copy link

0xinhua commented Aug 2, 2019

@AlbertVilaCalvo Thanks

grabbou pushed a commit that referenced this issue Aug 7, 2019
@grabbou
Fresh RN projects fails ESLint / Prettier by default (#25478)
f4d5e8c 
Summary:
Fixes #25477

This PR adds a `.prettierrc.js` config file to the HelloWorld template.

`eslint-config-react-native-community` includes custom settings for some rules which conflict with Prettier's default settings.

Consequently, if you run `eslint` immediately after scaffolding a new app you get errors (see linked issue).

This PR configures Prettier to be compatible with both the existing ESLint config and the existing project template (with no code changes to the latter).

## Changelog

[General] [Changed] - Added a default Prettier config for new projects
Pull Request resolved: #25478

Test Plan:
- The following screenshots show the output of `yarn lint` before and after these changes
- These were run immediate after running `npx react-native-cli init RN060`

### Without these changes

- Linting errors on new projects
- Unfixable automatically due to conflicting rules
<img width="1116" alt="Screenshot 2019-07-03 at 17 44 55" src="https://user-images.githubusercontent.com/2393035/60610078-f6b44d00-9dba-11e9-826f-1524b949e4fd.png">
<img width="1116" alt="Screenshot 2019-07-03 at 17 45 07" src="https://user-images.githubusercontent.com/2393035/60610085-fb790100-9dba-11e9-9a9c-33f4cfefd51e.png">

### With these changes

- Brand new projects will not produce lint errors out of the box
<img width="1116" alt="Screenshot 2019-07-03 at 17 48 25" src="https://user-images.githubusercontent.com/2393035/60610266-57dc2080-9dbb-11e9-8a55-fd09f3549c17.png">

Differential Revision: D16223094

Pulled By: cpojer

fbshipit-source-id: bd2c00b1fcf27b1afcad8c18b357b95a3900bdf7
@regalstreak
Copy link
Contributor

Disable prettier this way in your .eslint.js

module.exports = {
  // ...
  extends: '@react-native-community',
  rules: {
    'prettier/prettier': 0,
  },
  // ...
};

@JonnyBurger
Copy link
Contributor Author

Looks like it’s fixed in 0.60.5!
Thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fresh RN projects fails ESLint / Prettier by default
6 participants
@JonnyBurger @AlbertVilaCalvo @glaydsoncosta @regalstreak @0xinhua @keshav00001