feat(prettier): make prettier a part of eslint.

Also reduce max line width to 100. And remove `lint:types` step for
commit sequence, it bothers when committing incomplete (wip) changes.

Author: xobotyi

.editorconfig

@@ -8,7 +8,7 @@ indent_size = 2
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
-max_line_length = 120
+max_line_length = 100
 
 [*.{ts, tsx}]
 ij_typescript_enforce_trailing_comma = keep
@@ -24,7 +24,7 @@ ij_typescript_catch_on_new_line = false
 ij_typescript_spaces_within_interpolation_expressions = false
 
 [*.md]
-max_line_length = 120
+max_line_length = 100
 trim_trailing_whitespace = false
 
 [COMMIT_EDITMSG]

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  extends: ['prettier/@typescript-eslint', 'react-app', 'plugin:prettier/recommended'],
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        trailingComma: 'es5',
+        tabWidth: 2,
+        printWidth: 100,
+        semicolons: true,
+        quoteProps: 'as-needed',
+        jsxSingleQuote: false,
+        bracketSpacing: true,
+        jsxBracketSameLine: true,
+        arrowParens: 'always',
+        endOfLine: 'lf',
+      },
+    ],
+  },
+};

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use",
-  "version": "17.0.2",
+  "version": "17.0.0",
   "description": "Collection of React Hooks",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -17,10 +17,9 @@
     "test:ssr": "jest --maxWorkers 2 --config ./jest.config.node.ts",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "lint": "eslint {src,tests}/**/*.{ts,tsx}",
+    "lint": "eslint {src,tests,stories}/**/*.{ts,tsx}",
     "lint:fix": "yarn lint --fix",
-    "lint:types": "tsc --noEmit ",
-    "lint:prettier": "prettier --write src/**/**/*.{ts,tsx}",
+    "lint:types": "tsc --noEmit",
     "build:cjs": "tsc",
     "build:es": "tsc -m esNext --outDir esm",
     "build": "yarn build:cjs && yarn build:es",
@@ -33,7 +32,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint:types && lint-staged",
+      "pre-commit": "lint-staged",
       "pre-push": "yarn lint && yarn clean && yarn build && yarn test"
     }
   },
@@ -93,10 +92,12 @@
     "babel-loader": "8.2.2",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "eslint": "7.19.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "5.2.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "7.22.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "fork-ts-checker-webpack-plugin": "6.1.0",
@@ -107,7 +108,7 @@
     "keyboardjs": "2.6.4",
     "lint-staged": "10.5.3",
     "markdown-loader": "6.0.0",
-    "prettier": "2.2.1",
+    "prettier": "^2.2.1",
     "raf-stub": "3.0.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
@@ -152,7 +153,6 @@
   "lint-staged": {
     "src/**/**/*.{ts,tsx}": [
       "eslint --fix",
-      "prettier --write",
       "git add"
     ]
   },

.prettierrc

@@ -1,6 +1,11 @@
 import useKey from '../useKey';
 import createRenderProp from '../factory/createRenderProp';
 
-const UseKey = createRenderProp(useKey, ({ filter, fn, deps, ...rest }) => [filter, fn, rest, deps]);
+const UseKey = createRenderProp(useKey, ({ filter, fn, deps, ...rest }) => [
+  filter,
+  fn,
+  rest,
+  deps,
+]);
 
 export default UseKey;

package.json

@@ -16,9 +16,10 @@ const createBreakpoint = (
       off(window, 'resize', setSideScreen);
     };
   });
