vue

コードフォーマット系のプラグインは以前の記事で入れたので、コマンドを実行すれば、コードが統一化される。 だがしかし、コマンドを実行することを忘れることがあるだろう。人間だもの。 ということでhuskyを導入し、コミット時にコマンドを走らせるようにする。 huskyとは 公式サイトのGoogle翻訳によると、 Husky はコミットなどを改善します 🐶 ワン! コミットまたはプッシュするときに、コミット メッセージのリント、テストの実行、コードのリントなどに使用できます。Husky はすべての Git フックをサポートしています。 とのこと、ワン！ つまりgitに対する処理をフックとして何らかの処理を行うことができる。 今回はコード整形の処理を行っていく。 huskyをインストールする 基本的に公式を見れば問題ない。 てかそもそも公式を見れば大抵のことは問題ない。 npx husky-init && npm install で、公式によると↑を実行すれば基本的にOKとのこと。 上記を実行するとrootに下記ファイルが作成される。 .husky\pre-commit 中身を見てみると #!/usr/bin/env sh . “$(dirname -, “$0”)/_/husky.sh” npm test と書かれているのでnpm testの箇所を自身の実行したいコマンドに変更する。 で、コミット時に実行したいコマンドが実行されていればそれで問題なく完了。

ESLintを導入する npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin touch .eslintrc.yml で設定ファイルを作成する。 作成した設定ファイルに、 env: browser: true es2021: true extends: - 'plugin:vue/vue3-recommended' - 'eslint:recommended' - '@vue/typescript/recommended' parserOptions: ecmaVersion: 12 plugins: - vue - '@typescript-eslint' rules: {} を記入する。 package.jsonに "scripts": { ... "lint": "eslint --fix src/*.{ts,vue} && eslint --fix src/**/*.{ts,vue}", }, 上記Scriptを追加する。 npm run lint 上記コマンドで無事にScriptが実行されるかを確認する。 環境構築時に作成されるvite-env.d.tsがESLintで引っかかるので、 touch .eslintignore でESLlint除外設定ファイルを作成し、 vite-env.d.ts と記入する。 Prettierを導入 npm i -D prettier @vue/eslint-config-prettier で必要パッケージのインストールをする。 touch .prettierrc.yml で、設定ファイルを作成し、設定を記入する。...

ちなみに糖衣構文とは、プログラミング言語において、読み書きのしやすさのために導入される書き方とのことらしい。 Vue３のシンタックスシュガー Viteで環境構築するとデフォルトで下記のような糖衣構文が使われている。 <script setup lang="ts"> どうやらVue3.2から使用できるようになったとのこと。 こちらを使えばreact Likeな書き方ができるっぽいので調べてみた。 まずVeturを無効に まずvsCodeの拡張機能の話から入り申し訳ないが、Veturは糖衣構文に対応していないとのこと。 なのでVolarを使う必要がある。 これは公式もアナウンスしている。 setup関数がいらない この構文を使えばsetup関数をわざわざ書く必要がない。 export default defineComponent({}) をする必要もなければ、 return {} をする必要もないので、とんでもなくシンプルに書けるようになった。 というより、よりjavascriptに戻ってきた感がある。 Propsを使いたい Propsはscript内で、 defineProps<Props>(); で使用できるようになる。 デフォルト値を定義するには、 withDefaults(defineProps<Props>(), { propsVal: "", }); 上記のように。 emitを使いたい <script setup lang="ts"> type Emits { (e: "input", value: string): void; (e: "update:value", value: string): void; } defineEmits<Emits>(); const handleInput = ({ target }: { target: HTMLInputElement }) => { emit("input", target.value); emit("update:value", target.value); }; </script> 上記のように使えばできる。...

特にタイトル以上に説明することもないので、進めていく。 Viteを使用しVueをインストールする 下記コマンドでVite（ヴィート）を使用しVueをインストールすることができる。 $ npm create vite@latest Need to install the following packages: create-vite@3.1.0 Ok to proceed? (y) √ Project name: ... VueProjectBase √ Package name: ... vue-project-base √ Select a framework: » Vue √ Select a variant: » TypeScript Scaffolding project in C:\Users\username\Desktop\vite\VueProjectBase... Done. Now run: cd VueProjectBase npm install npm run dev 今回はVueプロジェクなので、frameworkはVueを指定し、もう考えることなくTypeScriptを指定する。 で、上記のように指示に従いlocal serverを立ち上げることができればVueのインストールは完了。 nodeのバージョンを指定する nodeのバージョン管理ツールにVolta使用しているので、Node エンジンの固定をする。 volta pin node volta pin npm 上記を実行するとpackage.jsonに、 "volta": { "node": "16....