俺的備忘録 visual studio code で行う環境づくり

# なぜVisualStudioCodeなのか？
ビジュアルスタジオには強力な機能が備わっている
それらは特に複雑な設定をしなくても簡単に導入できたりデフォルトで備わっていたりする

- css , scss のlintがデフォルトである
- Emmet によるコード補完
- Gitの連携機能
- 個人的に最初のwellcomeページが便利

他にも色々あるけど、色々ありすぎるので省略
とにかく便利で動作も快適だからおすすめ


# エディター　基本設定

## 1. 基本設定を開く
基本設定 → 設定 で設定ファイルを開く
または ` cmd + , ` のショートカットで開く

<img width="1856" alt="スクリーンショット 2018-02-15 19.22.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/00039ac2-ce04-e3b3-40c5-048119f089b9.png">

## 2.設定一覧から `editor` を検索 
上の検索バーから設定一覧から`editor` を検索


## 3. ワークペースに設定をコピー
VScodeの設定を編集する際は右側に表示される設定ファイルから編集を行う
ユーザー設定の場合すべてのワークスペースに影響があるので、作業しているワークスペースに設定を保存する

1. 右の「ユーザー設定」タブから「ワークスペースの設定」タブに切り替え
2. 鉛筆✎の編集ボタンを押して設定をコピーする
3. コピーされた内容を編集

あとはお好みでフォントサイズやタブ間をいじっていく


# Beautify 保存時に自動整形
インデントなどを揃える自動整形がVScodeでは設定を変更するだけで簡単にできる


## 1. `editor.format` で検索

`"editor.formatOnSave"`の設定を`true`にする
以上！！


<img width="1265" alt="スクリーンショット 2018-02-15 20.16.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/2a07738d-3257-4854-13a1-53029936a264.png">


![beauty.gif](https://qiita-image-store.s3.amazonaws.com/0/115192/961c6062-cd2e-7f90-7fd4-1529304645c5.gif)

`editor.format`の他の機能も`true`にして問題ないと思われる

# .htmlhint

## 1. .htmlhintファイル作成
次に.htmlhint
エディターで作成してもいいし、雛形だったら公式からDL出来る
http://htmlhint.com/

ダウンロードしたファイルを作業しているワークスペースのルートに配置すればok

## 2. vscodeの拡張機能からHTMLHintをインストールして有効化

`HTMLHint` をvsの拡張機能からインストールしてVScodeを再起動すればOK

<img width="1250" alt="スクリーンショット 2018-02-15 19.55.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/b7f0651c-f9c3-1b4a-7c75-36a4010fa2b3.png">



# es-lint

## 1. eslint をインストール

```
npm i -D eslint
```

## 2. eslint-cliをグローバルにインストールする

```
npm i -g eslint-cli
```

これでプロジェクト毎のバージョンのes-lintが使える

## 3. .eslintrc ファイル作成

eslintを使い始めるとき色々な質問に答えて設定ファイルを作ったりするが色々な設定がすでにあったりする
(参考記事: [共有設定でらくらく ESLint](https://qiita.com/mysticatea/items/dc35ced6bd5e782f50cd))

面倒な場合は上でもいいけど、極力自分のプロジェクトにあった内容で設定するべき
作成したらファイルをワークスペースのルートに配置すればok


## 4. vscodeの拡張機能からESLintをインストールして有効化
この時有効化するのはワークスペースかユーザーか選択できるのでお好みで
再起動するとeslintが下のコンソールで確認できる

<img width="1481" alt="スクリーンショット 2018-02-15 19.58.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/e0495e71-fda5-d5d0-0af8-7a3743d6f6e9.png">


`vscode-eslint`は.eslintrcなどのファイルがワークスペースのルートディレクトリに配置していれば自動で読み込んでくれる
有効化する際に、「ワークスペースで有効」に設定すればワークスペースを移動した先の.eslintrcファイルを読み込むので便利
今までみたいにエディターに.eslintrcのパスを通したりする必要がない

# css-lint, scss-lint
VScodeはデフォルトでcssとscssのlintの機能があるので設定から編集していく

## 1. `lint` で検索

`lint` または `css.lint` で検索

<img width="1011" alt="スクリーンショット 2018-02-15 20.02.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/b299c839-96c2-3bef-25e5-b843bddffbdf.png">


- `ignore`でルールの無効化
- `warning` が警告
- `error` がエラーとして表示される(そのままやんけ)

## 2. 「ワークスペースの設定」に設定を追加

VScodeのlintには日本語のコメントでルールの内容が書いてあるので安心です！
※この時設定するのはユーザー設定ではなくワークスペースの設定にするのを忘れないこと


下記は自分が設定した個別で変更内容

### css

- "css.lint.duplicateProperties": "warning"
- "css.lint.float": "warning" 
- "css.lint.important": "warning"
- "css.lint.zeroUnits": "warning"
- "css.trace.server": "messages"

### scss

- "scss.lint.duplicateProperties": "warning"
- "scss.lint.float": "warning"
- "scss.lint.important": "warning"
- "scss.lint.zeroUnits": "warning"



# setting.json

ワークスペースの設定内容を保存すると`.vscode/setting.json`が作成される
`setting.json` の中身は上で保存したワークスペースの設定が記載されている
プロジェクトのメンバーもVScodeを使っていれば該当のフォルダをワークスペースとして開けば設定内容が共有される
あとはgitなどで管理していけばok


#prettier

最後にlintなどの構文エラーを自動で補完してくれるようにする
PRなどの量も減るし、品質もあがるので良き！([ぷりてぃあー！がんばえー！](https://www.google.co.jp/search?q=%E3%81%B7%E3%82%8A%E3%81%8D%E3%82%85%E3%81%82%E3%81%8C%E3%82%93%E3%81%B0%E3%81%88%E3%83%BC&oq=%E3%81%B7%E3%82%8A%E3%81%8D%E3%82%85%E3%81%82%E3%81%8C%E3%82%93%E3%81%B0%E3%81%88%E3%83%BC&aqs=chrome..69i57j0l2.9126j0j7&sourceid=chrome&ie=UTF-8))


## 1. prettier インストール

```
npm i -D prettier
```

## 2. 拡張機能 Prettier - Code formatter のインストール
左の拡張機能の一覧から prettierで検索してインストールして有効化

<img width="1425" alt="スクリーンショット 2018-02-15 20.06.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/c91c0ca9-9239-2047-1e24-b749fd53ba7c.png">


## 3. 設定からprettierを保存時に適用させる

設定一覧からprettierで検索

`"prettier.eslintIntegration": true` に変更して保存


<img width="1235" alt="スクリーンショット 2018-02-15 20.09.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/115192/c492b2e2-1146-1fe2-b88b-04724be61a15.png">

あとはeslintで引っかかった箇所があれば保存時に整形してくれる(はず)

# おわり

とりあえずこんな感じです
他にも拡張機能やVScodeの機能の良いところはあるはずなので
設定していけば更新していくかも
(gitとの連携とかそこら辺もやっておきたい)