VScodeのあれこれ

vscodeとは

vscodeとはMicrosoftが開発したwindows,Linux,,macOS用ソースコードエディタです

IDE(統合開発環境)ではなくテキストエディタなのでサクラエディタなどの延長線上のものです

しかし、テキストエディタとは思えないほど多種多様な機能を備えています．設定次第ではIDEにもなりうるかも?

vscodeの特徴

無料

軽量

高機能

vscodeには拡張機能を入れることができるのですが、拡張機能なしでも十分に高機能です

download

ダウンロードしたら起動して言われた通りにやって終わりです

vscodeの機能

vscodeには様々な機能があり、軽くどんなものがあるか紹介していきます

vscodeにおける設定方法

ショートカットキー

統合ターミナル

タスク

ユーザースニペット

拡張機能

紹介の前に

vscodeの日本語化

紹介する前に日本語表記にする方法を説明します．今後の説明は日本語表記で表示されるものを使って説明していきますので一緒に導入するか、適宜読み替えてください

まずvscodeを起動した状態で下のようなアイコンをクリックしてください

もしくはctrl(command) + shift(option) + X

https://gyazo.com/fbfa7a46089ae46d7e4ba8985840de3a

クリックしたら出てきたウィンドウの上のほうに検索窓みたいなものが出てくるのでそこにjapaneseと打ち込みます

https://gyazo.com/8566d9541205035c04e5b2625b29050d

恐らく一番上にこういうものが出てくると思うのでinstallを押します、画像のアンインストール部分がinstall表記になっていると思います

インストールが終了すれば「view」→「command palette」を選択し、表示された箇所にconfigure display languageと打ち込み表示されたものを選択します

en、jaが表示されますのでjaを選択します．

restartしろと言われるのでrestartを選択します

これで終了です

基本的な設定(変更)方法

日本語を導入したところで、次に基本的な設定の仕方です．例えばフォントサイズだったりタブの幅のサイズの設定だったりですね

開いた場所に色々な項目が表示されていますが、ここを編集することで設定を変更できます．

また、コードベースで設定を変更することもできます．方法としては開いている設定というファイルの右上に設定(JSON)を開くとあるので選択するとsettings.jsonというファイルが開きますので、それを編集していきます．

この点が他とは違い、全体ではない設定を指定することもできます．

ワークスペースとは

そしてこのワークスペース単位で設定を作成することができます、

設定は既定値が一番弱くフォルダの設定が一番強く働きます

既定値は全体の設定で上書き、全体の設定はワークスペースの設定で上書き、ワークスペースの設定はフォルダの設定で上書きされます

下の図でいうと上が一番効力が弱く、下にいくほど強くなります

https://gyazo.com/78da859688476fdc7f34ebd7b95e96a1

ワークスペースの作り方

フォルダを開く

まず適当にファルダを作成し、メニューから「ファイル」→「開く」でそのフォルダを開きます．

ワークスペースを保存する

「ファイル」→「名前をつけてワークスペースを保存」でワークスペースを保存します

名前は適当で構いません、任意です

これで空のワークスペースが作成され、そのワークスペースを開いている状態になっていると思います．

ワークスペースにフォルダを追加する

「ファイル」→「フォルダをワークスペースに追加」から任意のフォルダを選択すると現在開いているワークスペースにそのフォルダが追加されます

ワークスペースから特定のフォルダを除外したい場合、左に表示されているそのフォルダを右クリックして「ワークスペースからフォルダを削除」を選択します．当然ですがフォルダそのものは削除されるわけではありません．

ワークスペースにおける設定

ワークスペースを開いている状態で「ファイル」→「ユーザー設定」→「設定」→「ワークスペース」からそのワークスペースの設定を変更できます

コードで設定を書くには、.workspaceの中身が下のようになっているので好きに書きます

code:tmp.workspace

{

"folders": [

{

"path": "."

}

],

"settings": {

//ここに好き勝手に書きます

}

}

フォルダにおける設定

フォルダ単位での環境を作成する

ワークスペースを開いている状態で設定するときは「ファイル」→「ユーザー設定」→「設定」で設定を開き、フォルダの名前を選択して変更を加えていきます．

