Fresh RN projects fails ESLint / Prettier by default #25478

jpdriver · 2019-07-03T16:54:04Z

Summary

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

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

With these changes

Brand new projects will not produce lint errors out of the box

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.

cpojer · 2019-07-04T10:13:38Z

Ideally we won't change the default and instead fix up the eslint config so that this problem doesn't happen. Could you make that change?

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.

SpaghettiC0des · 2019-07-04T11:02:36Z

Adding .prettierrc solves my problem

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "singleQuote": true
}

sunnylqm

@jpdriver Can you update the template as well?

satya164 · 2019-07-09T10:39:13Z

I think we should add a .prettierc.json by default to the template

cpojer · 2019-07-09T10:46:44Z

Yes let's do that!

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.

analysis-bot · 2019-07-09T16:15:02Z

template/_prettierrc.js

+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'es5'


comma-dangle: Missing trailing comma.

jpdriver · 2019-07-09T16:15:09Z

added a .prettierrc as per @satya164 's suggestion.

I did this as a .js using module.exports so it matches the corresponding default .eslintrc.js.

with a few minimal rules we're able to lint the HelloWorld template with no template changes ✨

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.

analysis-bot

Code analysis results:

eslint found some issues. Run yarn lint --fix to automatically fix problems.

analysis-bot · 2019-07-09T16:29:45Z

template/_prettierrc.js

+  'trailingComma': 'all',
+  'bracketSpacing': false,
+  'jsxBracketSameLine': true,
+}


semi: Missing semicolon.

cpojer · 2019-07-10T13:50:50Z

Can you run prettier? :)

jpdriver · 2019-07-12T14:48:23Z

@cpojer I think everything's ready and this can be landed now. Sorry I made the PR a little messy -- happy to open a fresh one if needed..

cpojer

Thanks!

facebook-github-bot

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

keshav00001 · 2019-07-14T04:20:39Z

hi......
i am following your suggestion but i am getting same issue.

facebook-github-bot

@cpojer has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

facebook-github-bot

@cpojer has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

react-native-bot · 2019-07-15T09:15:07Z

This pull request was successfully merged by @jpdriver in 7254bab.

^{When will my fix make it into a release? | Upcoming Releases}

RobinCsl · 2019-07-15T15:35:22Z

@cpojer Would it be necessary to add prettierrc.js to this list in @react-native-community/cli too so that _prettierrc.js gets renamed to .prettierrc.js?

Results of `./cli.js init --template=file:///path/to/react-native TestProject`

BEFORE patching node_modules/@react-native-community/cli/build/commands/init/editTemplate.js

AFTER patching node_modules/@react-native-community/cli/build/commands/init/editTemplate.js by adding 'prettierrc.js' to the list UNDERSCORED_DOTFILES

satya164 · 2019-07-15T15:45:40Z

@RobinCsl will be great if you can send a PR

In facebook/react-native@65eea9d, the prettier config for ESLint has been extracted to a .prettierrc file. It was however not added to the React Native `template` folder and this was causing linting issues in newly generated RN apps. In that [PR](facebook/react-native#25478) to `react-native`, a `_prettierrc.js` file was added to the `template` folder, however, a newly generated project would have the file still underscored (see facebook/react-native#25478 (comment)) This commit addresses that issue by adding `prettierrc.js` to the list of underscored files that need to be renamed to dotfiles.

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

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 3, 2019

analysis-bot suggested changes Jul 3, 2019

View reviewed changes

analysis-bot suggested changes Jul 4, 2019

View reviewed changes

sunnylqm suggested changes Jul 9, 2019

View reviewed changes

analysis-bot suggested changes Jul 9, 2019

View reviewed changes

add default .prettierrc for HelloWorld template

94822a5

cpojer approved these changes Jul 12, 2019

View reviewed changes

facebook-github-bot approved these changes Jul 12, 2019

View reviewed changes

facebook-github-bot reviewed Jul 15, 2019

View reviewed changes

Update _prettierrc.js

ffefd73

facebook-github-bot reviewed Jul 15, 2019

View reviewed changes

facebook-github-bot closed this in 7254bab Jul 15, 2019

react-native-bot added the Merged This PR has been merged. label Jul 15, 2019

ecreeth mentioned this pull request Jul 15, 2019

create new app i am getting this error #25638

Closed

RobinCsl mentioned this pull request Jul 15, 2019

feat: support .prettierrc.js dotfile in legacy init templates react-native-community/cli#535

Merged

kelset mentioned this pull request Jul 15, 2019

0.60.6 Discussion react-native-community/releases#130

Closed

Fresh RN projects fails ESLint / Prettier by default #25478

Fresh RN projects fails ESLint / Prettier by default #25478

Uh oh!

Conversation

jpdriver commented Jul 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changelog

Test Plan

Without these changes

With these changes

Uh oh!

analysis-bot left a comment

Choose a reason for hiding this comment

Uh oh!

cpojer commented Jul 4, 2019

Uh oh!

analysis-bot left a comment

Choose a reason for hiding this comment

Uh oh!

SpaghettiC0des commented Jul 4, 2019

Uh oh!

sunnylqm left a comment

Choose a reason for hiding this comment

Uh oh!

satya164 commented Jul 9, 2019

Uh oh!

cpojer commented Jul 9, 2019

Uh oh!

analysis-bot left a comment

Choose a reason for hiding this comment

Uh oh!

analysis-bot Jul 9, 2019

Choose a reason for hiding this comment

Uh oh!

jpdriver commented Jul 9, 2019

Uh oh!

analysis-bot left a comment

Choose a reason for hiding this comment

Uh oh!

analysis-bot left a comment

Choose a reason for hiding this comment

Uh oh!

analysis-bot Jul 9, 2019

Choose a reason for hiding this comment

Uh oh!

cpojer commented Jul 10, 2019

Uh oh!

jpdriver commented Jul 12, 2019

Uh oh!

cpojer left a comment

Choose a reason for hiding this comment

Uh oh!

facebook-github-bot left a comment

Choose a reason for hiding this comment

Uh oh!

keshav00001 commented Jul 14, 2019

Uh oh!

facebook-github-bot left a comment

Choose a reason for hiding this comment

Uh oh!

facebook-github-bot left a comment

Choose a reason for hiding this comment

Uh oh!

react-native-bot commented Jul 15, 2019

Uh oh!

RobinCsl commented Jul 15, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Results of ./cli.js init --template=file:///path/to/react-native TestProject

Uh oh!

satya164 commented Jul 15, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

jpdriver commented Jul 3, 2019 •

edited

Loading

RobinCsl commented Jul 15, 2019 •

edited

Loading

Results of `./cli.js init --template=file:///path/to/react-native TestProject`