Visual Studio Code （ VS Code ）のインストールから初期設定まで
目次
1. インストール
Visual Studio Code のサイト の Download form Mac ボタンを押して、Visual Studio Code をダウンロード。
インストール時のバージョンは 1.30.2 。
2. 初期設定
- 設定を変更
- Indent の設定を
space: 4からspace: 2に変更 - ファイル一覧のファイルをクリックしたときにプレビューではなく、ファイルが開くように変更
- プレビューだと他のファイルをクリックしたときに別物に変わってしまい不便だったため
- Indent の設定を
- Extension を追加
2.1 設定の変更
設定の変更は、メニューの Code -> Preferences -> Settings からできる。
2.1.1 Indent の設定を変更
Indent の設定を space: 4 から space: 2 に変更するために以下の項目を変更。
2.1.2 ファイル一覧のファイルをクリックしたときにプレビューではなく、ファイルが開くように変更
プレビューだと他のファイルをクリックしたときに別物に変わってしまい不便だったため、ファイル一覧のファイルをクリックしたときにプレビューではなく、ファイルが開くように変更。
Setting -> Workbench -> Editor Management -> Enable Preview のチェックを外した。
2.2 Extension を追加
設定の変更は、メニューの Code -> Preferences -> Extensions からできる。
2.2.1 Vim Extension を追加
追加時のバージョンは 1.0.2 。
j を2回押して insert mode を解除できる設定を追加。
Extension の設定変更は、メニューの Code -> Preferences -> Settings にある Extensions からできる。
Vim Configuration にある Insert Mode Key Bindings の Edit in settings.json で json を編集。
以下のように。
2.2.2 Vetur Extension を追加
Vue.js 用の Vetur Extension を追加。追加時のバージョンは 0.14.5 。
2.2.3 Prettier Extension を追加
追加時のバージョンは 1.7.3 。Command キー + Shift キー + p でパレットを表示して Format Document を選ぶとコードが整形される。
文末のセミコロンを削除するように設定を変更。Settings にある Extensions の Prettier でセミコロンが追加されるようになっていたので、チェックを外した。
クォートをシングルクォートになるように設定を変更。Settings にある Extensions の Prettier でシングルクォートの項目にチェックを追加。
2.2.4 EditorConfig Extension を追加
追加時のバージョンは 0.12.6 。
2.2.5 Sass Extension を追加
追加時のバージョンは 1.5.1 。
3. ショートカット
- Command キー + k を押したあと、Command キー + j でコード内で閉じていたものを全部開く
- Command キー + k を押したあと、Command キー + 0 でコード内のすべてを閉じる
