configure lint

.github/workflows/textlint.yaml → .github/workflows/check.yaml

@@ -1,4 +1,4 @@
-name: textlint
+name: check
 
 on:
   push:
@@ -9,12 +9,11 @@ on:
       - main
 
 env:
-  NODE_VERSION: '16.x'
+  NODE_VERSION: 16.x
 
 jobs:
-  textlint:
+  lint:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
@@ -23,5 +22,7 @@ jobs:
           cache: npm
       - name: Restore Packages
         run: npm ci
+      - name: Run lint
+        run: npm run lint
       - name: Run textlint
         run: npm run textlint:docs

.github/workflows/vitepress.yml

@@ -5,13 +5,13 @@ on:
     branches:
       - main
     paths:
-      - '.github/workflows/vitepress.yml'
+      - .github/workflows/vitepress.yml
       - 'docs/**'
   pull_request:
     branches:
       - main
     paths:
-      - '.github/workflows/vitepress.yml'
+      - .github/workflows/vitepress.yml
       - 'docs/**'
   workflow_dispatch:
 
@@ -20,7 +20,7 @@ permissions:
   id-token: write
 
 concurrency:
-  group: "pages"
+  group: pages
   cancel-in-progress: false
 
 jobs:
@@ -35,8 +35,8 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18.x'
-          cache: 'npm'
+          node-version: 18.x
+          cache: npm
           cache-dependency-path: docs/package-lock.json
       - run: npm ci
       - run: npm run build --if-present

.vscode/settings.json

@@ -1,12 +1,81 @@
 {
+  // NOTE: copied from https://github.com/antfu/eslint-config/blob/2367977f1875f2ddf4deabf0e1e02d86eee3d779/README.md?plain=1#L97
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.formatOnSaveMode": "modifications",
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    {
+      "rule": "style/*",
+      "severity": "off"
+    },
+    {
+      "rule": "format/*",
+      "severity": "off"
+    },
+    {
+      "rule": "*-indent",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spacing",
+      "severity": "off"
+    },
+    {
+      "rule": "*-spaces",
+      "severity": "off"
+    },
+    {
+      "rule": "*-order",
+      "severity": "off"
+    },
+    {
+      "rule": "*-dangle",
+      "severity": "off"
+    },
+    {
+      "rule": "*-newline",
+      "severity": "off"
+    },
+    {
+      "rule": "*quotes",
+      "severity": "off"
+    },
+    {
+      "rule": "*semi",
+      "severity": "off"
+    }
+  ],
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "gql",
+    "graphql"
+  ],
   "cSpell.words": [
+    "antfu",
+    "dearu",
+    "desumasu",
     "handson",
-    "vitepress"
+    "textlint",
+    "vitepress",
+    "vuejs"
   ]
 }

GUIDE.md

