Setting up Prettier and Husky automatically, with prettier-configure

Sosuke Suzuki — Thu, 19 Sep 2019 19:10:39 +0000

https://github.com/sosukesuzuki/prettier-configure

(Please put a star!⭐)

I developed prettier-configure. It enabel to set up Prettier and Husky automatically.

Usage

It assumes that package.json already exists in your current directory.

You have not to install prettier-configure. You can run it via npx like below:

npx prettier-configure

If you run it, prettier-configure execs the following three steps:

1. Install Prettier and Husky to your devDependencies via yarn (or npm).

prettire-configure installs Prettier and Husky to your devDependencies. You can choose your favorite package manager via manager argument option.

npx prettier-configure --manager=npm

2. Add a npm script for format with Prettier and config for Husky to your package.json.

prettier-configure inserts "scripts" and "husky" to your package.json.

{
  "scripts": {
    "format": "prettier --write "**/*.{js,jsx,ts,tsx,md,json,yaml,html}""
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

(caution: If your package.json has "scripts" already, it will be rewrote.)

3. Create `.prettierrc.yaml` and `.prettierignore` in your current directory.

Create files with my favorite default settings. If other people want to use this tool, I'll enable that you can change default settings.

.prettierrc.yaml

trailingComma: 'all'
singleQuote: true
tabWidth: 4

.prettierignore

/node_modules
package.json

We can use Redux without Redux.

Sosuke Suzuki — Sat, 16 Feb 2019 08:16:35 +0000

We can manage state like Redux without Redux with addition new feature "Hooks".

useReducer + Context

First, define the reducer like Redux.
Second, create the Context that manages state and dispatch.
Third, create state and reducer with useReducer and pass those to StoreContext.Provider.
Finaly, access to state or dispatch with useContext (or, StoreContext.Consumer).

import * as React from "react";
import * as ReactDOM from "react-dom";

type State = { count: number };
type Action = { type: "increment" | "decrement" | "reset" };
const initialState: State = { count: 0 };

function reducer(state: CounterState, action: Action): State {
  case "reset": {
    return initialState;
  }
  case "increment": {
    return { count: state.count + 1 };
  }
  case "decrement": {
    return { count: state.count - 1 };
  }
  default: {
    return state;
  }
}

const StoreContext = React.createContext<{
  state: State,
  dispatch: React.Dispatch<Action>
}>({state: null as any, dispatch: null as any});

function App() {
  const [state, dispatch] = React.useReducer(reducer, initialState);
  return (
    <StoreContext value={{ state, dispatch }}>
      <Counter />
    </StoreContext>
  )
}

function Counter() {
  const { state, dispatch } = React.useContext(StoreContext);
  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "reset" })}>reset</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  )
}

ReactDOM.render(<App />, document.querySelector("#root"));

I like this pattern! This is useful for small project. We should use Redux only we want to use middlewares.

reducer-context-hook

I published a library named reducer-context-hook (GitHub: https://github.com/sosukesuzuki/reducer-context-hook ). This library wraps the above pattern.

reducer-context-hook exports a function named create(). create() function returns a object contains StoreContextProvider, useMappedState and useDispatch.

import create from "reducer-context-hook";

export const { StoreContextProvider, useDispatch, useMappedState } = create<
  State,
  Action
>();

StoreContextProvider

StoreContextProvider has same role as StoreContext.Provider in the above pattern. Please use like below:

function App() {
  return (
    <StoreContextProvider reducer={reducer} initialState={initialState}>
      <Counter />
    </StoreContextProvider>
  );
}

useMappedState

useMappedState has same role connect in react-redux. (only state). It recieves two arguments.The first is mapState function.The second is memoizationArray.memoizationArray is used to memoize like useCallback. (useCallback beeing used in useMappedState to memoize function.) Please use like below:

function Counter() {
  const { count } = useMappedState(
    state => ({
      count: state.count
    }),
    []
  );
  return <p>{count}</p>;
}

useDispatch

useDispatch returns dispatch.We can use action with it. Please use like below:

function Increment() {
  const dispatch = useDispatch();
  const increment = React.useCallback(
    () => dispatch({ type: "increment" }),
    []
  );
  return <button onClick={increment}>+</button>;
}

DEV Community: Sosuke Suzuki