Visual Stusdio Codeに乗り換えます

エディタはAtomを使っていましたが、最近プロジェクト内のファイル名を変えたり、プラグインを使ったFTPアップロードをしようとすると落ちることが多々。
そこでお勧めいただいたVisual Stusdio Code(以下「VSCode」)に乗り換えを決めました。

Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する!《VSCode実践入門》 - エンジニアHub|若手Webエンジニアのキャリアを考える!

↑詳しく書かれていて参考になりそうです。
インストールから設定の中でつまずいた部分をメモしました。

☆現在のバージョンは
March 2020 (version 1.44)
です。

***

VSCodeを使うにあたって、自分に一つ制約を設けました。

VSCodeは英語表示のまま

半分意地です。これからGitHubを積極的に使っていこうとしているので、少しでも英語のUIに慣れようかと思いました。そしてちょっとかっこいい。

PATHが通っていない

VSCodeインストール後にコマンドライン

code -v

と確かめたところ、

zsh: command not found: code

と返ってきてしまいました。

codeコマンドが使えない状態なのは分かりましたが、使えないとどう不都合なのか、どうPATHを通したらいいのか調べました。

PATHの通し方

まず、私はシェルはzshを使っています(echo $SHELL とコマンドを打つとデフォルトシェルが確認できます)。

そもそも「PATHを通す」とは

PATHを通すとは? (Mac OS X) - Qiita

こちらも参考にさせていただきました

macでPATHを通す方法 - zsh/bash - Qiita

コマンド検索パス(コマンドサーチパス:シェルがコマンド実行ファイルを探しに行くパス)を追加すること。

実行ファイルまでのパスを毎回書くのは大変なので、コマンド検索パスをシェルの設定ファイルに追加しましょう、ということです。

設定ファイルはホームディレクトリにある .zshrc です(bashの場合は .bash_profile)。
もし設定ファイルがない場合はこの名前で作成します。

.zshrc を開くと

eval "$(anyenv init -)"

これだけ...おかしい。
もっと色々パスが書かれていると予想していたので、ここにVSCodeの実行ファイルのパスを入れるのは違う気がしました。

VSCodeからPATHを通す

後からPATHを通す設定がありそうとは思っていましたが、やはりありました。
英語表示によりメニューの解読を脳が避けているため、発見が遅れました(笑)

参考:

Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け - - Qiita

コマンドパレットとは、VSCodeの機能(Command)にアクセスできるものです。
メニューからは View > Command Palette...
ショートカットは [Command] + [Shift] + [P](Mac
です。

(...脱線しますが

⇧:Shift
⌘:Command

というのは個人的に忘れがちです。
この記号はどうやって打ったら出るのでしょうね...。)

コマンドパレットに >shell と入れるとshellに関する機能が検索されます。

f:id:yokoyoko_115:20200429010442p:plain

となっていました。
「recently used」の覚えはないですが、デフォルトの設定なのでしょうか。
「Shell Command: Install〜」を選択し、再びコマンドラインcode -v で確認すると、バージョンが確認できました。
(その下に数字と英語の羅列が続くのですがこれはバージョンの識別子...?)

ついでに .zshrc を開いて確認してみると、VSCodeのパスは追加されていませんでした。
きっと別経由で追加されているのでしょう(詮索は別の機会に)。

参考にさせていただいた記事を見ると、どうやら「ターミナルから VS Code を利用する」とあるように、VSCodeを利用するのに必ずしもPATHを通す必要はないようです。考えてみればそうですね...。
今後黒い画面とVSCodeを使いこなしているかもしれないので、初めのうちに設定しておいてよかったと思います。

もろもろの設定

メニューからは Code > Preferences > Settings
ショートカットは [Command] + [,](Mac
です。

とても設定項目が細かい!

他の方が紹介してくださっている「おすすめ初期設定」を参考に設定したほうが無難です。
検索窓があるのでそこから設定項目を探し出して設定していきます。

設定の範囲

VSCodeには4つの設定範囲があります。

vscodeの利用に必須な”ワークスペース”の概念 | 今日も元気にIT屋さん

vscodeは4つの設定定義レベルが存在する。
1. vscode全体の設定(プログラム規定値)
2. vscode全体の設定
3. ワークスペース単位の設定
4. フォルダ単位の設定

私が行った操作は「2.」です。
ワークスペースをまだ作っていないので、まずは登録してみます。

ワークスペースの追加:
File > Add Folder to Workspace...

フォルダを指定して開くと、サイドバーに「UNTITLED」として表示されます。

ワークスペースの保存:
File > Save Workspace As...

保存するとワークスペースに指定したフォルダ内に ワークスペース名.code-workspace というファイルを保存する流れになります。

ワークスペース登録後に設定を見てみると、「User」以外に設定できる範囲が増えています。

f:id:yokoyoko_115:20200430005307p:plain

ワークスペースごとに設定できるのが良い、という記事を見かけました。
複数のルートフォルダをワークスペースでひとまとめにできる。その状況になってみたら素晴らしさに気付くのだと思います。

***

実はまだVSCodeでコード書いていないのですが、設定の多さにお腹いっぱいになってしまったのでここで終わりにします。

多機能なVSCode。ある程度使いこなせるといいです。
今後の試みとしては、cssもEmmetで書いてみようと思います!

英語表示にくじけそう

調べていると、見る記事見る記事全てVSCodeが日本語画面。
敷居を下げるためにも日本語にするべきか...。

次回記事を書くことがあったら日本語になっているかもしれません(笑)