style(automatting and quality): Add prettier and eslint to run on commit and build, deprecate jshint (#336)

* style(autoformat and quality checks):  Adding eslint and prettier, deprecating jshint

* style(autoformat and quality checks):AMP-32165 update makefile

* style(autoformat and quality checks): get all files to pass prettier and eslint

* style(autoformat and quality checks): Adding husky pre-commit hooks

* style(autoformatting): fix order of lint staged commands

* ci: add eslint and prettier checks to test

* build: remove eslint and prettier checks from makefile

* build: added website directory to prettier and eslint checks

Author: kelsonpw

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "plugins": ["prettier", "@amplitude/eslint-plugin-amplitude"],
+  "env": { "es6": true, "browser": true, "node": true, "mocha": true },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2018
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "no-prototype-builtins": "off"
+  },
+  "globals": {
+    "BUILD_COMPAT_REACT_NATIVE": "readonly",
+    "BUILD_COMPAT_LOCAL_STORAGE": "readonly",
+    "BUILD_COMPAT_SNIPPET": "readonly",
+    "BUILD_COMPAT_2_0": "readonly",
+    "assert": "readonly",
+    "expect": "readonly",
+    "should": "readonly",
+    "define": "readonly",
+    "amplitude": "readonly",
+    "opera": "readonly",
+    "ActiveXObject": "readonly"
+  }
+}

.github/workflows/test.yml

@@ -30,6 +30,14 @@ jobs:
       run: |
         yarn install --frozen-lockfile
 
+    - name: prettier check
+      run: |
+        yarn run lint:prettier
+
+    - name: eslint check
+      run: |
+        yarn run lint:eslint
+
     - name: Build and run tests
       run: |
         make test

.jshintrc

@@ -14,7 +14,8 @@ build
 karma.conf.js
 scripts
 .npmignore
-.jshintrc
+.prettierrc.json
+.eslintrc.json
 amplitude.min.js
 amplitude-snippet.min.js
 amplitude.nocompat.min.js

.npmignore

@@ -0,0 +1 @@
+*.md

.prettierignore

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "proseWrap": "always",
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.prettierrc.json

@@ -0,0 +1,24 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnType": true,
+  "editor.formatOnPaste": false,
+  "editor.formatOnSave": true,
+  "editor.rulers": [120],
+  "editor.tabSize": 2,
+  "files.autoSave": "onWindowChange",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  "search.exclude": {
+    "**/node_modules/": true,
+    "**/build/": true,
+    "**/dist/": true
+  },
+  "[json]": {
+    "editor.formatOnType": false,
+    "editor.formatOnPaste": false,
+    "editor.formatOnSave": false
+  }
+}

.vscode/settings.json

