DEV Community: Andrew Min

Setup ESLint + Prettier + AirBnB Style with Create React App

Andrew Min — Mon, 27 Jul 2020 00:43:24 +0000

Originally posted on my blog

Overview

There is a multitude of tools to help lint and format your JavaScript code, to the point where setting up a project can get complicated. I'll be showing how to set up a React project with some of the most popular—ESLint and Prettier, while also integrating AirBnB's popular style guide.

For this guide, you'll need to have Node.js installed since it bundles npm and npx, the Node Package Manager and Npm Package e*X*ecutor. npm installs packages to your project, while npx runs package binaries.

Create a React App

If you don't have a React app already, use Create React App to set one up for you. It will automatically create a single-page React application with the dependencies (React, Babel, Webpack, etc.) and basic project structure. The README has a full guide, but essentially all you have to do is run the Create React App package script with npx then cd into the project directory.

npx create-react-app my-app
cd my-app

ESLint + AirBnB

ESLint is a linter which will analyze your code and find common issues, while also identifying styles inconsistent with AirBnB's style guide if configured.

To install ESLint and setup a config file, we'll use another npx package script.

npx eslint --init

The script will ask a few questions then go ahead and install its dependencies into the devDependencies section in ./package.json. It also creates ./.eslintrc.json which contains all the configurations.

? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in? JSON

However, The react-scripts package in Create React App requires an older version of ESLint, as seen by how running npm start will spew out a long error message. To work around this, I manually downgraded eslint in ./package.json to the required version printed in the error message. As of writing, I downgraded ESLint from ^7.5.0 to ^6.6.0 then ran npm install.

Also, the Create React App toolchain uses Babel which transpiles new JavaScript features into older versions to run in older browsers. However, the ESLint parser isn't up to date with ongoing JavaScript changes, so we need to use the babel-eslint parser. In ./.eslintrc.json, add:

"parser": "babel-eslint"

To run the linter, run the ESLint package script on a file or every .js and .jsx file in the src directory.

npx eslint 'src/**/*.{js,jsx}'

Prettier

Prettier is a code formatter that can identify and automatically fix style issues in your code. To install we need to install 3 packages—prettier itself, eslint-plugin-prettier which integrates Prietter into ESLint, and eslint-config-prettier which will turn off ESLint rules that conflict with Prettier.

(Don't forget the --save-dev flag which adds these packages to ./package.json)

npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev

Now we have to add a few things to ./.eslintrc.json to get ESLint to work with Prettier.

Add "prettier" to the plugins section.
Add "prettier" and prettier/react to the extends section.
Add "prettier/prettier": "error" to the rules section. You can also change "error" to "warn".

Now if we run npx eslint 'src/**' we can see warnings/errors from Prettier as well. To run formatting and simple fixes, we can run:

npx eslint 'src/**/*.{js,jsx}' --fix

More Configuration

First, adding entries to the rules section in ./.eslintrc.json allows you to disable certain ESLint rules. Here are some rules I personally like to disable.

"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] - Allow React JSX in *.js files. (By default AirBnB enforces that React components have a *.jsx extension)
"react/state-in-constructor": "off" - Allow you to declare state as a class variable instead of in the constructor of a React Component.

Next, we can configure Prettier by creating a ./.prettierrc file and change some options. Here are some of the options I like to change.

"printWidth": 100 - Change max line width to 100 characters (default 80)
"singleQuote": true - Use single quotes for strings, as enforced in AirBnB's style (default false)

By now, your files might look something like this.

package.json

{
  ...
  "devDependencies": {
    "eslint": "6.6.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.0.8",
    "prettier": "^2.0.5"
  }
}

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "prettier",
        "prettier/react"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": {
        "prettier/prettier": "error",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/state-in-constructor": "off"
    }
}

.prettierrc

{
    "printWidth": 100,
    "singleQuote": true
}

Integrating with VSCode

To show ESLint warnings inline with your code and run formatting automatically in VSCode, we need to install 2 extensions.

ESLint

Install the ESLint extension
That's it

Prettier

