Vue CLIによって作られたファイルを見ていく（設定編）

[環境構築](https://qiita.com/OTA_nagisa/private/e52c22e17e9827533894)でVue CLIによって作られたファイルを見ていく（設定系）
自分が見返すようなので結構適当です。（特に最後のほう）
[やりたいことリスト](https://qiita.com/OTA_nagisa/private/9588ef8ef9f69f18bbd5)

# あんまりコーディングとは関係なさそうな子たち
関係ないわけじゃないけど、普段から触るわけじゃないファイル
知識程度には知っておきたいので軽くまとめる

## README
まあ、まずはREADMEから読む。
現場とかなら、命名規則とかが書いてあるのかしら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/d8d33602-c8e1-227d-12fc-b1871ef137ab.png)
それぞれのコマンドについて書いてあるだけだった
次！

## .browserrslistrc
なにこれ？
対象のブラウザを決めておいて、書いたコードがその対象のブラウザでも、ちゃんと動作するかを確認するときにつかうっぽい
package.jsonに書くこともあるとか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/67bcbebe-5dce-1e8b-22f5-737c94dc33f6.png)
[公式のマニュアル](https://github.com/browserslist/browserslist#browsers-data-updating)とかを見ると現状は、
・シェア率が1%より大きい
・ブラウザのバージョンが、最新かその一つ前
・24か月以内に公式のサポートや更新がないものを除く
・ie11(InternetExplorer)を除く
らしい

今は気にしなくていいかな
[参考になったサイト](https://iwb.jp/browserslist-undesirable-settings-last-2-versions/)

## .editorconfig
エディタが異なってもインデントとか、タブとかを合わせてくれるらしい（[公式](https://editorconfig.org/)）
そんなものがあったのか、、、！！
大学１年の時に、友人とWebサイト作っていた時に、AtomとVScodeとでインデントがぐっちゃぐちゃになって、泣きながら整理したトラウマが、、、（あの頃知っていれば、、、）

VScodeはプラグインを入れる必要があるらしい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/3097b21a-c99f-a3a7-eff6-da302cfc7062.png)
ほかのエディターでもプラグインが必要なものが結構あるみたい（共同開発するなら、必要なプラグインを一括で入れてくれるやつ導入したいね）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/9676486e-d880-40d2-abd8-b79caa51a03a.png)
現状は
・.js, .jsx, .ts, .tsx, .vue これらの拡張子のファイルが対象
・インデントのスタイルは、ソフトタブ（半角スペース）
・インデントのサイズは2（半角スペース2つ）
・行末の空白を削除する
・最終行に空行を入れる

気になるところがあれば追加・編集していきたいですね（[参考](https://qiita.com/naru0504/items/82f09881abaf3f4dc171)）
### .eslintrc.js
ESLintってよく聞く気がする（ルール決めのやつだと思ってる）
どうやらJavaScriptのための政敵検証ツールらしい
バグ見つけたり、スタイル統一してくれたり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/7560b393-d8f3-959a-d987-46e07aab0979.png)
プラグインを入れるとリアルタイムで反映してくれるとか
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/41c5faf4-6c7b-0a60-1219-29d0df381d11.png)
`root:true`
一番上にある.eslintrcファイルだよ。
これがないと、上に.eslintrcファイルがないか検索しに行くらしい
`env`
どの環境で使うのかみたいな感じらしい
windows関数とかはブラウザ上なら使えるけど、コード上では定義されてないから、ESLintに怒られるので、それを防ぐみたいな（[参考](https://note.com/shift_tech/n/n8bbe1c05ba0b#env)）
`Node: true`
今回はNode.js上で動かすぜってしている
`extends`
あらかじめ用意されている設定を読み込む（プラグインとか）
ルールが多すぎて一から設定するのは大変だから、ここでまとめて追加するらしい
`vue/vue3-essential`
[eslintのvue用のプラグイン](https://eslint.vuejs.org/rules/)に書かれてるやつ
`eslint:recommended`
eslintが推奨しているルールたち（[参考](https://www.tam-tam.co.jp/tipsnote/javascript/post11934.html)）
（allのほうがいい説もあるらしい）
`@vue/eslint-config-typescript`
Vue-TypeScript用のやつ（[参考](https://www.npmjs.com/package/@vue/eslint-config-typescript)）
`rules`
個別で設定するルール
`vue/multi-word-component-names`
コンポーネントの名前は、複数の単語を使おうねっていうルール
なんか邪魔らしいからoffにしてるっぽい
## .gitignore
git add の対象外になるファイルを指定するやつ
## packege.json
Node.jsにおいてインストールするパッケージが記述されたファイル
コマンド一つで、環境に必要なパッケージを全部インストールしてくれるやつ
下記のどっちかで実行できる（ほかにもあるけど）
```
npm install
yarn
```
書き方は調べたほうが早そう（[参考](https://qiita.com/dondoko-susumu/items/cf252bd6494412ed7847)）

## tsconfig.json
TypeScriptのコンパイルの設定ファイル
Node.jsはTypeScriptをサポートしているわけじゃないので必要とのこと
どのバージョンのJS向けに出力するかとかの設定をするらしい

esnextが何回か出てきたので気になって調べたら、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/e42abe12-c675-18db-c9bf-e1101208bebe.png)
>JavaScript 言語は変化し続けており JavaScript コードを書く場合に使用される構文も固定されておらず、時間と共に変化します。Ecma International は JavaScript 言語仕様を制定する組織で、仕様は ECMAScript と呼ばれます。新しい JavaScript 仕様は毎年発行され、2015年に発行された 6番目の版は ES6 と参照されます。このドキュメントではより適切に最新の仕様を ESNext と参照します。

とのこと（[参考](https://ja.wordpress.org/team/handbook/block-editor/how-to-guides/javascript/esnext-js/)）

## tsconfig.node.json
よくわからんかった
Node上で動かす時のtsconfigみたいな解釈

## vite.config.json
Viteの設定ファイル
[そもそもViteってなんぞや](https://openstandia.jp/oss_info/vite/#:~:text=Vite%E3%81%AE%E6%A6%82%E8%A6%81,%E6%B1%8E%E7%94%A8%E7%9A%84%E3%81%AA%E3%83%84%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%99%E3%80%82)

細かく見ていく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/f4765cbd-c056-00ad-d4fb-b4209b0fe249.png)
### plugins
拡張するためのプラグインを追加する
[Vueのプラグイン](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue)
[Vutifyのプラグイン](https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin)
中身までは理解しきれなかった、、、
### define
ビルド時にアプリコード内から参照可能なグローバル定数を生成できる。
### resolve
インポートの時のファイル名を省略できるようになったりするらしい（[参考](https://progtext.net/programming/webpack-resolve/)）
#### alias
../../views/Home.vue とかを @/views/Home.vue って書けるように設定されている
#### extensions
拡張子を省略できるっぽい
.vueを省略するのはあまりお勧めされてないっぽいので消しておく

確かに今の職場でも、.vueは書いてたイメージ

#### sever
全然調べてないけど、localhostのポートの設定とかできそう
3000から8080に変えてみてます

## yarn.lock
package.jsonに書かれているライブラリ等の正確なバージョンを記録しているもの
[こちら](https://qiita.com/adgjmptwgw/items/cb08aa4a33fecc478422)がとても参考になりそう

npm installしたときは、package-lock.jsonになるっぽい（こっちは見たことある）

## node_module
nodeの何か
一回消して入れなおす、みたいなことしたことある気がする（何の意味があるかは忘れた）

## publick
アイコン画像が入ってた

# おわり
座学疲れた、、、
最後らへんめっちゃ適当になってしまった、、、

適時必要な時に思い出して、いじっていきたいなとは思っています。
次はsrcを見ていく！！！