小村記録

小村の開発環境構築（１３）　Nuxt.jsアプリの設定変更

開発環境構築記録

こんばんは、小村だよ！
今日はNuxt.jsアプリ作成時に最初にやっておきたい設定するよ！
そう意気込んで調べたけど実質ほとんど何もやる必要なかったよ！
すごいね！Nuxt.jsの初期作成！

やること

SCSSの導入（不要っぽい？）
Linter、Formatter、StyleLint、CommitLintの初期設定（不要）
VSCode保存時の自動フォーマット設定

事前準備

VSCodeからUbuntuに接続し、Nuxt.jsアプリプロジェクトを開く

手順

SCSSについて

参考：Nuxt.js 公式
参考：Nuxt.jsのプロジェクトを作成してSCSSを導入するまで
「Nuxt.js 初期設定」で調べてやっておきたいなーと思った、SCSSを導入するよ！
- SCSSはCSSを強化したもので、すべてのページに反映したり変数使えたりする
  - 参考：SCSSとは？基礎を理解してWebサイトを作ろう！

SCSSの導入

これがもうエラーに次ぐエラー！！！
というわけでの導入方法は前回の記事を参照してね！めちゃ疲れたよ！
- 苦労したので１記事にしてQiitaにも書いたったぜ
そんなわけで導入してcommit実行。問題なし！

疑問：SCSSの設定必要なさそう？？？

こうして、記事も書いた後にちょっと調べてたらさ……なんかさ……
私、Vuetify使ってるんですが、そもそもSCSS使えそうなんですよね……
なのでインストールしたパッケージ、全部アンインストールしますた
実際に使ってみて使えなければまたパッケージ入れるようにします……
まじで無駄な時間をすごした気がする！！！けどまぁ理解できたのでよし

Linter、Formatter、StyleLint、CommitLintの初期設定

参考：ESLint のススメ
参考：Nuxt.jsのプロジェクトにstylelintを導入する方法
参考：commitlint の紹介
はい！気を取り直して！LinterやらFormatterやら初期設定するよ！
初めて触るし調べまくるぞー！！！
と調べた結果、これまたNuxt.jsの初期作成configで事足りることがわかりました
やることねぇ！！！
- は？？？commitメッセージ糞でもコミットできるんだが？？？
- と思ってたのですが、ソース管理からのcommitだとチェックかからないみたい
- コマンドでのコミットならきっちりエラー吐いた。これからはコマンドだね……

VSCode保存時のオートフォーマット設定

あ、でも保存時に自動でPrettierが起動するような設定だけしようかね！
.vscodeフォルダにsettings.jsonを用意し、下記を記述
この状態で試しに今まで赤かったファイルを保存！

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },

}

↓

勝手にフォーマットしてくれたね！
まじでこれだけでよさげ。Nuxt.js盛り込んでくれてるなぁ。
全ファイル開いて赤いファイルを保存して根絶やしにしました
殺せ！！！1人も生きて帰すな！！！

おわりに

はーーーむだに疲れました
調べるだけ調べて何もやる必要ないの、楽だけど徒労感すごい
調べた内容をまとめる気力が沸かずにスッカスカ
- 前回の記事とセットということにして心の平穏を保ちます
ではでは、ちゃお！