Vue3のベースプロジェクトを作成したので、仕上げにhuskyを導入する

コードフォーマット系のプラグインは以前の記事で入れたので、コマンドを実行すれば、コードが統一化される。 だがしかし、コマンドを実行することを忘れることがあるだろう。人間だもの。 ということで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の箇所を自身の実行したいコマンドに変更する。 で、コミット時に実行したいコマンドが実行されていればそれで問題なく完了。

投稿日 · 2022-10-27 · 更新日 · 2024-06-07 · 1 分 · nove-b

毎回調べるのが面倒なのでVueのベースプロジェクトを作成する

特にタイトル以上に説明することもないので、進めていく。 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....

投稿日 · 2022-10-24 · 更新日 · 2024-06-07 · 2 分 · nove-b