-  const sortedBreakpoints = useMemo(() => Object.entries(breakpoints).sort((a, b) => (a[1] >= b[1] ? 1 : -1)), [
-    breakpoints,
-  ]);
+  const sortedBreakpoints = useMemo(
+    () => Object.entries(breakpoints).sort((a, b) => (a[1] >= b[1] ? 1 : -1)),
+    [breakpoints]
+  );
   const result = sortedBreakpoints.reduce((acc, [name, width]) => {
     if (screen >= width) {
       return name;

src/component/UseKey.tsx

@@ -3,7 +3,9 @@ import { useEffect, useRef } from 'react';
 import useSetState from '../useSetState';
 import parseTimeRanges from '../misc/parseTimeRanges';
 
-export interface HTMLMediaProps extends React.AudioHTMLAttributes<any>, React.VideoHTMLAttributes<any> {
+export interface HTMLMediaProps
+  extends React.AudioHTMLAttributes<any>,
+    React.VideoHTMLAttributes<any> {
   src: string;
 }
 
@@ -33,7 +35,9 @@ type createHTMLMediaHookReturn = [
 ];
 
 export default function createHTMLMediaHook(tag: 'audio' | 'video') {
-  return (elOrProps: HTMLMediaProps | React.ReactElement<HTMLMediaProps>): createHTMLMediaHookReturn => {
+  return (
+    elOrProps: HTMLMediaProps | React.ReactElement<HTMLMediaProps>
+  ): createHTMLMediaHookReturn => {
     let element: React.ReactElement<any> | undefined;
     let props: HTMLMediaProps;
 

src/factory/createBreakpoint.ts

@@ -8,7 +8,9 @@ interface Store<Action, State> {
   dispatch: Dispatch<Action>;
 }
 
-type Middleware<Action, State> = (store: Store<Action, State>) => (next: Dispatch<Action>) => (action: Action) => void;
+type Middleware<Action, State> = (
+  store: Store<Action, State>
+) => (next: Dispatch<Action>) => (action: Action) => void;
 
 function composeMiddleware<Action, State>(chain: Middleware<Action, State>[]) {
   return (context: Store<Action, State>, dispatch: Dispatch<Action>) => {

src/factory/createHTMLMediaHook.ts

@@ -4,11 +4,19 @@ const createReducerContext = <R extends React.Reducer<any, any>>(
   reducer: R,
   defaultInitialState: React.ReducerState<R>
 ) => {
-  const context = createContext<[React.ReducerState<R>, React.Dispatch<React.ReducerAction<R>>] | undefined>(undefined);
+  const context = createContext<
+    [React.ReducerState<R>, React.Dispatch<React.ReducerAction<R>>] | undefined
+  >(undefined);
   const providerFactory = (props, children) => createElement(context.Provider, props, children);
 
-  const ReducerProvider: React.FC<{ initialState?: React.ReducerState<R> }> = ({ children, initialState }) => {
-    const state = useReducer<R>(reducer, initialState !== undefined ? initialState : defaultInitialState);
+  const ReducerProvider: React.FC<{ initialState?: React.ReducerState<R> }> = ({
+    children,
+    initialState,
+  }) => {
+    const state = useReducer<R>(
+      reducer,
+      initialState !== undefined ? initialState : defaultInitialState
+    );
     return providerFactory({ value: state }, children);
   };
 

src/factory/createReducer.ts

@@ -1,7 +1,9 @@
 import { createContext, createElement, useContext, useState } from 'react';
 
 const createStateContext = <T>(defaultInitialValue: T) => {
-  const context = createContext<[T, React.Dispatch<React.SetStateAction<T>>] | undefined>(undefined);
+  const context = createContext<[T, React.Dispatch<React.SetStateAction<T>>] | undefined>(
+    undefined
+  );
   const providerFactory = (props, children) => createElement(context.Provider, props, children);
 
   const StateProvider: React.FC<{ initialValue?: T }> = ({ children, initialValue }) => {

src/factory/createReducerContext.ts

@@ -7,9 +7,18 @@ export type IHookStateSetAction<S> = S | IHookStateSetter<S>;
 export type IHookStateResolvable<S> = S | IHookStateInitialSetter<S> | IHookStateSetter<S>;
 
 export function resolveHookState<S>(nextState: IHookStateInitAction<S>): S;
-export function resolveHookState<S, C extends S>(nextState: IHookStateSetAction<S>, currentState?: C): S;
-export function resolveHookState<S, C extends S>(nextState: IHookStateResolvable<S>, currentState?: C): S;
-export function resolveHookState<S, C extends S>(nextState: IHookStateResolvable<S>, currentState?: C): S {
+export function resolveHookState<S, C extends S>(
+  nextState: IHookStateSetAction<S>,
+  currentState?: C
+): S;
+export function resolveHookState<S, C extends S>(
+  nextState: IHookStateResolvable<S>,
+  currentState?: C
+): S;
+export function resolveHookState<S, C extends S>(
+  nextState: IHookStateResolvable<S>,
+  currentState?: C
+): S {
   if (typeof nextState === 'function') {
     return nextState.length ? (nextState as Function)(currentState) : (nextState as Function)();
   }

src/factory/createStateContext.ts

@@ -4,7 +4,10 @@ import { FunctionReturningPromise } from './misc/types';
 
 export { AsyncState, AsyncFnReturn } from './useAsyncFn';
 
-export default function useAsync<T extends FunctionReturningPromise>(fn: T, deps: DependencyList = []) {
+export default function useAsync<T extends FunctionReturningPromise>(
+  fn: T,
+  deps: DependencyList = []
+) {
   const [state, callback] = useAsyncFn(fn, deps, {
     loading: true,
   });

src/misc/hookState.ts

@@ -24,7 +24,9 @@ export type AsyncState<T> =
       value: T;
     };
 
-type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = AsyncState<PromiseType<ReturnType<T>>>;
+type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = AsyncState<
+  PromiseType<ReturnType<T>>
+>;
 
 export type AsyncFnReturn<T extends FunctionReturningPromise = FunctionReturningPromise> = [
   StateFromFunctionReturningPromise<T>,

src/useAsync.ts

@@ -13,7 +13,9 @@ const useAsyncRetry = <T>(fn: () => Promise<T>, deps: DependencyList = []) => {
   const retry = useCallback(() => {
     if (stateLoading) {
       if (process.env.NODE_ENV === 'development') {
-        console.log('You are calling useAsyncRetry hook retry() method while loading in progress, this is a no-op.');
+        console.log(
+          'You are calling useAsyncRetry hook retry() method while loading in progress, this is a no-op.'
+        );
       }
 
       return;

src/useAsyncFn.ts

@@ -26,7 +26,9 @@ const useCopyToClipboard = (): [CopyToClipboardState, (value: string) => void] =
     try {
       // only strings and numbers casted to strings can be copied to clipboard
       if (typeof value !== 'string' && typeof value !== 'number') {
-        const error = new Error(`Cannot copy typeof ${typeof value} to clipboard, must be a string`);
+        const error = new Error(
+          `Cannot copy typeof ${typeof value} to clipboard, must be a string`
+        );
         if (process.env.NODE_ENV === 'development') console.error(error);
         setState({
           value,

src/useAsyncRetry.ts

@@ -17,7 +17,8 @@ export default function useCounter(
 ): [number, CounterActions] {
   let init = resolveHookState(initialValue);
 
-  typeof init !== 'number' && console.error('initialValue has to be a number, got ' + typeof initialValue);
+  typeof init !== 'number' &&
+    console.error('initialValue has to be a number, got ' + typeof initialValue);
 
   if (typeof min === 'number') {
     init = Math.max(init, min);
@@ -59,7 +60,9 @@ export default function useCounter(
           const rDelta = resolveHookState(delta, get());
 
           if (typeof rDelta !== 'number') {
-            console.error('delta has to be a number or function returning a number, got ' + typeof rDelta);
+            console.error(
+              'delta has to be a number or function returning a number, got ' + typeof rDelta
+            );
           }
 
           set((num: number) => num + rDelta);
@@ -68,7 +71,9 @@ export default function useCounter(
           const rDelta = resolveHookState(delta, get());
 
           if (typeof rDelta !== 'number') {
-            console.error('delta has to be a number or function returning a number, got ' + typeof rDelta);
+            console.error(
+              'delta has to be a number or function returning a number, got ' + typeof rDelta
+            );
           }
 
           set((num: number) => num - rDelta);
@@ -77,7 +82,9 @@ export default function useCounter(
           const rValue = resolveHookState(value, get());
 
           if (typeof rValue !== 'number') {
-            console.error('value has to be a number or function returning a number, got ' + typeof rValue);
+            console.error(
+              'value has to be a number or function returning a number, got ' + typeof rValue
+            );
           }
 
           // eslint-disable-next-line react-hooks/exhaustive-deps

src/useCopyToClipboard.ts

@@ -11,7 +11,9 @@ const useCustomCompareEffect = <TDeps extends DependencyList>(
 ) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!(deps instanceof Array) || !deps.length) {
-      console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
+      console.warn(
+        '`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.'
+      );
     }
 
     if (deps.every(isPrimitive)) {
@@ -21,7 +23,9 @@ const useCustomCompareEffect = <TDeps extends DependencyList>(
     }
 
     if (typeof depsEqual !== 'function') {
-      console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
+      console.warn(
+        '`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list'
+      );
     }
   }
 

src/useCounter.ts

@@ -3,7 +3,11 @@ import useTimeoutFn from './useTimeoutFn';
 
 export type UseDebounceReturn = [() => boolean | null, () => void];
 
-export default function useDebounce(fn: Function, ms: number = 0, deps: DependencyList = []): UseDebounceReturn {
+export default function useDebounce(
+  fn: Function,
+  ms: number = 0,
+  deps: DependencyList = []
+): UseDebounceReturn {
   const [isReady, cancel, reset] = useTimeoutFn(fn, ms);
 
   useEffect(reset, deps);

src/useCustomCompareEffect.ts

@@ -7,7 +7,9 @@ const isPrimitive = (val: any) => val !== Object(val);
 const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!(deps instanceof Array) || !deps.length) {
-      console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
+      console.warn(
+        '`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.'
+      );
     }
 
     if (deps.every(isPrimitive)) {

src/useDebounce.ts

@@ -1,6 +1,9 @@
 import { useState } from 'react';
 
-const useDefault = <TStateType>(defaultValue: TStateType, initialValue: TStateType | (() => TStateType)) => {
+const useDefault = <TStateType>(
+  defaultValue: TStateType,
+  initialValue: TStateType | (() => TStateType)
+) => {
   const [value, setValue] = useState<TStateType | undefined | null>(initialValue);
 
   if (value === undefined || value === null) {

src/useDeepCompareEffect.ts

@@ -26,7 +26,10 @@ const defaultState: DropAreaState = {
 };
 */
 
-const createProcess = (options: DropAreaOptions, mounted: boolean) => (dataTransfer: DataTransfer, event) => {
+const createProcess = (options: DropAreaOptions, mounted: boolean) => (
+  dataTransfer: DataTransfer,
+  event
+) => {
   const uri = dataTransfer.getData('text/uri-list');
 
   if (uri) {

src/useDefault.ts

@@ -10,7 +10,9 @@ import {
   useRef,
 } from 'react';
 
-export default function useEnsuredForwardedRef<T>(forwardedRef: MutableRefObject<T>): MutableRefObject<T> {
+export default function useEnsuredForwardedRef<T>(
+  forwardedRef: MutableRefObject<T>
+): MutableRefObject<T> {
   const ensuredRef = useRef(forwardedRef && forwardedRef.current);
 
   useEffect(() => {