@@ -4,7 +4,6 @@ TESTS = $(wildcard test/*.js)
 BINS = node_modules/.bin
 MINIFY = $(BINS)/uglifyjs
 JSDOC = $(BINS)/jsdoc
-JSHINT = $(BINS)/jshint
 BUILD_DIR = build
 PROJECT = amplitude
 OUT = $(PROJECT).js
@@ -65,9 +64,8 @@ README.md: $(SNIPPET_OUT) version
 #
 
 $(OUT): node_modules $(SRC) package.json rollup.config.js rollup.min.js rollup.native.js rollup.esm.js rollup.umd.js rollup.umd.min.js
-	@$(JSHINT) --verbose $(SRC)
 	@NODE_ENV=production $(ROLLUP) --config rollup.config.js # is the snippet build config
-	@NODE_ENV=production $(ROLLUP) --config rollup.esm.js # does not concat dependencies, only has module and dependencies 
+	@NODE_ENV=production $(ROLLUP) --config rollup.esm.js # does not concat dependencies, only has module and dependencies
 	@NODE_ENV=production $(ROLLUP) --config rollup.umd.js # generates npm version, also usable in require js app
 	@NODE_ENV=production $(ROLLUP) --config rollup.native.js # generates react native build
 	@NODE_ENV=production $(ROLLUP) --config rollup.nocompat.js # may be able to remove
@@ -79,7 +77,6 @@ $(OUT): node_modules $(SRC) package.json rollup.config.js rollup.min.js rollup.n
 # Target for minified `amplitude-snippet.js` file.
 #
 $(SNIPPET_OUT): $(SRC) $(SNIPPET)
-	@$(JSHINT) --verbose $(SNIPPET)
 	@$(MINIFY) $(SNIPPET) -m -b max-line-len=80,beautify=false | awk 'NF' > $(SNIPPET_OUT)
 
 $(SEGMENT_SNIPPET_OUT): $(SRC) $(SNIPPET)

Makefile

@@ -21,6 +21,7 @@
     "query-string": "5"
   },
   "devDependencies": {
+    "@amplitude/eslint-plugin-amplitude": "^1.0.1",
     "@babel/core": "^7.3.4",
     "@babel/plugin-external-helpers": "^7.2.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
@@ -32,11 +33,14 @@
     "@semantic-release/git": "^9.0.0",
     "chai": "^4.1.2",
     "date-fns": "^1.30.1",
+    "eslint": "^7.15.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.3.0",
     "express": "^4.16.2",
     "fs-extra": "^4.0.2",
+    "husky": "^4.3.6",
     "jsdoc": "^3.6.3",
     "jsdoc-to-markdown": "^6.0.1",
-    "jshint": "^2.9.6",
     "karma": "^4.0.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -46,8 +50,9 @@
     "karma-sauce-launcher": "^2.0.2",
     "karma-sinon": "^1.0.5",
     "karma-sourcemap-loader": "^0.3.7",
+    "lint-staged": "^10.5.3",
     "mocha": "^4.0.1",
-    "prettier": "^2.1.1",
+    "prettier": "^2.2.1",
     "requirejs": "^2.3.6",
     "rollup": "^1.4.1",
     "rollup-plugin-babel": "^4.3.2",
@@ -67,13 +72,30 @@
     "docs:install": "cd website/ && yarn install",
     "docs:generate-jsdoc": "cd website && yarn generate-jsdoc",
     "docs:start": "cd website/ && yarn start",
-    "docs:deploy": "cd website/ && yarn deploy"
+    "docs:deploy": "cd website/ && yarn deploy",
+    "lint": "yarn run lint:prettier && yarn run lint:eslint",
+    "lint:prettier": "prettier --check \"{src,test,scripts,website}/**/*.js\"",
+    "lint:eslint": "eslint \"{src,test,scripts,website}/**/*.js\"",
+    "fix": "yarn run fix:eslint && yarn run fix:prettier",
+    "fix:prettier": "prettier --write \"{src,test,scripts,website}/**/*.js\"",
+    "fix:eslint": "eslint --fix \"{src,test,scripts,website}/**/*.js\""
   },
   "bugs": {
     "url": "https://github.com/amplitude/amplitude-javascript/issues"
   },
   "homepage": "https://github.com/amplitude/amplitude-javascript#readme",
   "directories": {
     "test": "test"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "{src,test,scripts,website}/**/*.js": [
+      "prettier --write",
+      "eslint --fix"
+    ]
   }
 }

package.json

@@ -3,16 +3,17 @@ var path = require('path');
 
 // Update the README with the minified snippet.
 var cwd = process.cwd();
-var readmeFilename = path.join(cwd, "README.md");
+var readmeFilename = path.join(cwd, 'README.md');
 var readme = fs.readFileSync(readmeFilename, 'utf-8');
 
-var snippetFilename = path.join(cwd, "amplitude-snippet.min.js");
+var snippetFilename = path.join(cwd, 'amplitude-snippet.min.js');
 var snippet = fs.readFileSync(snippetFilename, 'utf-8');
 var script =
-'        <script type="text/javascript">\n' +
-snippet.trim().replace(/^/gm, '          ') + '\n\n' +
-'          amplitude.getInstance().init("YOUR_API_KEY_HERE");\n' +
-'        </script>';
+  '        <script type="text/javascript">\n' +
+  snippet.trim().replace(/^/gm, '          ') +
+  '\n\n' +
+  '          amplitude.getInstance().init("YOUR_API_KEY_HERE");\n' +
+  '        </script>';
 
 var updated = readme.replace(/ +<script[\s\S]+?script>/, script);
 fs.writeFileSync(readmeFilename, updated);

scripts/readme.js

@@ -1,17 +1,14 @@
 const fs = require('fs');
 const path = require('path');
-const {version} = require('../package');
-const {format} = require('date-fns');
+const { version } = require('../package');
 const crypto = require('crypto');
 
 const cwd = process.cwd();
 
 function replaceTextInFile(filepath, match, replacement) {
   var filename = path.join(cwd, filepath);
 
-  const updatedText = fs
-    .readFileSync(filename, 'utf-8')
-    .replace(match, replacement);
+  const updatedText = fs.readFileSync(filename, 'utf-8').replace(match, replacement);
 
   if (updatedText.indexOf(replacement) === -1) {
     throw new Error(`Failed to update text in ${filepath}`);
@@ -35,7 +32,7 @@ const sdkText = fs.readFileSync(path.join('.', `amplitude.min.js`), 'utf-8');
 const hash = crypto.createHash('sha384').update(sdkText).digest('base64');
 replaceTextInFile(
   path.join('src', 'amplitude-snippet.js'),
-  /as.integrity = 'sha384-[a-zA-Z0-9+\/]+';/,
+  /as.integrity = 'sha384-[a-zA-Z0-9+/]+';/,
   `as.integrity = 'sha384-${hash}';`,
 );