prettierの導入

.eslintrc.js

@@ -1,18 +1,19 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "prettier",
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
 }

package.json

@@ -19,7 +19,8 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "test": "jest"
+    "test": "jest",
+    "format": " npx prettier -w  */**/*.vue &&  npx prettier -w  */**/*.ts"
   },
   "dependencies": {
     "@mdi/font": "5.9.55",
@@ -28,6 +29,7 @@
     "axios-jsonp": "^1.0.4",
     "core-js": "^3.8.3",
     "jest": "^28.1.3",
+    "prettier": "2.7.1",
     "roboto-fontface": "*",
     "ts-jest": "^28.0.7",
     "vue": "^3.2.13",
@@ -42,6 +44,7 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",

prettier.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  printWidth: 80, //デフォルト
+  semi: false,
+  singleQuote: false, //デフォルト
+  tabWidth: 2, //デフォルト
+  arrowParens: "always", //デフォルト
+  endOfLine: "lf", //デフォルト
+  useTabs: false, //デフォルト
+  quoteProps: "as-needed", //デフォルト
+  jsxSingleQuote: false, //デフォルト
+  trailingComma: "es5", //デフォルト
+  bracketSpacing: true, //デフォルト
+  jsxBracketSameLine: false, //デフォルト
+};

src/App.vue

@@ -1,18 +1,17 @@
 <template>
   <v-app>
-    <Page/>
+    <Page />
   </v-app>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import WrapperPage from './components/pages/WrapperPage.vue'
+import { defineComponent } from "vue"
+import WrapperPage from "./components/pages/WrapperPage.vue"
 
 export default defineComponent({
-  name: 'App',
-  components:{
-    Page:WrapperPage
-  }
+  name: "App",
+  components: {
+    Page: WrapperPage,
+  },
 })
-
 </script>

src/components/atoms/DoubleIconButton.vue

@@ -1,38 +1,38 @@
-<template>
-  <v-btn
-    color="primary"
-    elevation="1"
-    rounded
-    x-large
-    :loading="is_loading"
-    :disabled="is_loading"
-    v-on:click="loader = 'loading'"
-  >
-    <V-icon>mdi-emoticon-happy-outline</V-icon>
-    or
-    <V-icon>mdi-emoticon-cry-outline</V-icon>
-  </v-btn>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data(){
-    return{
-      loader:null
-    }
-  },
-  props:{
-    is_loading:{
-      type:Boolean,
-      default:false
-    }
-  },
-  watch:{
-    loader(){
-      this.loader = null
-    }
-  }
-})
-</script>
+<template>
+  <v-btn
+    color="primary"
+    elevation="1"
+    rounded
+    x-large
+    :loading="is_loading"
+    :disabled="is_loading"
+    v-on:click="loader = 'loading'"
+  >
+    <V-icon>mdi-emoticon-happy-outline</V-icon>
+    or
+    <V-icon>mdi-emoticon-cry-outline</V-icon>
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  data() {
+    return {
+      loader: null,
+    }
+  },
+  props: {
+    is_loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    loader() {
+      this.loader = null
+    },
+  },
+})
+</script>

src/components/atoms/NormalCard.vue

@@ -1,32 +1,32 @@
-<template>
-  <v-card class="ma-1 " v-bind:color="item.color" >
-      <v-card-title primary-title >
-              {{item.title}}
-      </v-card-title>
-      <v-card-text>
-          {{item.description}}
-      </v-card-text>
-  </v-card>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props:{
-    'item':{
-      type:Object,
-      required:true
-    }
-  }
-})
-</script>
-
-<style scoped>
-.v-card-title{
-  color: grey;
-}
-.v-card-text{
-  color: gray;
-}
-</style>
+<template>
+  <v-card class="ma-1" v-bind:color="item.color">
+    <v-card-title primary-title>
+      {{ item.title }}
+    </v-card-title>
+    <v-card-text>
+      {{ item.description }}
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style scoped>
+.v-card-title {
+  color: grey;
+}
+.v-card-text {
+  color: gray;
+}
+</style>

src/components/atoms/RoundButton.vue

@@ -1,40 +1,40 @@
-<template>
-  <v-btn
-    color="primary"
-    elevation="1"
-    rounded
-    x-large
-    :loading="is_loading"
-    :disabled="is_loading"
-    v-on:click="loader = 'loading'"
-  >
-    {{name}}
-  </v-btn>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data(){
-    return{
-      loader:null
-    }
-  },
-  props:{
-    name:{
-      type:String,
-      required:true
-    },
-    is_loading:{
-      type:Boolean,
-      default:false
-    }
-  },
-  watch:{
-    loader(){
-      this.loader = null
-    }
-  }
-})
-</script>
+<template>
+  <v-btn
+    color="primary"
+    elevation="1"
+    rounded
+    x-large
+    :loading="is_loading"
+    :disabled="is_loading"
+    v-on:click="loader = 'loading'"
+  >
+    {{ name }}
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  data() {
+    return {
+      loader: null,
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    is_loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    loader() {
+      this.loader = null
+    },
+  },
+})
+</script>