フォルダを開いている状態で設定するときは開いたときにフォルダ名はありませんがワークスペースを選択するとそのフォルダの設定を変更できます

.vscodeの中にsettings.jsonファイルが作成されるので、ここに直接書き込むこともできます．

ショートカットキー

便利なショートカットキー

を紹介しようと思ったんですが、膨大な量だったのでまとめてあるものを紹介します

ショートカットキーの変更方法

理由はわかりません、もしかしたら設定できるかもしれませんが、私は知りません．知っている人がいたら教えてくださると助かります．

「ファイル」→「ユーザー設定」→「キーボードショートカット」を選択します．

開かれたファイルで変更したいショートカットキーを見つけてダブルクリックするとショートカットキーの受付が始まるので任意のキーを押します．

エンターで決定です．

設定をリセットしたい場合は右クリックからできます

設定したショートカットキーは被っている場合上書きされるので注意してください

統合ターミナル

vscodeでは外部のターミナルをvscode内で使用することができ、ctrl(command) + @で開くことができます．

例えばgitを統合ターミナルで開けばわざわざgitを開いてどうこうしなくてもよくなりますし、power shell等を使えばコードのコンパイルや実行が可能になります．

残念ながらデフォルトでは複数のターミナルを追加できませんが、

shell.launcherという拡張機能をインストールすると複数設定することができるようになります．

以下にsell.launcherの導入方法を記します．

ctrl(command) + shift + xで拡張機能検索ウィンドウを表示します．

検索窓にshell launcherと打ち込みます

一番上に出てくるShell launcherを選択し、インストールします

リロードします

「ファイル」→「ユーザー設定」→「設定」を選択します

開いた設定ファイルから右上の設定(JSON)を選択し、settings.jsonファイルを開きます

ここのsettings.jsonは全体の設定をいじっていますが、ワークスペースやフォルダにおける設定をいじっていただいてもかまいません．

開いたsettings.jsonファイルに以下のように追加したいターミナルを追記します

code:exsample_settings.json

"shellLauncher.shells.windows": [

{

"Shell": "C:\\Windows\\<sysnative>\\cmd.exe",

"label": "cmd"

},

{

"Shell": "C:\\Windows\\<sysnative>\\WindowsPowerShell\\v1.0\\powershell.exe",

"label": "PowerShell"

},

{

"Shell": "C:\\Program Files\\Git\\bin\\bash.exe",

"label": "Git bash"

}

]

一応これで設定は完了なのですが、shellLauncher.launchをいちいち呼び出さなければならないのは面倒なのでショートカットキーを設定します

「ファイル」→「ユーザー設定」→「キーボードショートカット」を開きます

右上のキーボードショートカットを開く(JSON)を選択し、keybindings.jsonファイルを開きます

以下の内容を追記します

code:keybindings.json

[

{ "key": "ctrl+alt+`", "command": "shellLauncher.launch" }

]

"key"の部分は各自お好みで変更してください

以上で設定したショートカットキーを押すと設定した複数のターミナルが選択肢に表示されるようになったと思います．

タスク(task)

taskとは

タスクとはエディター内部から様々な作業を自動的に行う機能のことです

例えばある言語のコンパイルと実行をするということをタスクに登録しておけば、そのタスクを起動するだけでやってくれます．また、タスクにショートカットキーを割り当てることもできるのでショートカットキーを押してコンパイルと実行をするなんてこともできるようになります．

taskの作り方

GUI操作でやるにはコマンドパレットを開いて(ctrl(command) + shift + P)taskと打ち込めばタスク関連の事項は出てくるのでそこから設定していきます．

フォルダにおけるタスクを作成する場合は.vscodeの中にtasks.jsonファイルを作成し、書き込んでいきます

code:tasks.json

{

"version": "2.0.0",

"tasks": [

{

"label": "taskの名前",

"type": "taskのタイプ",

"command": "実際のコマンド",

}

]

}

のように書きます

code:tasks.json