@@ -10,27 +10,27 @@ JavaScript のビルトインクラスや正規表現など、主題と関係が
         ```md
         ### 本文用の見出し1
         本文があります。本文があります。本文があります。
-        
+
         ### 参考：正規表現について
         正規表現とは、正規な表現のことです。説明つらつら。
-        
+
         ### 本文用の見出し2
         本文があります。本文があります。本文があります。
         ```
 - 外部リンクを表示したいとき
     - 引用 `> ` でリンクを表現します。
         ```md
         本文があります。
-        
+
         > [String() に関する詳細](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/String)
-        
+
         本文があります。
         ```
 
 ## 外部リンク先について
 - 原則として、リンク先は公式ドキュメントとします
 - 例えば、Vue.js 本体に関しては Vue.js 公式ドキュメント（[V3](https://v3.ja.vuejs.org/guide/introduction.html) 、 [V2](https://jp.vuejs.org/v2/guide/)）にリンクします
-- HTML、CSS、JavaScript の仕様に関しては　[MDN Web Docs](https://developer.mozilla.org/ja/docs/Web) にリンクします
+- HTML、CSS、JavaScript の仕様に関しては [MDN Web Docs](https://developer.mozilla.org/ja/docs/Web) にリンクします
 
 ## 改行について
 マークダウンでは、原則では改行されないためひとつの文章内では改行させない。改行したい場合は明示的に空行を入れて改行させるようにする
@@ -57,7 +57,7 @@ npm run textlint {チェックしたいファイル名}
 ✓ vuejs-jp/ja-space-between-half-and-full-width: 原則として、全角文字と半角文字の間にスペースを入れます。
 /Users/miyake/repos/handson-vue3/GUIDE.md:45:22
                               v
-    44. 
+    44.
     45. Pull Request でtextlintのエラーが出た場合や、PR 前に事前にチェックをしたい場合は、ローカルで以下のコマンドを実行して確認することができます。
-    46. 
+    46.
 ```

README.md

@@ -2,7 +2,7 @@
 
 [![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)
 
-Vue.js 3 ハンズオンへようこそ😀　このハンズオンは、初めて Vue.js に触れる人がスムーズに学習できるように作られた学習用教材です。この教材は、以下の2通りの方法でご利用いただけます。
+Vue.js 3 ハンズオンへようこそ😀 このハンズオンは、初めて Vue.js に触れる人がスムーズに学習できるように作られた学習用教材です。この教材は、以下の2通りの方法でご利用いただけます。
 
 ## ✏利用方法
 ### 1. Vue.js 日本ユーザーグループの公式ハンズオンに参加する

docs/.vitepress/components/PlusOne.vue

@@ -3,20 +3,24 @@ defineProps({
   name: {
     type: String,
     default: '+1 チャレンジ',
-    required: false
+    required: false,
   },
   content: {
     type: String,
     default: 'ここまでの学習が完了した人は、以下の内容にも挑戦してみましょう。',
-    required: false
+    required: false,
   },
-});
+})
 </script>
 
 <template>
   <div class="plusone_wrapper">
-    <div class="plusone_sign">{{ name }}</div>
-    <div class="plusone_content">{{ content }}</div>
+    <div class="plusone_sign">
+      {{ name }}
+    </div>
+    <div class="plusone_content">
+      {{ content }}
+    </div>
   </div>
 </template>
 
@@ -40,7 +44,7 @@ defineProps({
   color: var(--vp-c-brand);
   font-weight: bold;
   padding: 10px 0;
- 
+
 }
 @media screen and (min-width: 480px) {
   .plusone_wrapper {

docs/.vitepress/config.ts

@@ -13,51 +13,51 @@ export default defineConfig({
         items: [
           {
             text: '環境構築',
-            link: '/setup'
+            link: '/setup',
           },
           {
             text: 'プロジェクトの作成',
-            link: '/create'
-          }
-        ]
+            link: '/create',
+          },
+        ],
       },
       {
         text: '本編',
         items: [
           {
             text: 'ハンズオンの概要',
-            link: '/overview'
+            link: '/overview',
           },
           {
             text: 'data を定義し、商品をレンダリングする',
-            link: '/rendering'
+            link: '/rendering',
           },
           {
             text: 'v-for で商品を複数表示する',
-            link: '/v-for'
+            link: '/v-for',
           },
           {
             text: 'v-if で表示・非表示を切り替える',
-            link: '/v-if'
+            link: '/v-if',
           },
           {
             text: '関数で価格にカンマを入れる',
-            link: '/methods'
+            link: '/methods',
           },
           {
             text: '@click で商品を選択する',
-            link: '/event'
+            link: '/event',
           },
           {
             text: '商品をコンポーネント化する',
-            link: '/component'
+            link: '/component',
           },
           {
             text: 'コンポーネントにスロットを使用する',
-            link: '/slot'
-          }
-        ]
-      }
-    ]
-  }
+            link: '/slot',
+          },
+        ],
+      },
+    ],
+  },
 })

docs/.vitepress/theme/index.ts

@@ -6,5 +6,5 @@ export default {
 
   enhanceApp({ app }) {
     app.component('PlusOne', PlusOne)
-  }
+  },
 }