Adds eslint and prettier

syropian · syropian · commit 63b8aeeb2e62 · 2021-09-22T10:42:06.000-04:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,31 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2021,
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/prettier',
+    '@vue/prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': ['off', { argsIgnorePattern: '^_' }],
+    'vue/script-setup-uses-vars': 'error',
+    'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+  },
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,3 @@
+src/dist
+demo/dist
+node_modules
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "printWidth": 120,
+  "vueIndentScriptAndStyle": false
+}
diff --git a/demo/sandbox/src/Sandbox.vue b/demo/sandbox/src/Sandbox.vue
@@ -1,54 +1,38 @@
 <template>
   <div>
-    <input
-      type="text"
-      class="input"
-      placeholder="Watch me change size with my content!"
-      v-model="msg"
-      v-autowidth
-    />
+    <input v-model="msg" v-autowidth type="text" class="input" placeholder="Watch me change size with my content!" />
   </div>
 
   <div>
-    <input
-      type="text"
-      class="input"
-      v-model="msg"
-      v-autowidth="{ minWidth: '75px', maxWidth: '100px' }"
-    />
+    <input v-model="msg" v-autowidth="{ minWidth: '75px', maxWidth: '100px' }" type="text" class="input" />
   </div>
 
   <div>
     <input
+      v-model="msg"
+      v-autowidth="{ comfortZone: '10px' }"
       type="text"
       class="input"
-      v-model="msg"
       placeholder="Watch me change size with my content!"
-      v-autowidth="{ comfortZone: '10px' }"
     />
   </div>
 
   <div>
-    <input
-      type="text"
-      class="input"
-      placeholder="Watch me change size with my content!"
-      v-autowidth
-    />
+    <input v-autowidth type="text" class="input" placeholder="Watch me change size with my content!" />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   setup() {
-    const msg = ref("");
+    const msg = ref('')
     return {
       ref,
       msg,
-    };
+    }
   },
-});
+})
 </script>
 
 <style>
diff --git a/demo/sandbox/src/main.ts b/demo/sandbox/src/main.ts
@@ -1,6 +1,6 @@
-import { createApp } from "vue";
-import Sandbox from "./Sandbox.vue";
-import { plugin as VueInputAutowidth } from "../../../src/";
-import "../../src/app.css";
+import { createApp } from 'vue'
+import Sandbox from './Sandbox.vue'
+import { plugin as VueInputAutowidth } from '../../../src/'
+import '../../src/app.css'
 
-createApp(Sandbox).use(VueInputAutowidth).mount("#app");
+createApp(Sandbox).use(VueInputAutowidth).mount('#app')
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="px-8 my-32 md:px-0">
-    <div
-      class="flex items-center justify-between w-full mx-auto mt-8 max-w-prose"
-    >
+    <div class="flex items-center justify-between w-full mx-auto mt-8 max-w-prose">
       <h1 class="text-4xl font-bold">
         <span class="relative inline-block top-1">↔️</span>
         <span class="inline-block ml-2">vue-input-autowidth</span>
@@ -33,13 +31,7 @@
       </nav>
     </div>
     <div class="w-full mx-auto mt-8 max-w-prose">
-      <input
-        type="text"
-        class="input"
-        placeholder="Watch me change size with my content!"
-        v-model="msg"
-        v-autowidth
-      />
+      <input v-model="msg" v-autowidth type="text" class="input" placeholder="Watch me change size with my content!" />
     </div>
     <div class="w-full mx-auto mt-8 prose max-w-prose">
       <h2>Install</h2>
@@ -57,56 +49,54 @@
       <p>You can pass various options to the directive</p>
       <highlightjs language="xml" :code="showOptionsCode" />
       <input
-        type="text"
-        class="input"
-        placeholder="An example with custom options"
         v-model="msg"
         v-autowidth="{
           minWidth: '75px',
           maxWidth: '75%',
           comfortZone: '1ch',
         }"
+        type="text"
+        class="input"
+        placeholder="An example with custom options"
       />
 
       <footer>