{

"version": "2.0.0",

"tasks": [

{

"label": "normal_exe",

"type": "shell",

"options": {

"shell": {

"executable": "C:\\Windows\\System32\\wsl.exe"

}

},

"command": "g++",

"args": [

"`wslpath",

"'${file}'`",

"-o",

"`wslpath",

"'${fileDirname}\\a.out'`",

"&&",

"`wslpath",

"'${fileDirname}\\a.out'`"

],

"group": {

"kind": "build",

"isDefault": true

}

},

{

"label": "compile",

"type": "shell",

"options": {

"shell": {

"executable": "C:\\Windows\\System32\\wsl.exe"

}

},

"command": "g++",

"args": [

"`wslpath",

"'${file}'`",

"-o",

"`wslpath",

"'${fileDirname}\\a.out'`"

],

"group": {

"kind": "build",

"isDefault": true

}

}

]

}

キーボードショートカットを割り当てる方法

作成したタスクに対してキーボードショートカットを設定することができます．

「ファイル」→「ユーザー設定」→「キーボードショートカット」を選択し、右上のキーボードショートカットを開く(JSON)を選択します．

開けたらファイルを

code:keybindings.json

[

{

"key": "ショートカットキー",

"command": "workbench.action.tasks.runTask",

"args": "tasks.jsonファイルでlabelで定義した文字列"

}

]

のように書きます．

code:keybindings.json

[

{

"key": "ctrl+shift+1",

"command": "workbench.action.tasks.runTask",

"args": "compile"

},

{

"key": "ctrl+shift+2",

"command": "workbench.action.tasks.runTask",

"args": "normal_exe"

}

]

したいことによって詳細は多岐に渡るので、各自で「自分が自動化したいこと、vscode tasks」等で調べてみるのが一番だと思います．

ユーザースニペット

vscodeには登録してある文字列を特定の打ち込みからタブキーを押すことで呼び出す機能があります．

標準で搭載されているスニペットもあります．

forと打ってからタブキーを押すと

code:exsample.cpp

for (size_t i = 0; i < count; i++)

{

}

と表示され、さらにタブキーを押すとsize_t、i、countの順番でカーソルが移動して編集できるようになります．(タブストップと呼ばれるらしい)

こういったものを自作することができます．

ユーザースニペットの自作方法

まず、「ファイル」→「ユーザー設定」→「スニペット」と選択します

様々な言語の選択肢が出てきます．ここではC++のスニペット作成の手順を説明します

でてきた検索窓にcppと打ち込みます．

cpp jsonが出てくるので選択します．

cpp.jsonというファイルが開くので、そこを編集していきます

code:cpp.json

{

"スニペットの名前": {

"prefix": "呼び出すときに打ち込む文字列",

"body":[

"出力される文字列",

"複数行も可能",

],

"description": "説明文"

}

}

といった感じに編集していきます、

以下にcout << 1番目のタブストップ << endl;をcouで呼び出せるようにするjsonファイルを書き記します

code:cpp.json

{

"cout<<endl;": {

"prefix": "cou",

"body": [

"cout << $1 << endl;"

],

"description": "cout<<endl;"

}

}

変数の場所、上記で言うと$1の部分ですが

${1:x}

というように書くこともできます

数字は何番目のタブストップかを表し、xは初期値の文字列です

また、共通の変数を複数追加したい場合は同じ数字のものを複数書けばいいだけです

「ファイル」→「ユーザー設定」→「ユーザースニペット」を選択してから「"$ファイル名"の新しいスニペットファイル」があるので選択します

適当に名前をつけてエンターを押すと.vscodeフォルダの中に 付けた名前.code-snipet が作成されているので、それに先ほどと同様に編集していけばできます

拡張機能

デフォルトの機能でも確かに十分多機能なのですが、拡張機能を入れることによりさらに自分用に多機能にしていくことができます．

単純に配色テーマを変えるものから操作性を一変させるものや他のサービスと連携するものまで様々なものがあります．

導入した拡張機能の設定方法は「ファイル」→「ユーザー設定」→「設定」を開き拡張機能の項目に導入した拡張機能の名前が表示されているのでそこで行います

おすすめの拡張機能は以下で紹介しています、そのうち以下は更新するかもしれません

拡張機能はとても強力なので「おすすめ　拡張機能」とかで調べてみるといいかもしれませんね

最後に

vscodeはすごいから皆も使いませんか

おすすめの拡張機能はvimです

お疲れさまでした