Install the Prettier extension
Edit VSCode settings.json
- Add
```
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
}
```
To change the formatter for JavaScript files to Prettier.
- If you also use *.jsx files, do the same setting as above for [javascriptreact]
- Now running Format Document will use Prettier
- See the extension README for more details (e.g. running format on save)

Originally posted on my blog

Google Sign-In with SwiftUI

Andrew Min — Mon, 29 Jun 2020 04:32:59 +0000

Originally posted on my blog

Overview

Google provides an easy SDK for integrating Google Sign-In with an iOS app with a helpful guide. However, the guide goes over code examples using UIKit, so I'll be showing how to use Google Sign-In with SwiftUI and manage state (This is not meant to replace the guide, this just shows examples of using SwiftUI).

Installation

The guide has pages on setting up GoogleSignIn with your project. To summarize, you'll need to:

Add the GoogleSignIn package to your project with CocoaPods (pod 'GoogleSignIn').
Go to Google's Developer Console to create a new project, then get your OAuth 2.0 Client ID credential.
Add an entry in "URL Types" under the "Info" tab on your project target in Xcode. The URL scheme is found in the developer console under "iOS URL scheme" (which is just your "Client ID" with the domains reversed). Adding the URL scheme allows the sign-in webpage to redirect back to your app.

Google Delegate

Google recommends implementing the GIDSignInDelegate to your AppDelegate, but instead, we'll create a separate GoogleDelegate which will make it easier to manage SwiftUI state. GoogleDelegate will also implement ObservableObject and contain a published property—signedIn. The view that handles signing in can automatically update by observing the signedIn property.

import GoogleSignIn

class GoogleDelegate: NSObject, GIDSignInDelegate, ObservableObject {

    @Published var signedIn: Bool = false

    ...
}

Next, we'll have to implement the sign(_:didSignInFor:withError:) method which is called when a user has signed in. The guide provides an example implementation, but we'll add a line that sets our signedIn property to true if the login was successful.

func sign(_ signIn: GIDSignIn!, didSignInFor user: GIDGoogleUser!, withError error: Error!) {
    if let error = error {
        if (error as NSError).code == GIDSignInErrorCode.hasNoAuthInKeychain.rawValue {
            print("The user has not signed in before or they have since signed out.")
        } else {
            print("\(error.localizedDescription)")
        }
        return
    }

    // If the previous `error` is null, then the sign-in was succesful
    print("Successful sign-in!")
    signedIn = true
}

Note: if you decide to handle an error a different way than just printing it, be sure to also check that the error isn't GIDSignInErrorCode.canceled. If a user clicks the sign-in button then closes the sign-in page, sign(_:didSignInFor:withError:) will be called with a GIDSignInErrorCode.canceled error which you'll most likely want to ignore.

App & Scene Delegate

Now that GoogleDelegate is complete, we'll need to add some more setup to our AppDelegate and SceneDelegate.

First, inside our AppDelegate's application(_:didFinishLaunchingWithOptions: (the application entry point), we'll setup our:

Client ID - The client ID is found inside the developer console.
Delegate - Our GoogleDelegate class.
Scopes - Any additional scopes your application needs to request.

// GIDSignIn's delegate is a weak property, so we have to define our GoogleDelegate outside the function to prevent it from being deallocated.
let googleDelegate = GoogleDelegate()

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    GIDSignIn.sharedInstance().clientID = "...googleusercontent.com"
    GIDSignIn.sharedInstance().delegate = googleDelegate
    GIDSignIn.sharedInstance().scopes = Constants.GS.scopes

    return true
}

We also have to implement application(_:open:options:) which is called when the sign-in page redirects back to our app.

func application(_ app: UIApplication, open url: URL, options [UIApplication.OpenURLOptionsKey : Any]) -> Bool {
    return GIDSignIn.sharedInstance().handle(url)
}

