ターミナルからVisual Studio code を呼び出せるようにする。
じつはターミナルからcodeコマンドで呼び出せるようにすることができます。
atom とかだとターミナルでそのフォルダに行ってそこでatom . コマンドで簡単にエディタをそのフォルダで立ち上げることができます。
atomを使っていたので、その機能ないのかなと思ってましたが、ありました！(Macの場合ですが)
Shift + Command + p
と押すとCommand Palleteが開きます。そこにshellといれると
「Shell Command: Install 'code' command in PATH」と表示されるのでこれを実行しましょう。それだけです。
Command Pallete は 表示→コマンドパレット からもアクセスできます。
これ以降は、ターミナルから作業したいフォルダに入って、
先程インストールしたcodeコマンドを使って、
code .
とするとそのフォルダでVSCodeが開きます。
Visual Studio Code の基本設定
Code → 基本設定 → 設定
を開きます。
簡単な設定はそのGUIを使って変更できます。
細かい設定はそこだけではできないので、settings.jsonを編集する必要があります。
ここに記述するとその変数が上書きされ、反映されます。
Macの場合settings.jsonは $HOME/Library/Application Support/Code/User/settings.json にあります。
WindowsやLinuxでは以下の場所になります。直接変更したい方はそこからやってみてください。
Windows %APPDATA%CodeUsersettings.json
Linux $HOME/.config/Code/User/settings.json
{"window.zoomLevel": 2,"editor.fontSize": 17,"editor.tabSize": 2,"files.associations": {"*.json": "json"},"editor.wordWrap": "on"}
tabSize は２文字で設定してみた。
editor.wordWrapはウィンドウの大きさに応じて、入力文を回り込ませる。見やすくなる(好みだけど)。
とりあえず便利なVSCodeプラグイン
EMMET
HTMLを書く時に便利です。
自動的にいろいろと補完してくれます。
例えば、
!
ビックリマークを入力してTabを押すと、
自動的に
<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body></body></html>
とhtmlファイルの骨格を入力してくれます。
この他にも
.login
と入力しTabを押すと
<div class="login"></div>
Material-icon-theme
Material-icon-theme を入れるとエクスプローラー部分が見やすくなります。
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Prettier - Code formatter
コードを見やすくフォーマットしてくれる拡張機能です。
Macでの使い方を説明しますが、shift + option + F で、Document Format（ドキュメントの整形）を行ってくれます。
( shift + command + P で、Visual Studio Code のコマンドプロンプトを立ち上げて、そこにDocument Formatと入れて、実行してもOK)
例えばタブを整えて見やすくしてくれたり、シングルクオート( ' )をダブルクオート( " )に統一してくれたりします。
Live Server
htmlやcssを開発する時に便利です。
node.jsを使ったことがある人だとnodemonに相当します。
LiveServer をインストールするとプログラムファイルを変更するたびに、自動でリロードしてくれるようになります。
コメント