{"action":"created","issue":{"url":"https://api.github.com/repos/prettier/prettier/issues/2699","repository_url":"https://api.github.com/repos/prettier/prettier","labels_url":"https://api.github.com/repos/prettier/prettier/issues/2699/labels{/name}","comments_url":"https://api.github.com/repos/prettier/prettier/issues/2699/comments","events_url":"https://api.github.com/repos/prettier/prettier/issues/2699/events","html_url":"https://github.com/prettier/prettier/issues/2699","id":253739440,"number":2699,"title":"Inconsistency in single line jsx components","user":{"login":"VladShcherbin","id":6711845,"avatar_url":"https://avatars1.githubusercontent.com/u/6711845?v=4","gravatar_id":"","url":"https://api.github.com/users/VladShcherbin","html_url":"https://github.com/VladShcherbin","followers_url":"https://api.github.com/users/VladShcherbin/followers","following_url":"https://api.github.com/users/VladShcherbin/following{/other_user}","gists_url":"https://api.github.com/users/VladShcherbin/gists{/gist_id}","starred_url":"https://api.github.com/users/VladShcherbin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/VladShcherbin/subscriptions","organizations_url":"https://api.github.com/users/VladShcherbin/orgs","repos_url":"https://api.github.com/users/VladShcherbin/repos","events_url":"https://api.github.com/users/VladShcherbin/events{/privacy}","received_events_url":"https://api.github.com/users/VladShcherbin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2017-08-29T17:13:03Z","updated_at":"2017-08-31T15:26:43Z","closed_at":null,"author_association":"NONE","body":"Here is a single line component, wrapped in parentheses: [prettier playground](https://prettier.io/playground/#%7B%22content%22%3A%22import%20React%20from%20'react'%5Cn%5Cnconst%20FormError%20%3D%20(%7B%20error%20%7D)%20%3D%3E%20(%5Cn%20%20%3Cp%3EI%20am%20a%20very%20very%20very%20very%20very%20very%20long%20text%3C%2Fp%3E%5Cn)%5Cn%5Cnexport%20default%20FormError%5Cn%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Atrue%2C%22trailingComma%22%3A%22none%22%2C%22bracketSpacing%22%3Atrue%2C%22jsxBracketSameLine%22%3Afalse%2C%22parser%22%3A%22babylon%22%2C%22semi%22%3Afalse%2C%22useTabs%22%3Afalse%2C%22doc%22%3Afalse%2C%22ast%22%3Afalse%7D%7D)\r\n\r\n```jsx\r\nconst FormError = ({ error }) => (\r\n  <p>I am a very very very very very very long text</p>\r\n)\r\n```\r\n\r\nHere is the same component with another contents, the parentheses are gone: [prettier playground](https://prettier.io/playground/#%7B%22content%22%3A%22import%20React%20from%20'react'%5Cn%5Cnconst%20FormError%20%3D%20(%7B%20error%20%7D)%20%3D%3E%20(%5Cn%20%20error%20%7C%7C%20%3Cp%3EI%20am%20a%20very%20very%20very%20very%20very%20very%20long%20text%3C%2Fp%3E%5Cn)%5Cn%5Cnexport%20default%20FormError%5Cn%22%2C%22options%22%3A%7B%22printWidth%22%3A80%2C%22tabWidth%22%3A2%2C%22singleQuote%22%3Atrue%2C%22trailingComma%22%3A%22none%22%2C%22bracketSpacing%22%3Atrue%2C%22jsxBracketSameLine%22%3Afalse%2C%22parser%22%3A%22babylon%22%2C%22semi%22%3Afalse%2C%22useTabs%22%3Afalse%2C%22doc%22%3Afalse%2C%22ast%22%3Afalse%7D%7D)\r\n\r\n```jsx\r\nconst FormError = ({ error }) =>\r\n  error || <p>I am a very very very very very very long text</p>\r\n```\r\n\r\nPrettier 1.6.1"},"comment":{"url":"https://api.github.com/repos/prettier/prettier/issues/comments/326331217","html_url":"https://github.com/prettier/prettier/issues/2699#issuecomment-326331217","issue_url":"https://api.github.com/repos/prettier/prettier/issues/2699","id":326331217,"user":{"login":"VladShcherbin","id":6711845,"avatar_url":"https://avatars1.githubusercontent.com/u/6711845?v=4","gravatar_id":"","url":"https://api.github.com/users/VladShcherbin","html_url":"https://github.com/VladShcherbin","followers_url":"https://api.github.com/users/VladShcherbin/followers","following_url":"https://api.github.com/users/VladShcherbin/following{/other_user}","gists_url":"https://api.github.com/users/VladShcherbin/gists{/gist_id}","starred_url":"https://api.github.com/users/VladShcherbin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/VladShcherbin/subscriptions","organizations_url":"https://api.github.com/users/VladShcherbin/orgs","repos_url":"https://api.github.com/users/VladShcherbin/repos","events_url":"https://api.github.com/users/VladShcherbin/events{/privacy}","received_events_url":"https://api.github.com/users/VladShcherbin/received_events","type":"User","site_admin":false},"created_at":"2017-08-31T15:26:43Z","updated_at":"2017-08-31T15:26:43Z","author_association":"NONE","body":"I don't like this one for the same reason:\r\n\r\n```jsx\r\nconst FormError = ({ error }) => (\r\n  <p>I am a very very very very very very long text</p>\r\n)\r\n\r\nconst FormError = ({ error }) => error || (\r\n  <p>I am a very very very very very very long text</p>\r\n)\r\n\r\nconst FormErrorWithMoreParams = ({ error, secondParam, thirdParam  }) => error || (\r\n  <p>I am a very very very very very very long text</p>\r\n)\r\n```\r\n\r\nThese examples are almost the same and if you don't carefully analyze the whole line, you can easily miss the `error ||` part.\r\n\r\nWith component from new line consistency, you can always be sure that the whole component starts at the beginning of the line so you won't miss any part of it.\r\n\r\n```jsx\r\nconst FormError = ({ error }) => (\r\n  error || <p>I am a very very very very very very long text</p>\r\n)\r\n\r\nconst FormErrorWithMoreParams = ({ error, secondParam, thirdParam  }) =>  (\r\n  error || <p>I am a very very very very very very long text</p>\r\n)\r\n```\r\n\r\nWe analyze text from left to right, so it's much easier and faster to analyze the component from the beginning of the line instead of searching where the component starts."}}
{"actor":{"display_login":"VladShcherbin"}}