AMP-32165 Adding eslint and prettier, deprecating jshint

Author: kelsonpw

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "plugins": ["prettier", "@amplitude/eslint-plugin-amplitude"],
+  "env": { "es6": true, "browser": true, "node": 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"
+  }
+}

.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

@@ -4,7 +4,8 @@ TESTS = $(wildcard test/*.js)
 BINS = node_modules/.bin
 MINIFY = $(BINS)/uglifyjs
 JSDOC = $(BINS)/jsdoc
-JSHINT = $(BINS)/jshint
+PRETTIER = $(BINS)/prettier
+ESLINT = $(BINS)/eslint
 BUILD_DIR = build
 PROJECT = amplitude
 OUT = $(PROJECT).js
@@ -65,7 +66,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)
+	@$(PRETTIER) --write $(src)
+	@$(ESLINT) --fix $(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.umd.js # generates npm version, also usable in require js app
@@ -79,7 +81,8 @@ $(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)
+	@$(PRETTIER) --write $(src)
+	@$(ESLINT) --fix $(SRC)
 	@$(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,13 @@
     "@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",
     "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",
@@ -47,7 +50,7 @@
     "karma-sinon": "^1.0.5",
     "karma-sourcemap-loader": "^0.3.7",
     "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,7 +70,13 @@
     "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}/**/*.js\"",
+    "lint:eslint": "eslint 'src/**/*.js'",
+    "fix": "yarn run fix:eslint && yarn run fix:prettier",
+    "fix:prettier": "prettier --write \"{src,test,scripts}/**/*.js\"",
+    "fix:eslint": "eslint --fix 'src/**/*.js'"
   },
   "bugs": {
     "url": "https://github.com/amplitude/amplitude-javascript/issues"

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,15 @@
 const fs = require('fs');
 const path = require('path');
-const {version} = require('../package');
-const {format} = require('date-fns');
+const { version } = require('../package');
+const { format } = require('date-fns');
 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}`);