Fix docs, prettier, typo in README and apply format (#11)

* chore(devDependencies): Add eslint-plugin-prettier and pin versions

* chore(docs): Add packages versions and fix typo on Contributing section

* chore(prettier): Add scripts and extensions for prettier

* chore(eslintrc): Extends from prettier

* chore(README): Add scripts to prettier bin

* refactor(App): Format files and update features list

* chore: Remove .gitignore and refactor test

* fix(lint): Remove prettier/react

Author: lucianomlima

.eslintrc

@@ -4,16 +4,12 @@
     "jest": true,
     "react-native/react-native": true
   },
-  "extends": ["airbnb", "plugin:react/recommended"],
+  "extends": ["airbnb", "plugin:react/recommended", "prettier"],
   "globals": {
     "__DEV__": false
   },
   "parser": "babel-eslint",
-  "plugins": [
-    "react",
-    "react-native",
-    "prettier"
-  ],
+  "plugins": ["react", "react-native", "prettier"],
   "rules": {
     "arrow-parens": ["error", "as-needed"],
     "class-methods-use-this": "off",

.gitignore

@@ -26,8 +26,9 @@ To inject custom scripts and remove unnecessary files.
 
 ### Includes
 
-- [x] ESlint (extends Airnbn)
-- [x] Lint Staged
+- [x] ESlint (extends Airbnb) v4.19.1
+- [x] Lint Staged v7.3.0
+- [x] Prettier v1.14.3
 
 ### Custom Scripts
 
@@ -37,6 +38,8 @@ To inject custom scripts and remove unnecessary files.
 - [x] `ios:install` - Run in Release mode
 - [x] `project:clean` - Clean project
 - [x] `precommit` - Run tasks before commit
+- [x] `prettier:check` - Check for unformatted files
+- [x] `prettier:all` - Format files
 - [x] `lint` - Run lint
 - [x] `start` - Start Metro Bundler
 - [x] `start:clean` - Start Metro Bundler without cache
@@ -51,7 +54,7 @@ To inject custom scripts and remove unnecessary files.
 
 ### Contributing
 
-Clone this repo with `git clone https://github.com/lucianomlima/react-native-template-basic react-native-template-basic-app` cause npm needs  project dir name to be equal project name in `package.json`.
+Clone this repo with `git clone https://github.com/lucianomlima/react-native-template-basic react-native-template-basic-app` cause npm needs  project dir name to be equal to project name in `package.json`.
 
 To execute the project with your changes, you can use the absolute path of cloned repo with `react-native-cli`:
 

README.md

@@ -1,15 +1,16 @@
 {
-  "@babel/core": "^7.0.0-beta",
-  "@babel/runtime": "^7.0.0-beta",
-  "babel-core": "^7.0.0-bridge.0",
-  "babel-eslint": "^8.2.2",
-  "babel-jest": "^23.4.2",
-  "eslint": "^4.19.1",
-  "eslint-config-airbnb": "^17.0.0",
-  "eslint-plugin-import": "^2.12.0",
-  "eslint-plugin-jsx-a11y": "^6.0.3",
-  "eslint-plugin-react": "^7.9.1",
-  "eslint-plugin-react-native": "^3.2.1",
-  "lint-staged": "^7.3.0",
+  "@babel/core": "7.1.2",
+  "@babel/runtime": "7.1.2",
+  "babel-core": "7.0.0-bridge.0",
+  "babel-eslint": "8.2.6",
+  "eslint": "4.19.1",
+  "eslint-config-airbnb": "17.1.0",
+  "eslint-config-prettier": "3.1.0",
+  "eslint-plugin-import": "2.14.0",
+  "eslint-plugin-jsx-a11y": "6.1.2",
+  "eslint-plugin-prettier": "3.0.0",
+  "eslint-plugin-react": "7.11.1",
+  "eslint-plugin-react-native": "3.5.0",
+  "lint-staged": "7.3.0",
   "prettier": "1.14.3"
 }

devDependencies.json

@@ -6,6 +6,16 @@
     }
   },
   "lint-staged": {
-    "*.js": ["prettier --write", "yarn lint", "yarn test", "git add"]
+    "*.js": [
+      "prettier --write",
+      "yarn lint",
+      "yarn test",
+      "git add"
+    ]
+  },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "es5"
   }
 }

extension.json

@@ -6,6 +6,8 @@
     "ios:install": "react-native run-ios --configuration Release",
     "project:clean": "rm -Rf $TMPDIR/react-* node_modules && watchman watch-del-all && yarn cache clean && cd android && ./gradlew clean && cd .. && yarn",
     "precommit": "lint-staged",
+    "prettier:check": "prettier -l index.js src/**/*.js",
+    "prettier:all": "prettier --insert-pragma --write index.js src/**/*.js",
     "lint": "eslint --ext .js src/** ",
     "start": "node node_modules/react-native/local-cli/cli.js start",
     "start:clean": "yarn start --reset-cache",

scripts.json

@@ -1,9 +1,10 @@
-import React from 'react';
+/** @format */
+
 import renderer from 'react-test-renderer';
 
 import App from '..';
 
 test('should render properly', () => {
-  const tree = renderer.create(<App />).toJSON();
+  const tree = renderer.create(App).toJSON();
   expect(tree).toMatchSnapshot();
 });

src/App/__tests__/index.js

@@ -1,36 +1,13 @@
 /**
  * React Native Basic App
  * https://github.com/facebook/react-native
+ *
+ * @format
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
 
-const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu',
-  android:
-    'Double tap R on your keyboard to reload,\n' +
-    'Shake or press menu button for dev menu',
-});
-
-type Props = {};
-export default class App extends Component<Props> {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>Your App is ready and you already have:</Text>
-        <View style={styles.featuresList}>
-          <Text style={styles.feature}>{'\u2705 ESLint'}</Text>
-          <Text style={styles.feature}>{'\u2705 Custom Scripts'}</Text>
-        </View>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-      </View>
-    );
-  }
-}
-
 const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
@@ -57,3 +34,25 @@ const styles = StyleSheet.create({
     marginVertical: 5,
   },
 });
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu',
+  android: 'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu',
+});
+
+const App = (
+  <View style={styles.container}>
+    <Text style={styles.welcome}>Welcome to React Native!</Text>
+    <Text style={styles.instructions}>Your App is ready and you already have:</Text>
+    <View style={styles.featuresList}>
+      <Text style={styles.feature}>{'\u2705 ESLint'}</Text>
+      <Text style={styles.feature}>{'\u2705 Prettier'}</Text>
+      <Text style={styles.feature}>{'\u2705 Lint Staged'}</Text>
+      <Text style={styles.feature}>{'\u2705 Custom Scripts'}</Text>
+    </View>
+    <Text style={styles.instructions}>To get started, edit App.js</Text>
+    <Text style={styles.instructions}>{instructions}</Text>
+  </View>
+);
+
+export default App;