Next, we have to add a few more things to the scene(_:willConnectTo:options:) method in SceneDelegate. First, we'll be setting our googleDelegate as an EnvironmentObject so that our views can easily access it. Second, we also need to set GIDSignIn.sharedInstance().presentingViewController. Normally, we would set the presentingViewController to whatever UIViewController has our sign-in view, but since we don't have any view controllers, we'll just set it to rootViewController.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

    // Get the googleDelegate from AppDelegate
    let googleDelegate = (UIApplication.shared.delegate as! AppDelegate).googleDelegate

    // Add googleDelegate as an environment object
    let contentView = ContentView()
        .environmentObject(googleDelegate)

    if let windowScene = scene as? UIWindowScene {
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView: contentView)

        // Set presentingViewControll to rootViewController
        GIDSignIn.sharedInstance().presentingViewController = window.rootViewController

        self.window = window
        window.makeKeyAndVisible()
    }
}

The Sign-In Button

Finally, with all the setup out of the way, we can create our sign-in page. We'll design our page such that if the user isn't signed in, we show a simple sign-in button. If the user is signed in, we'll show their name and email along with a sign-out button. Note that the focus here is functionality, not a pretty UI.

For the sign-in button, Google provides the GIDSignInButton class which is already has a standard Google-look and handles the tap action. Since the button is a UIControl, we need to wrap it in a UIViewRepresentable to use it in our SwiftUI body.

import GoogleSignIn
import SwiftUI

struct SignInButton: UIViewRepresentable {

    func makeUIView(context: Context) -> GIDSignInButton {
        let button = GIDSignInButton()
        // Customize button here
        button.colorScheme = .light
        return button
    }

    func updateUIView(_ uiView: UIViewType, context: Context) {}   
}

struct ContentView: View {

    @EnvironmentObject var googleDelegate: GoogleDelegate

    var body: some View {
        SignInButton()
    }
}

Alternatively, you can create your own button and call GIDSignIn.sharedInstance().signIn() when it is tapped.

var body: some View {
    Button(action: {
        GIDSignIn.sharedInstance().signIn()
    }) {
        Text("Sign In")
    }
}

Great, now our user can sign in. However, the whole point of GoogleDelegate was to update our view once the user is signed in, so let's show some of the user's information once they're signed in. The profile information can be found in GIDSignIn.sharedInstance().currentUser!.profile.

We also need a sign-out button. When it's pressed we call GIDSignIn.sharedInstance().signOut() and also set signedIn in our GoogleDelegate to false to show the sign-in button again.

// To use if/else in our body, we need to wrap the view in a Group
var body: some View {
    Group {
        if googleDelegate.signedIn {
            VStack {
                Text(GIDSignIn.sharedInstance().currentUser!.profile.name)
                Text(GIDSignIn.sharedInstance().currentUser!.profile.email)
                Button(action: {
                    GIDSignIn.sharedInstance().signOut()
                    googleDelegate.signedIn = false
                }) {
                    Text("Sign Out")
                }
            }
        } else {
            Button(action: {
                GIDSignIn.sharedInstance().signIn()
            }) {
                Text("Sign In")
            }
        }
    }
}

Now if we run our app, we'll be greeted with a sign-in button. When pressed, the Google Sign-In modal will pop up. Note that if you requested sensitive scopes (scopes that can access personal information), you'll see a warning that says "This app isn't verified". To get rid of this, you'll need to get your app verified. But for testing, you can just press "Advanced" in the bottom left then "Go To *App* (unsafe)".

After you sign-in, the modal should disappear and the view should now show your name and email address, along with a sign-out button. Pressing sign-out will refresh the view and show the sign-in button once again.

Once the user is signed in, the view shows their name and email.

Finally, in order to automatically sign in our user when they close and reopen the app, we need to call GIDSignIn.sharedInstance().restorePreviousSignIn() when the user opens the sign-in page.

var body: some View {
    Group {
        ...
    }
    .onAppear {
        GIDSignIn.sharedInstance().restorePreviousSignIn()
    }
}

Summary

Using SwiftUI's ObservableObject to manage state made it really easy for our view to automatically update when the user signs in or out. With UIKit you would have to manage messy NotificationCenter posts to update the UI when the user signs in or out.

Doing useful things with Google Sign-In such as making API calls or to authenticate the user to your own backend is out of the scope of this article, but Google provides many of their own guides.

Originally posted on my blog