update to node 20.10.0 and fix eslint

.eslintrc.js

@@ -2,30 +2,53 @@ module.exports = {
   root: true,
   env: {
     browser: true,
-    node: true
+    node: true,
   },
   parser: 'vue-eslint-parser',
   parserOptions: {
     ecmaVersion: 2016,
-    parser: 'babel-eslint'
+    parser: 'babel-eslint',
   },
   extends: [
     '@nuxtjs',
     'plugin:nuxt/recommended',
-    'plugin:vue/recommended'
-  ],
-  plugins: [
-    'vue',
-    'html'
+    'plugin:vue/recommended',
+    'prettier',
   ],
+  plugins: ['html', 'vue'],
   // add your custom rules here
   rules: {
-    quotes: ['error', 'single'],
-    camelcase: 'warn',
-    'vue/no-mutating-props': 'warn',
-    'brace-style': 'warn',
-    'eqeqeq': 'warn',
-    'quotes': 'warn',
-    semi: 'error'
-  }
+    // タグの最後で改行しないで
+    'vue/html-closing-bracket-newline': [2, { multiline: 'never' }],
+    // 不要なカッコは消す
+    'no-extra-parens': 1,
+    // 無駄なスペースは削除
+    'no-multi-spaces': 2,
+    // 不要な空白行は削除。2行開けてたらエラー
+    'no-multiple-empty-lines': [2, { max: 1 }],
+    // 関数とカッコはあけない(function hoge() {/** */})
+    'func-call-spacing': [2, 'never'],
+    // true/falseを無駄に使うな
+    'no-unneeded-ternary': 2,
+    // セミコロンは禁止
+    semi: [2, 'never'],
+    // 文字列はシングルクオートのみ
+    quotes: [2, 'single'],
+    // varは禁止
+    'no-var': 2,
+    // jsのインデントは２
+    indent: [2, 2],
+    // かっこの中はスペースなし！違和感
+    'space-in-parens': [2, 'never'],
+    // コンソールは許可
+    'no-console': 0,
+    // カンマの前後にスペース入れる？
+    'comma-spacing': 2,
+    // 配列のindexには空白入れるな(hogehoge[ x ])
+    'computed-property-spacing': 2,
+    // キー
+    'key-spacing': 2,
+    // キーワードの前後には適切なスペースを
+    'keyword-spacing': 2,
+  },
 }

.node-version

@@ -1 +1 @@
-14.17.2
+20.10.0

.prettierrc.yaml

@@ -0,0 +1,16 @@
+tabWidth: 2
+useTabs: false
+semi: true
+singleQuote: false
+quoteProps: "as-needed"
+trailingComma: "es5"
+bracketSpacing: true
+bracketSameLine: false
+arrowParens: "always"
+requirePragma: false
+insertPragma: false
+htmlWhitespaceSensitivity: "css"
+vueIndentScriptAndStyle: true
+endOfLine: "lf"
+embeddedLanguageFormatting: "off"
+singleAttributePerLine: false

.settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": false
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "eslint.validate": []
+}

components/Logo.vue

@@ -1,13 +1,13 @@
-<template>
-  <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two" />
-    <div class="Triangle Triangle--one" />
-    <div class="Triangle Triangle--three" />
-    <div class="Triangle Triangle--four" />
-  </div>
+<template lang="pug">
+<div class="VueToNuxtLogo">
+  <div class="Triangle Triangle--two" />
+  <div class="Triangle Triangle--one" />
+  <div class="Triangle Triangle--three" />
+  <div class="Triangle Triangle--four" />
+</div>
 </template>
 
-<style>
+<style lang="js">
 .VueToNuxtLogo {
   display: inline-block;
   animation: turn 2s linear forwards 1s;

components/Modal.vue

@@ -1,18 +1,18 @@
 <template lang="pug">
-  div
-    .modal(v-bind:class='{open: isOpen}')
-      p(v-if="map_config") {{map_config.map_description}}
-      p
-        | このサイトのソースコードはオープンに公開しております。開発にご協力いただける方は、
-        a(href="https://github.com/codeforjapan/mapprint") Code for Japan の Github リポジトリ
-        | から、開発にご参加ください。JavaScript や Leaflet などの経験がある方、大歓迎です。
-      div
-        span.modal-close(@click='handleClick')
-          | × close
-    .modal-background(@click='handleClick' :class='{open: isOpen}')
+div
+  .modal(v-bind:class='{open: isOpen}')
+    p(v-if="map_config") {{map_config.map_description}}
+    p
+      | このサイトのソースコードはオープンに公開しております。開発にご協力いただける方は、
+      a(href="https://github.com/codeforjapan/mapprint") Code for Japan の Github リポジトリ
+      | から、開発にご参加ください。JavaScript や Leaflet などの経験がある方、大歓迎です。
+    div
+      span.modal-close(@click='handleClick')
+        | × close
+  .modal-background(@click='handleClick' :class='{open: isOpen}')
 </template>
 
-<script>
+<script lang="js">
 export default {
   props: ['isOpen'],
   data () {