Set up linter (#5)

* Format .js, .css, and .java files with formatter.

* Format .js, .css, and .java files with formatter.

* Format files from merge.

* Set up linter

* Fix linting errors

* Update README on running the formatter

* Set up linter

* Update README on running the formatter

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2017
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": ["react-app", "eslint:recommended"],
+  "rules": {
+    "no-multi-spaces": "off",
+    "require-jsdoc": "off",
+    "valid-jsdoc": "off"
+  }
+}

.github/workflows/lint.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: install node dependencies
+      if: always()
+      run: make node_modules
+    - name: Check CSS Formatting
+      if: always()
+      run: node_modules/prettier/bin-prettier.js -c frontend/src/*.css
+    - name: Validate JavaScript
+      if: always()
+      run: node_modules/eslint/bin/eslint.js frontend/src/*.js
+    - name: Check JavaScript Formatting
+      if: always()
+      run: node_modules/prettier/bin-prettier.js -c frontend/src/*.js
+    - name: Check Java Formatting
+      if: always()
+      run: diff -u <(cat portfolio/src/main/java/com/google/sps/servlets/*.java) <(node_modules/clang-format/bin/linux_x64/clang-format --style=Google portfolio/src/main/java/com/google/sps/servlets/*.java)
+    - name: Notify on failure
+      if: failure()
+      run: echo 'run "make validate" and "make pretty" to see/fix errors locally'

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 88,
+  "overrides": [
+    {
+      "files": ["*.css"],
+      "options": {
+        "tabWidth": 2,
+        "singleQuote": true,
+        "useTabs": false
+      }
+    }
+  ]
+}

README.md

@@ -9,7 +9,6 @@ npm install
 ## Development Resources
 * [React Bootstrap](https://react-bootstrap.github.io/getting-started/introduction/)
 * [Markdown Guide](https://guides.github.com/features/mastering-markdown/)
-* [Autoformat on Commit - Prettier](https://docs.google.com/document/d/1FQPR4w38ixA_ic0y0FEo_fQtRvLBiphEwx-XLEiLaTw/edit)
 
 ## React Frontend with Java Servlet Backend
 Based on [chen-dawn/react-servlet-test](https://github.com/chen-dawn/react-servlet-test).
@@ -41,3 +40,62 @@ node -v // Check node version
 sudo npm install -g n
 sudo n 10.21.0  // Change node version to 10.21.0
 ```
+
+## Formatting/linting
+When you open a PR or push a new commit to a PR branch, github CI will automatically run a validator to check for formatting which prevents merging the PR if it fails.
+See below for how to run the formatter/linter locally.
+![image](https://user-images.githubusercontent.com/22455214/85607255-ecb9d880-b621-11ea-9d58-ffc24d841fbd.png)
+
+##### Initial setup
+You only need to run this once.
+```bash
+# From root directory
+make node_modules
+```
+
+### Format files
+Generally a good idea to run this command before committing or pushing a change.
+```bash
+# From root directory
+make pretty
+```
+
+If you'd like, you can use a pre-commit hook. Create a file named `pre-commit` in the `.git/hooks` directory, then, add the following to the `.git/hooks/pre-commit` file.
+```bash
+#!/bin/sh
+# Move to top level of git repo
+cd `git rev-parse --show-toplevel`
+
+FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.js" "*.css" "*.java" | sed 's| |\\ |g')
+if [ -z "$FILES" ]
+then
+ # Move back to original working directory
+ cd -
+ exit 0
+fi
+
+# Prettify/format all files
+make pretty
+
+# Add back the modified/prettified files to staging
+echo "$FILES" | xargs git add
+
+# Move back to original working directory
+cd -
+exit 0
+```
+Create a new file named `post-commit` in the `.git/hooks` directory and include the following:
+```bash
+#!/bin/sh
+git update-index -g
+```
+Make sure the pre-commit and post-commit files are executable:
+```bash
+chmod 755 .git/hooks/pre-commit .git/hooks/post-commit
+```
+
+#### Lint JS files
+```bash
+# From root directory
+make validate
+```

makefile

@@ -0,0 +1,22 @@
+# Set the path to clang-format according to OS
+CLANG_FORMAT :=
+	UNAME_S := $(shell uname -s)
+	ifeq ($(UNAME_S),Linux)
+		CLANG_FORMAT += node_modules/clang-format/bin/linux_x64/clang-format --style=Google
+	else
+		CLANG_FORMAT += node_modules/clang-format/bin/darwin_x64/clang-format --style=Google
+	endif
+
+ESLINT=node_modules/eslint/bin/eslint.js
+PRETTIER=node_modules/prettier/bin-prettier.js
+
+node_modules:
+	npm install clang-format prettier eslint [email protected] eslint-config-react-app babel-eslint eslint-plugin-import eslint-plugin-flowtype eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
+
+pretty: node_modules
+	$(PRETTIER) --write frontend/src/*.css
+	$(PRETTIER) --write frontend/src/*.js
+	find backend/src/main -iname *.java | xargs $(CLANG_FORMAT) -i
+
+validate: node_modules
+	$(ESLINT) frontend/src/*.js