プログラミング 環境構築

Windows10でVisualStudioCodeの環境構築

https://qiita.com/mitsudaman/items/a727d36c9fac47987fab
今までSublime Textというエディタを使っていたのですが、Visual Studio Code(以下VSCode)がよさそうだったので、導入しました。備忘録として残しておきます。

VSCodeのダウンロード

下記サイトからインストーラをダウンロードします。

私のPCはwindosなので、windowsを選択します。

インストーラがダウンロードできたらインストーラを起動します。
全部にデフォルトの設定のままです。


パスは通さなくてもよかったのですが、一応通しておきました。

これで完成です。

VSCodeの設定

拡張機能をインストール

VSCodeでは様々な拡張機能が用意されています。
私はPythonを使っているので、Python関係の拡張機能をインストールします。

下記赤枠をクリックすると拡張機能の一覧が表示されます。

今回はpythonとAnaconda用の拡張機能をインストールします。


拡張機能を入れることでインデントを自動でやってくれたり、python用のスニペットが追加されます。(スニペットについては後で説明いたします。)

補完候補をEnterで選択しないようにする

この設定は好みによって設定してみてください。

VSCodeの機能でコードの自動補完機能があるのですが、この補完機能が邪魔な場合があります。

例えばPythonでよく使うpandasをimportする際に下記のように書くと思います。
書き終わり、改行しようとEnterを押すと補完機能が働いてしまい、下記のようになってしまいます。

これがなかなか煩わしかったので、EnterではなくTabで補完できるようにしました。
設定は簡単にできます。左下にある歯車のマークをクリックし、"settings"を選択します。

検索窓に"enter"と入力すると"Accept Suggestion On Enter"というものが出てくると思います。これをoffにすると補完候補がTabで入力できるようになります。


スニペットの設定

スニペットについて知らない人もいると思うので、簡単な説明を紹介します。
スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。
https://webnaut.jp/markup/628.htmlより引用
要は自分オリジナルの補完を作れる機能です。

やり方は先ほどと同様に歯車のマークをクリックして、"User Snippets"を選択します。

User Snippetsを選択したら、どの言語のスニペットを作るかを選択します。
今回はPythonのスニペットを作ります。

作り方はコメントアウトされている例文を元に作成しています。
例文の6行目までがスニペットについての説明なので、7行目以降をコピーします。
基本的に編集するのはprefix,body,descriptionの3か所です。

{
 // Place your snippets for python here. Each snippet is defined under a snippet name and has a prefix, body and 
 // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
 // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
 // same ids are connected.
 // Example:
 // "Print to console": {
 //  "prefix": "log",
 //  "body": [
 //   "console.log('$1');",
 //   "$2"
 //  ],
 //  "description": "Log output to console"
 // }

 "numpy": {
  "prefix": "np",
  "body": [
   "import numpy as np",
   "$1"
  ],
  "description": "numpy import"
 },
 
 "pandas": {
  "prefix": "pd",
  "body": [
   "import pandas as pd",
   "$1"
  ],
  "description": "pandas import"
 }
}

以下各編集箇所の説明です。


prefix なんて入力したらそのコードを呼び出せるか。
body コードの中身
description スニペットの説明

また、例文の"Print to console"はスニペットの名前です。
複数のスニペットを登録する場合はスニペットごとにきちんと名前を変えてください(理由は後述)

今回はよく使うnumpyとpandasをインポートするスニペットを作成しました。

"\$1"となっている箇所がありますが、これはスニペットを呼び出した際に"\$1"と書かれた箇所にカーソルが移動します。

また、基本的にスニペットは
"スニペット名(例文では"Print to console")":{
で、かっこを開いて閉じるまでで一つのスニペットとなります。
複数のスニペットを作る場合も作る数に合わせて
"スニペット名(例文では"Print to console")":{
を記述します。

一つ注意しなければいけないのは、スニペットごとにかっこを開いて、閉じますが
閉じた際にカンマをつける必要があります。(今回作成したnumpyのスニペットには閉じた後にカンマがあります。)

地味に躓いたところ

例文で
"Print to console"
となっているところはスニペットの名前なのですが、なんでもいいと思って全部
同じ名前としていました。そうすると最後のやつしか使えないという状態になります。
参考にしたサイトでは全部同じ名前にしていたので、なかなか原因に気が付きませんでした。(冷静に考えれば当たり前な気がしますが...)

実際に使ってみた

きちんと補完の候補にUser Snippetが表示されるようになりました。

参考にしたサイト


0 件のコメント :

コメントを投稿