build: add eslint + prettier support

Author: Celtech

Diff for: .editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = false

Diff for: .eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  settings: {
+    react: {
+      version: '16.0',
+    },
+  },
+  env: {
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'airbnb',
+    'prettier',
+  ],
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': ['error'],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+  },
+};

Diff for: .prettierrc

@@ -0,0 +1,14 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "consistent",
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "arrowParens": "always",
+  "endOfLine": "auto",
+  "htmlWhitespaceSensitivity": "ignore"
+}

Diff for: package.json

@@ -7,9 +7,25 @@
   "author": "Tim Hinz <[email protected]>",
   "license": "MIT",
   "private": true,
-  "workspaces": ["packages/*"],
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "lint:js": "eslint --ext \".js,.vue,.ts\" --ignore-path .gitignore .",
+    "lint:fix": "eslint --ext \".js,.vue,.ts\" --fix --ignore-path .gitignore ."
+  },
   "devDependencies": {
+    "eslint": "^8.17.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-vue": "^9.1.1",
     "lerna": "^5.1.4",
-    "nx": "^14.3.6"
+    "nx": "^14.3.6",
+    "prettier": "^2.7.1"
   }
 }

Diff for: packages/app/src/App.vue

@@ -1,7 +1,7 @@
 <script setup>
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
-import HelloWorld from './components/HelloWorld.vue'
+import HelloWorld from './components/HelloWorld.vue';
 </script>
 
 <template>

Diff for: packages/app/src/components/HelloWorld.vue

@@ -1,11 +1,14 @@
 <script setup>
-import { ref } from 'vue'
+import { ref } from 'vue';
 
 defineProps({
-  msg: String
-})
+  msg: {
+    type: String,
+    required: true,
+  },
+});
 
-const count = ref(0)
+const count = ref(0);
 </script>
 
 <template>
@@ -29,7 +32,8 @@ const count = ref(0)
   <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
+    <code>components/HelloWorld.vue</code>
+    to test hot module replacement.
   </p>
 </template>
 

Diff for: packages/app/src/main.js

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');

Diff for: packages/app/vite.config.js

@@ -1,7 +1,7 @@
-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()]
-})
+  plugins: [vue()],
+});