Extend linting to types and markdown, fix errors (#368)

Author: kurkle

.markdownlint.yml

@@ -0,0 +1,3 @@
+MD013: false # line-length
+MD033: false # inline HTML
+MD041: false # first line heading

CONTRIBUTING.md

@@ -1,3 +1,5 @@
+# Contributing
+
 Contributions to Chart.js are welcome and encouraged, but please have a look through the guidelines in this document before raising an issue, or writing code for the project.
 
 ## Using issues

README.md

@@ -19,9 +19,6 @@ Annotations work with line, bar, scatter and bubble charts that use linear, loga
 
 [View this example on CodePen](https://codepen.io/compwright/full/mmQMrZ/)
 
-
-
-
 ## To-do Items
 
 The following features still need to be done:

package-lock.json

@@ -21,15 +21,20 @@
     "dev": "karma start --auto-watch --no-single-run --browsers chrome",
     "docs": "npm run build && vuepress build docs --dest dist/docs",
     "docs:dev": "npm run build && vuepress dev docs",
-    "lint": "eslint \"old_samples/**/*.html\" \"test/**/*.js\" \"src/**/*.js\"",
+    "lint": "concurrently \"npm:lint-*\"",
+    "lint-js": "eslint \"old_samples/**/*.html\" \"test/**/*.js\" \"src/**/*.js\"",
+    "lint-md": "markdownlint-cli2 \"**/*.md\" \"**/*.mdx\" \"#**/node_modules\"",
+    "lint-types": "eslint \"types/**/*.ts\" && tsc -p types/tests/",
     "test": "cross-env NODE_ENV=test concurrently \"npm:test-*\"",
-    "test-types": "tsc -p types/test/",
+    "test-types": "tsc -p types/tests/",
     "test-lint": "npm run lint",
     "test-karma": "karma start --auto-watch --single-run"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^11.2.0",
     "chart.js": "^3.0.0-rc.3",
+    "@typescript-eslint/eslint-plugin": "^4.19.0",
+    "@typescript-eslint/parser": "^4.19.0",
     "chartjs-plugin-autocolors": "0.0.3",
     "chartjs-test-utils": "^0.2.2",
     "concurrently": "^6.0.0",
@@ -45,6 +50,7 @@
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
     "karma-rollup-preprocessor": "^7.0.7",
+    "markdownlint-cli2": "0.0.15",
     "pixelmatch": "^5.2.1",
     "rollup": "^2.42.3",
     "rollup-plugin-istanbul": "^3.0.0",

package.json

@@ -0,0 +1,23 @@
+parser: '@typescript-eslint/parser'
+
+plugins:
+  - '@typescript-eslint'
+
+extends:
+  - chartjs
+  - plugin:@typescript-eslint/recommended
+
+rules:
+  # Replace stock eslint rules with typescript-eslint equivalents for proper
+  # TypeScript support.
+  no-use-before-define: "off"
+  '@typescript-eslint/no-use-before-define': "error"
+  no-shadow: "off"
+  '@typescript-eslint/no-shadow': "error"
+
+  # These rules were set to warning to make the linting pass initially,
+  # without making any major changes to types.
+  object-curly-spacing: ["warn", "always"]
+  '@typescript-eslint/no-empty-interface': "warn"
+  '@typescript-eslint/ban-types': "warn"
+  '@typescript-eslint/adjacent-overload-signatures': "warn"

types/.eslintrc.yml

@@ -1,4 +1,4 @@
-import { AnnotationOptions } from "./options";
+import { AnnotationOptions } from './options';
 
 export interface AnnotationElement {
 	x: number,

types/element.d.ts

@@ -1,5 +1,5 @@
-import { Chart } from "chart.js";
-import { AnnotationElement } from "./element";
+import { Chart } from 'chart.js';
+import { AnnotationElement } from './element';
 
 export interface EventContext {
 	chart: Chart,

types/events.d.ts

@@ -2,9 +2,9 @@ import { Plugin, ChartType } from 'chart.js';
 import { AnnotationPluginOptions } from './options';
 
 declare module 'chart.js' {
-	interface PluginOptionsByType<TType extends ChartType> {
-	  annotation: AnnotationPluginOptions;
-	}
+  interface PluginOptionsByType<TType extends ChartType> {
+    annotation: AnnotationPluginOptions;
+  }
 }
 
 declare const Annotation: Plugin;

types/index.d.ts

@@ -1,5 +1,5 @@
-import { Color, FontSpec } from "chart.js";
-import { DrawTime } from "./options";
+import { Color, FontSpec } from 'chart.js';
+import { DrawTime } from './options';
 
 export interface LabelOptions {
 	backgroundColor?: Color,
@@ -54,15 +54,15 @@ export interface LabelOptions {
 	 * Text to display in label. Provide an array to display multiple lines
 	 */
 	content: string | string[] | HTMLImageElement | null,
-	
+
 	/**
-	 * Overrides the width of the image. Could be set in pixel by a number, 
+	 * Overrides the width of the image. Could be set in pixel by a number,
 	 * or in percentage of current width of image by a string
 	 */
 	width: number | string,
 
 	/**
-	 * Overrides the height of the image. Could be set in pixel by a number, 
+	 * Overrides the height of the image. Could be set in pixel by a number,
 	 * or in percentage of current height of image by a string
 	 */
 	height: number | string,