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

なぜVisualStudioCodeなのか？

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

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

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

エディター　基本設定

1. 基本設定を開く

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

2.設定一覧から editor を検索

上の検索バーから設定一覧からeditor を検索

3. ワークペースに設定をコピー

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

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

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

Beautify 保存時に自動整形

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

1. editor.format で検索

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

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

.htmlhint

1. .htmlhintファイル作成

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

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

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

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

es-lint

1. eslint をインストール

npm i -D eslint

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

npm i -g eslint-cli

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

3. .eslintrc ファイル作成

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

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

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

この時有効化するのはワークスペースかユーザーか選択できるのでお好みで
再起動するとeslintが下のコンソールで確認できる

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

css-lint, scss-lint

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

1. lint で検索

lint または css.lint で検索

• 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などの量も減るし、品質もあがるので良き！(ぷりてぃあー！がんばえー！)

1. prettier インストール

npm i -D prettier

2. 拡張機能 Prettier - Code formatter のインストール

左の拡張機能の一覧から prettierで検索してインストールして有効化

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

設定一覧からprettierで検索

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

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

おわり

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