{"id":7219,"date":"2019-06-15T15:58:18","date_gmt":"2019-06-15T15:58:18","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7219"},"modified":"2019-06-15T15:59:31","modified_gmt":"2019-06-15T15:59:31","slug":"prettier-with-eslint","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/prettier-with-eslint\/","title":{"rendered":"Prettier with ESLint"},"content":{"rendered":"<p><a href=\"https:\/\/prettier.io\/\" rel=\"noopener noreferrer\" target=\"_blank\">Prettier<\/a> is (as it says on their website) am opiniated code formatter.<\/p>\n<p>To begin with I&#8217;m going to extend the code from the last post  <a href=\"http:\/\/putridparrot.com\/blog\/eslint-with-airbnb-rules\/\" rel=\"noopener noreferrer\" target=\"_blank\">ESLint with airbnb rules<\/a>. Carry out the following steps<\/p>\n<ul>\n<li>yarn add prettier -D<\/li>\n<li>yarn add eslint-config-prettier -D\n<p>This line will disable rules that conflict with Prettier\n<\/li>\n<li>yarn add eslint-plugin-prettier -D>\n<li>\n<li>Open .eslintc.js and update\/add the following value to each key\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nplugins: &#x5B;'prettier']\r\n\r\nextends: &#x5B;\r\n   'prettier',\r\n   'plugin:prettier\/recommended'\r\n]\r\n\r\nrules:  {\r\n   'prettier\/prettier': 'error'\r\n}\r\n<\/pre>\n<\/li>\n<li>Run <em>yarn lint<\/em> which we added in the <a href=\"http:\/\/putridparrot.com\/blog\/eslint-with-airbnb-rules\/\" rel=\"noopener noreferrer\" target=\"_blank\">ESLint with airbnb rules<\/a> post.\n<\/ul>\n<p>The first thing you might notice, as I did, that the ESLint rules required a single quote for strings whereas Prettier requires double quotes, obviously this is not too good if you started running this tool against existing projects, so we want a way to disable such rules in Prettier. <\/p>\n<p>Create a file named .prettierrc.js and place the following code in it<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nmodule.exports = {\r\n    singleQuote: true\r\n};\r\n<\/pre>\n<p><em>See <a href=\"https:\/\/prettier.io\/docs\/en\/configuration.html\" rel=\"noopener noreferrer\" target=\"_blank\">Prettier configuration<\/a> for more info.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prettier is (as it says on their website) am opiniated code formatter. To begin with I&#8217;m going to extend the code from the last post ESLint with airbnb rules. Carry out the following steps yarn add prettier -D yarn add eslint-config-prettier -D This line will disable rules that conflict with Prettier yarn add eslint-plugin-prettier -D> [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[254,255],"tags":[],"class_list":["post-7219","post","type-post","status-publish","format-standard","hentry","category-eslint","category-prettier"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7219"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7219\/revisions"}],"predecessor-version":[{"id":7221,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7219\/revisions\/7221"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}