-        <p class="text-gray-500">
-          &copy; {{ new Date().getFullYear() }} Collin Henderson
-        </p>
+        <p class="text-gray-500">&copy; {{ new Date().getFullYear() }} Collin Henderson</p>
       </footer>
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from "vue";
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   setup() {
-    const msg = ref("");
+    const msg = ref('')
 
     const installCode = ref(`$ npm install vue-input-autowidth@next --save
 # or...
-$ yarn add vue-input-autowidth@next`);
+$ yarn add vue-input-autowidth@next`)
     const addGlobalCode = ref(`import { createApp } from 'vue'
 import App from './App.vue'
 import { plugin as VueInputAutowidth } from 'vue-input-autowidth'
 
 createApp(App).use(VueInputAutowidth).mount("#app")
-`);
+`)
     const perComponentCode = `import { directive as VueInputAutowidth } from 'vue-input-autowidth'
 
 export default {
   directives: { autowidth: VueInputAutowidth },
   setup() {
     ...
   },
-}`;
+}`
     const useDirectiveCode = `<input
   type="text"
   placeholder="Watch me change size with my content!"
   v-model="msg"
   v-autowidth
-/>`;
+/>`
 
     const showOptionsCode = ref(`<input
   type="text"
@@ -117,17 +107,17 @@ export default {
     maxWidth: '75%',
     comfortZone: '1ch',
   }"
-/>`);
+/>`)
     return {
       msg,
       installCode,
       addGlobalCode,
       perComponentCode,
       useDirectiveCode,
       showOptionsCode,
-    };
+    }
   },
-});
+})
 </script>
 
 <style>
diff --git a/demo/src/main.ts b/demo/src/main.ts
@@ -1,9 +1,9 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import { plugin as VueInputAutowidth } from "../../src/";
-import "highlight.js/lib/common";
-import hljsVuePlugin from "@highlightjs/vue-plugin";
-import "highlight.js/styles/atom-one-dark.css";
-import "./app.css";
+import { createApp } from 'vue'
+import App from './App.vue'
+import { plugin as VueInputAutowidth } from '../../src/'
+import 'highlight.js/lib/common'
+import hljsVuePlugin from '@highlightjs/vue-plugin'
+import 'highlight.js/styles/atom-one-dark.css'
+import './app.css'
 
-createApp(App).use(VueInputAutowidth).use(hljsVuePlugin).mount("#app");
+createApp(App).use(VueInputAutowidth).use(hljsVuePlugin).mount('#app')
diff --git a/demo/tailwind.config.js b/demo/tailwind.config.js
@@ -1,12 +1,12 @@
 module.exports = {
-  mode: "jit",
-  purge: ["./index.html", "./src/**/*.{vue,js,ts}"],
+  mode: 'jit',
+  purge: ['./index.html', './src/**/*.{vue,js,ts}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
   },
   variants: {
     extend: {},
   },
-  plugins: [require("@tailwindcss/typography")],
-};
+  plugins: [require('@tailwindcss/typography')],
+}
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -14,12 +14,5 @@
     "allowJs": true,
     "types": ["node", "vite/client"]
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.vue",
-    "vite.config.ts",
-    "sandbox/**/*.ts",
-    "sandbox/**/*.d.ts"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "vite.config.ts", "sandbox/**/*.ts", "sandbox/**/*.d.ts"]
 }
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
@@ -1,10 +1,10 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   server: {
     port: 3001,
   },
-});
+})
diff --git a/package.json b/package.json
@@ -20,14 +20,24 @@
     "serve": "vite preview",
     "test": "start-server-and-test demo http-get://localhost:3001 cypress",
     "cypress": "cypress run",
+    "lint": "eslint --ext .ts,vue --ignore-path .gitignore ./src ./demo ./tests",
+    "format": "prettier ./src ./demo ./tests  -w -u",
     "demo": "cd demo && vite",
     "demo:build": "cd demo && vite build",
     "postinstall": "cd demo && yarn"
   },
   "devDependencies": {
     "@types/jest": "^27.0.1",
     "@types/node": "^16.9.2",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^7.0.0",
     "cypress": "^8.4.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^7.18.0",
+    "prettier": "2.4.1",
     "start-server-and-test": "^1.14.0",
     "typescript": "^4.3.2",
     "vite": "^2.5.4",
diff --git a/src/directive.ts b/src/directive.ts
diff --git a/src/index.ts b/src/index.ts
diff --git a/tests/index.test.ts b/tests/index.test.ts
diff --git a/vite.config.ts b/vite.config.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+src/dist`
	`2`	`+demo/dist`
	`3`	`+node_modules`