Set up linting

package.json

@@ -2,6 +2,88 @@
   "name": "takenote",
   "version": "0.1.0",
   "private": false,
+  "scripts": {
+    "build": "react-scripts build",
+    "coveralls": "react-scripts test --ci --coverage --watchAll=false && cat ./coverage/lcov.info | coveralls",
+    "eject": "react-scripts eject",
+    "postinstall": "patch-package",
+    "start": "react-scripts start",
+    "test": "react-scripts test"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "**/*.{json,css,scss,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "prettier": {
+    "bracketSpacing": true,
+    "printWidth": 100,
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "plugin:import/errors",
+      "plugin:import/typescript",
+      "plugin:import/warnings",
+      "plugin:prettier/recommended",
+      "prettier/react"
+    ],
+    "plugins": [
+      "import"
+    ],
+    "rules": {
+      "import/order": [
+        "error",
+        {
+          "groups": [
+            "builtin",
+            "external",
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+            "unknown"
+          ],
+          "newlines-between": "always"
+        }
+      ]
+    },
+    "settings": {
+      "import/resolver": {
+        "node": {
+          "paths": [
+            "src"
+          ]
+        }
+      }
+    }
+  },
   "dependencies": {
     "@types/codemirror": "0.0.78",
     "@types/jest": "24.0.18",
@@ -33,52 +115,13 @@
     "typescript": "3.6.3",
     "uuid": "^3.3.3"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "postinstall": "patch-package",
-    "coveralls": "react-scripts test --ci --coverage --watchAll=false && cat ./coverage/lcov.info | coveralls"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "prettier --single-quote --trailing-comma es5 --print-width 100 --tab-width 2 --no-semi --write",
-      "git add"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "es5",
-    "printWidth": 100,
-    "tabWidth": 2,
-    "semi": false,
-    "bracketSpacing": true
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "devDependencies": {
     "@testing-library/jest-dom": "^4.1.2",
     "@testing-library/react": "^9.3.0",
     "coveralls": "^3.0.7",
+    "eslint-config-prettier": "^6.4.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.1",
     "husky": "^3.0.9",
     "jest": "^24.9.0",
     "lint-staged": "^9.4.2",

src/actions/index.ts

@@ -1,5 +1,5 @@
 import { Actions } from 'constants/enums'
-import { NoteItem, CategoryItem } from 'types'
+import { CategoryItem, NoteItem } from 'types'
 
 //==============================================================================
 // Notes

src/api/index.ts

@@ -1,4 +1,4 @@
-import { NoteItem, CategoryItem } from 'types'
+import { CategoryItem, NoteItem } from 'types'
 
 export const requestNotes = () => {
   return new Promise((resolve, reject) => {

src/containers/App.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect } from 'react'
 import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
+
 import KeyboardShortcuts from 'containers/KeyboardShortcuts'
 import AppSidebar from 'containers/AppSidebar'
 import NoteList from 'containers/NoteList'
 import NoteEditor from 'containers/NoteEditor'
 import { loadNotes, loadCategories } from 'actions'
-import { KeyboardProvider } from '../contexts/KeyboardContext'
+import { KeyboardProvider } from 'contexts/KeyboardContext'
 
 interface AppProps {
   loadNotes: () => void

src/containers/AppSidebar.tsx

@@ -3,6 +3,7 @@ import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
 import kebabCase from 'lodash/kebabCase'
 import { Trash2, Book, Folder, X, UploadCloud, Plus, Settings, Bookmark } from 'react-feather'
+
 import { Folders } from 'constants/enums'
 import { CategoryItem, NoteItem, ApplicationState } from 'types'
 import {
@@ -16,7 +17,7 @@ import {
   syncState,
 } from 'actions'
 import { newNote } from 'helpers'
-import { useKeyboard } from '../contexts/KeyboardContext'
+import { useKeyboard } from 'contexts/KeyboardContext'
 
 const iconColor = 'rgba(255, 255, 255, 0.3)'
 

src/containers/KeyboardShortcuts.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
+
 import { addNote, swapNote, toggleTrashedNote, syncState } from 'actions'
 import { NoteItem, CategoryItem, ApplicationState } from 'types'
 import { newNote, getNoteTitle, downloadNote } from 'helpers'
 import { useKey } from 'helpers/hooks'
-import { useKeyboard } from '../contexts/KeyboardContext'
+import { useKeyboard } from 'contexts/KeyboardContext'
 
 interface KeyboardShortcutsProps {
   addNote: (note: NoteItem) => void

src/containers/NoteEditor.tsx

@@ -3,14 +3,15 @@ import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
 import { Controlled as CodeMirror } from 'react-codemirror2'
 import moment from 'moment'
+
 import { updateNote } from 'actions'
 import { NoteItem, ApplicationState } from 'types'
-
 import options from 'constants/codeMirrorOptions'
+
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/base16-light.css'
-import 'codemirror/mode/gfm/gfm.js'
-import 'codemirror/addon/selection/active-line.js'
+import 'codemirror/mode/gfm/gfm'
+import 'codemirror/addon/selection/active-line'
 
 interface NoteEditorProps {
   loading: boolean

src/containers/NoteList.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'
 import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
 import { MoreHorizontal } from 'react-feather'
+
 import { folderMap } from 'constants/index'
 import { Folders } from 'constants/enums'
 import { swapNote, swapCategory, pruneNotes, addCategoryToNote } from 'actions'

src/containers/NoteOptions.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import NoteOptions, { NoteOptionsProps } from './NoteOptions'
+
+import NoteOptions, { NoteOptionsProps } from 'containers/NoteOptions'
+
 import { renderWithRouter } from '../../tests/helpers'
 
 const wrap = (props: NoteOptionsProps) => renderWithRouter(<NoteOptions {...props} />)

src/containers/NoteOptions.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
+import { Dispatch } from 'redux'
 import { ArrowUp, Bookmark, Download, Trash } from 'react-feather'
-import { toggleTrashedNote, toggleFavoriteNote } from 'actions'
-import { NoteItem, ApplicationState } from 'types'
-import { getNoteTitle, downloadNote } from 'helpers'
+
+import { toggleFavoriteNote, toggleTrashedNote } from 'actions'
+import { downloadNote, getNoteTitle } from 'helpers'
+import { ApplicationState, NoteItem } from 'types'
 
 export interface NoteOptionsProps {
   clickedNote: NoteItem

src/helpers/index.ts

@@ -1,5 +1,6 @@
 import uuid from 'uuid/v4'
 import moment from 'moment'
+
 import { NoteItem } from 'types'
 import { Folders } from 'constants/enums'
 

src/index.tsx

@@ -1,4 +1,4 @@
-import './styles/index.scss'
+import 'styles/index.scss'
 
 import React from 'react'
 import { render } from 'react-dom'
@@ -7,9 +7,9 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import { applyMiddleware, compose, createStore } from 'redux'
 import createSagaMiddleware from 'redux-saga'
 
-import App from './containers/App'
-import rootReducer from './reducers'
-import rootSaga from './sagas'
+import App from 'containers/App'
+import rootReducer from 'reducers'
+import rootSaga from 'sagas'
 
 const sagaMiddleware = createSagaMiddleware()
 const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

src/reducers/categoryReducer.ts

@@ -1,5 +1,5 @@
 import { Actions } from 'constants/enums'
-import { CategoryState, CategoryActionTypes } from 'types'
+import { CategoryActionTypes, CategoryState } from 'types'
 
 const initialState: CategoryState = {
   categories: [],

src/reducers/index.ts

@@ -1,4 +1,5 @@
 import { combineReducers, Reducer } from 'redux'
+
 import noteReducer from 'reducers/noteReducer'
 import categoryReducer from 'reducers/categoryReducer'
 import syncReducer from 'reducers/syncReducer'

src/reducers/noteReducer.ts

@@ -1,5 +1,5 @@
 import { Actions, Folders } from 'constants/enums'
-import { NoteItem, NoteState, NotesActionTypes } from 'types'
+import { NoteItem, NotesActionTypes, NoteState } from 'types'
 import { sortByLastUpdated } from 'helpers'
 
 const initialState: NoteState = {

src/sagas/index.ts

@@ -1,15 +1,17 @@
-import { put, all, takeLatest } from 'redux-saga/effects'
+// eslint-disable-next-line import/named
+import { all, put, takeLatest } from 'redux-saga/effects'
+
 import { Actions } from 'constants/enums'
 import {
-  loadNotesSuccess,
-  loadNotesError,
-  loadCategoriesSuccess,
   loadCategoriesError,
-  syncStateSuccess,
+  loadCategoriesSuccess,
+  loadNotesError,
+  loadNotesSuccess,
   syncStateError,
+  syncStateSuccess,
 } from 'actions'
 import { SyncStateAction } from 'types'
-import { requestNotes, requestCategories, saveState } from 'api'
+import { requestCategories, requestNotes, saveState } from 'api'
 
 function* fetchNotes() {
   try {