feature: create extendable eslint config (#44)

.eslintignore

@@ -4,5 +4,5 @@ node_modules
 # don't lint build output (make sure it's set to your correct build folder name)
 dist
 
-*.config.*
-
+*config*
+*rc.*

.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+	parserOptions: {
+		parser: "@typescript-eslint/parser",
+		project: [
+			"./tsconfig.eslint.json"
+		],
+		tsConfigRootDir: "./"
+	},
+	extends: [
+		"@pdap-design-system/eslint-config",
+		"plugin:@typescript-eslint/recommended",
+		"@vue/typescript/recommended",
+	],
+	plugins: [
+		"@typescript-eslint",
+	],
+	overrides: [
+		{
+			"extends": [
+				"plugin:@typescript-eslint/disable-type-checked"
+			],
+			"files": [
+				"./**/*.js"
+			]
+		}
+	],
+	rules: {
+		"@typescript-eslint/indent": "off",
+	}
+}

.vscode/settings.json

@@ -1,4 +1,11 @@
 {
 	"css.validate": false,
-	"eslint.validate": ["typescript", "javascript", "vue"],
-}
+	"eslint.validate": [
+		"typescript",
+		"javascript",
+		"vue"
+	],
+	"editor.codeActionsOnSave": {
+		"source.eslint.fixAll": "explicit"
+	},
+}

README.md

@@ -32,7 +32,21 @@ import 'pdap-design-system/styles';
 import { Button, Form } from 'pdap-design-system';
 ```
 
-4. Optional: Import the tailwind config if you need to use additional tailwind styles.
+1. Extend the `es-lint` config, for consistency in linting between client apps:
+First `npm install --save-dev @pdap-design-system/eslint-config`, then, in `eslintrc`:
+
+```
+{ 
+  ...,
+	extends: [
+		"@pdap-design-system/eslint-config",
+    ...
+	],
+}
+```
+
+
+5. (Optional) Import the tailwind config if you need to use additional tailwind styles.
 
 ```
 // tailwind.config.js
@@ -51,7 +65,7 @@ module.exports = {
 
 ```
 
-5. If the project is using `TypeScript`, the component props definitions and other types are exposed for import as well.  
+6. If the project is using `TypeScript`, the component props definitions and other types are exposed for import as well.  
    _n.b. This can be particularly useful for composing `Form` schemas, where `Input` schema objects are defined differently depending on the `type` of input desired._
 
 ```

eslint-config/index.js

@@ -0,0 +1,49 @@
+module.exports = {
+	root: true,
+	parser: 'vue-eslint-parser',
+	extends: [
+		'eslint:recommended',
+		'plugin:vue/vue3-essential',
+		'plugin:vue/vue3-recommended',
+		'plugin:vue/strongly-recommended',
+		'@vue/eslint-config-prettier',
+	],
+	env: {
+		node: true
+	},
+	plugins: ['prettier'],
+	rules: {
+		'vue/require-default-prop': 'off',
+		indent: 'off',
+		'vue/no-reserved-component-names': 'off',
+		'vue/html-self-closing': [
+			'error',
+			{
+				html: {
+					void: 'always',
+					normal: 'always',
+					component: 'always',
+				},
+				svg: 'always',
+				math: 'always',
+			},
+		],
+		'prettier/prettier': [
+			'warn',
+			{
+				indent: [
+					'warn',
+					'tab',
+					{
+						SwitchCase: 2,
+					},
+				],
+				tabWidth: 2,
+				useTabs: true,
+				singleQuote: true,
+				quotes: [2, "single", { "avoidEscape": true }]
+			},
+		],
+		'vue/no-multiple-template-root': 'off',
+	},
+};