アイキャッチ画像が面倒くさい Wordpressでブログを投稿していると面倒なことがある。 それはアイキャッチ画像の設定である。 画像探すのも面倒だし、それなりの質が担保されていないとサイト全体がチープに見える。 だからこのブログでは統一感を出せるように、同じデザインの画像の上にテキストを載せるようにした。 で、アイキャッチ画像を作成するようページを作成した。 ……、ことは以前ブログで書いた。 何が面倒って、アイキャッチ画像を設定するほど面倒なことはない 効率化したと書いたが、それすら面倒になった。 なってしまったのである。 そこで、タイトルを書いたらそれがそのままアイキャッチ画像になる。 そんな仕組みを作ってみた。 それがこれである。 さて、次はこれをプラグイン化してみようかと思っている。
Local by Flywheelにログインできなくなった 久々にテーマを更新しようとした時、Local by Flywheelで作った仮想Wordpress環境にログインできなくなった。 IDとPASSWORDの両方を思い出せない。 そこで解決方法を調べてみた。 再ログイン方法 Local by Flywheelではデフォルトで「dev-email@flywheel.local」というアドレスがあてがわれている。 そこでそれを使ってパスワードを再発行すればいい。 具体的な手順は Local by FlywheelのADMINボタンからログイン画面行く。 ログイン画面にある「パスワードをお忘れですか ?」をクリックし、遷移先のユーザー名またはメールアドレスエリアに「dev-email@flywheel.local」を入力する。 Local by Flywheelに戻りTOOLSタブをクリックし「OPEN MAILHOG」でmainhogにアクセスする。 するとそこにメールが来ているので、あとはPassWordを変更するだけ。 ちなみにそこにIDも書かれているので、次からはIDでログインできるようになる。
コードフォーマット系のプラグインは以前の記事で入れたので、コマンドを実行すれば、コードが統一化される。 だがしかし、コマンドを実行することを忘れることがあるだろう。人間だもの。 ということで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> 上記のように使えばできる。...