9002887b.64abf249.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{111:function(e,t,n){"use strict";n.d(t,"a",(function(){return u})),n.d(t,"b",(function(){return m}));var r=n(0),a=n.n(r);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=a.a.createContext({}),p=function(e){var t=a.a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},u=function(e){var t=p(e.components);return a.a.createElement(l.Provider,{value:t},e.children)},d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.a.createElement(a.a.Fragment,{},t)}},b=a.a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),u=p(n),b=r,m=u["".concat(s,".").concat(b)]||u[b]||d[b]||i;return n?a.a.createElement(m,o(o({ref:t},l),{},{components:n})):a.a.createElement(m,o({ref:t},l))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,s=new Array(i);s[0]=b;var o={};for(var c in t)hasOwnProperty.call(t,c)&&(o[c]=t[c]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var l=2;l<i;l++)s[l]=n[l];return a.a.createElement.apply(null,s)}return a.a.createElement.apply(null,n)}b.displayName="MDXCreateElement"},112:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/patreon-15b4e66595efdb2e079faf18b89cff7c.png"},116:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/01-a23cc15b10aa8903a2768742f2d5f639.png"},117:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/02-d8f056a9ee77817d5fa34ed27b8a9ded.png"},120:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/03-99e9f84b954c87f14c5b1c2a2fc7beb5.png"},121:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/04-b7fa82403420155f5bc0c2e2b713251f.png"},122:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/05-1c1a60851841e4476b56c3edf139208b.png"},123:function(e,t,n){"use strict";n.r(t),t.default=n.p+"assets/images/06-e6c67e52061de238f27f3c609644f4b9.png"},93:function(e,t,n){"use strict";n.r(t),n.d(t,"frontMatter",(function(){return s})),n.d(t,"metadata",(function(){return o})),n.d(t,"rightToc",(function(){return c})),n.d(t,"default",(function(){return p}));var r=n(3),a=n(8),i=(n(0),n(111)),s={id:"start03",title:"ESLint & Prettierrc",sidebar_label:"ESLint & Prettierrc"},o={unversionedId:"start03",id:"start03",isDocsHomePage:!1,title:"ESLint & Prettierrc",description:"ES Lint plugin - write your code more clean, tells where you are making mistakes, and generally it\u2019s good practice to work in a team so that everyone has everything one style - ES Lint will tell you which variables you don\u2019t use, where and which components you don\u2019t use, it shows syntax errors and where you don't put spaces correctly, where do you put semicolons, etc. That is, this is already a standard defect that you need to use in writing your code and this plugin will save you from many silly mistakes that you make when developing your application.",source:"@site/docs/start03.md",slug:"/start03",permalink:"/docs/start03",editUrl:"https://github.com/facebook/docusaurus/edit/master/website/docs/start03.md",version:"current",sidebar_label:"ESLint & Prettierrc",sidebar:"someSidebar",previous:{title:"Java Script Camp",permalink:"/docs/javascript00"},next:{title:"UI Kit - Unicorn",permalink:"/docs/unicorn00"}},c=[{value:"Install dependencies",id:"install-dependencies",children:[]},{value:"Eslint Rules",id:"eslint-rules",children:[]},{value:"Prettierrc Rules",id:"prettierrc-rules",children:[]},{value:"Editing package.json",id:"editing-packagejson",children:[]},{value:"Transferring App.js",id:"transferring-appjs",children:[]},{value:"Launch the application",id:"launch-the-application",children:[]},{value:"Done \u2705",id:"done-",children:[]}],l={rightToc:c};function p(e){var t=e.components,s=Object(a.a)(e,["components"]);return Object(i.b)("wrapper",Object(r.a)({},l,s,{components:t,mdxType:"MDXLayout"}),Object(i.b)("p",null,Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"https://eslint.org"}),"ES Lint plugin")," - write your code more clean, tells where you are making mistakes, and generally it\u2019s good practice to work in a team so that everyone has everything one style - ES Lint will tell you which variables you don\u2019t use, where and which components you don\u2019t use, it shows syntax errors and where you don't put spaces correctly, where do you put semicolons, etc. That is, this is already a standard defect that you need to use in writing your code and this plugin will save you from many silly mistakes that you make when developing your application."),Object(i.b)("p",null,Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"https://prettier.io/"}),"Prettierrc")," - Code formatting tool with support for many languages, a minimum of configuration and a maximum of imposed rules."),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step01",src:n(116).default})),Object(i.b)("h2",{id:"install-dependencies"},"Install dependencies"),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-bash"})," yarn add eslint eslint-config-airbnb babel-preset-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch babel-core babel-eslint babel-preset-react-native pre-commit prettier prettier-eslint eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-native eslint-plugin-react-hooks --dev\n")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step02",src:n(117).default})),Object(i.b)("h2",{id:"eslint-rules"},"Eslint Rules"),Object(i.b)("p",null,"Add rules to .eslintrc.js"),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"module.exports = {\n  root: true,\n  parser: 'babel-eslint',\n  extends: ['airbnb', 'prettier'],\n  plugins: ['react', 'react-native', 'jsx-a11y', 'import', 'react-hooks'],\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true\n    }\n  },\n  env: {\n    'react-native/react-native': true\n  },\n  rules: {\n    'no-param-reassign': 0,\n    'react-hooks/rules-of-hooks': 'error',\n    'react-hooks/exhaustive-deps': 'warn',\n    'react/jsx-filename-extension': ['off'],\n    'react/jsx-one-expression-per-line': 0,\n    'linebreak-style': ['off'],\n    'implicit-arrow-linebreak': 0,\n    'no-undef': ['error'],\n    'react/sort-comp': ['off'],\n    'react/prefer-stateless-function': ['off'],\n    'react/destructuring-assignment': 1,\n    'function-paren-newline': 0,\n    semi: ['error', 'never'],\n    'spaced-comment': 0,\n    'comma-dangle': ['error', 'never'],\n    'react/prop-types': 0,\n    'no-extra-boolean-cast': 0,\n    'quote-props': 0,\n    'object-curly-spacing': ['error', 'always'],\n    camelcase: 0,\n    'no-nested-ternary': 0,\n    'react/jsx-wrap-multilines': 0,\n    'object-curly-newline': 0,\n    'operator-linebreak': 0,\n    'no-unused-expressions': 0,\n    'global-require': 0,\n    'max-len': 0,\n    'import/no-cycle': 0,\n    'no-underscore-dangle': 0,\n    'no-return-assign': 0,\n    'import/prefer-default-export': 0,\n    'jsx-quotes': ['error', 'prefer-double'],\n    'no-console': 'error',\n    'arrow-parens': 0,\n    'eol-last': 0,\n    'react-native/no-unused-styles': 0,\n    'react-native/split-platform-components': 0,\n    'react-native/no-inline-styles': 0,\n    'react-native/no-color-literals': 0,\n    'react-native/no-raw-text': 0,\n    'consistent-return': 0\n  },\n  settings: {\n    'import/resolver': {\n      node: {\n        extensions: ['.js', '.ios.js', '.android.js']\n      }\n    }\n  }\n}\n")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step03",src:n(120).default})),Object(i.b)("h2",{id:"prettierrc-rules"},"Prettierrc Rules"),Object(i.b)("p",null,"Add rules to .prettierrc.js"),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),"module.exports = {\n  singleQuote: true,\n  printWidth: 120,\n  tabWidth: 2,\n  trailingComma: 'none',\n  bracketSpacing: true,\n  semi: false,\n  useTabs: false,\n  jsxBracketSameLine: false\n}\n")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step04",src:n(121).default})),Object(i.b)("h2",{id:"editing-packagejson"},"Editing package.json"),Object(i.b)("p",null,"Where to add the scripts:"),Object(i.b)("ul",null,Object(i.b)("li",{parentName:"ul"},"Simulator. For me, this is iPhone SE since its screen size is the minimum layout requirement (iPhone 3.4 is already all)"),Object(i.b)("li",{parentName:"ul"},"Linter, which will forbid you to push until all errors in the code are fixed"),Object(i.b)("li",{parentName:"ul"},"Install Pods")),Object(i.b)("pre",null,Object(i.b)("code",Object(r.a)({parentName:"pre"},{className:"language-jsx"}),'  "scripts": {\n    "android": "react-native run-android",\n    "ios": "react-native run-ios --simulator=\'iPhone SE\'",\n    "start": "react-native start",\n    "test": "jest",\n    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",\n    "postinstall":"cd ./ios && pod install && cd .."\n  },\n "precommit": "lint",\n')),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step05",src:n(122).default})),Object(i.b)("h2",{id:"transferring-appjs"},"Transferring App.js"),Object(i.b)("p",null,"Create the ",Object(i.b)("inlineCode",{parentName:"p"},"src")," folder and transfer the App.js file there, renaming it ",Object(i.b)("inlineCode",{parentName:"p"},"src/index.js")),Object(i.b)("p",null,Object(i.b)("img",{alt:"Step06",src:n(123).default})),Object(i.b)("h2",{id:"launch-the-application"},"Launch the application"),Object(i.b)("p",null,Object(i.b)("inlineCode",{parentName:"p"},"yarn start-ios")," or ",Object(i.b)("inlineCode",{parentName:"p"},"yarn start-android")),Object(i.b)("h2",{id:"done-"},"Done \u2705"),Object(i.b)("p",null,Object(i.b)("a",Object(r.a)({parentName:"p"},{href:"https://www.patreon.com/bePatron?u=34467235"}),Object(i.b)("img",{alt:"Become a Patron!",src:n(112).default}))))}p.isMDXComponent=!0}}]);