読者です 読者をやめる 読者になる 読者になる

pep8とDjango環境に合わせてVisual Studio Code環境を調整する

Visual Studio Code https://code.visualstudio.com/ は、Microsoftが無償で提供している、多言語プログラミング用のエディタだ。軽快なのが特徴である。

今回は、Visual Studio Codeの環境を調整する。私なりにpep8-Djangoコーディング環境に適した状態にするのが目標だ。
なぜVisual Studio Codeを選んだかについては、Mac OSXでのプログラミング環境として考えた場合、軽快で無料だから。詳しくは下記記事で述べた。giraffydev.hatenablog.com

Visual Studio Codeをmac OSXにインストールする

Visual Studio Codeの公式サイト https://code.visualstudio.com/ よりf:id:giraffyk1:20150815153650p:plain
ダウンロードすれば、Visual Studio Code.appが格納されたzipファイルがダウンロードされる。appを取り出してアプリケーションフォルダに突っ込めば終わり。
f:id:giraffyk1:20150815153913p:plain

Visual Studio CodeのMac版を起動した画面だ。すこぶるシンプルである。現時点でのバージョンは0.7だった。


主要な機能をビデオを見て確認する

なんだか良さそうだけど、どんな機能があるのかはまだ不明。公式サイトのVisual Studio Code主要機能紹介動画を確認してみる。
Build 2015: Visual Studio Code - YouTube
解説を抜粋する
f:id:giraffyk1:20150816133617p:plain

  • 特に何も設定していない状態で、VB.Net V5のソースをロードさせるとこういう表示になる
  • 左にファイルやアプリケーションのコンポーネント、モデルやビューが表示されている
  • タイピングをすると予約後がポップアップする
  • コード内で呼び出されたクラス名にカーソルを合わせると中のコードがポップアップする
  • コード内で呼び出されたクラスやメソッドを右クリックすると、メニューから呼び出し元のコードにジャンプできる
  • 変なコードを書くとワーニングがポップアップする
  • キーボードフレンドリーでcommand + p から色々できる。gitなど外部コマンドも実行できる
  • プロジェクトベースではなくフォルダベースで管理しているので、フォルダを指定するだけですぐコードが書ける
  • F5を押すだけでブレークポイントを設定してすぐ走らせれる

VB.netフレンドリーなのは分かったがpythonでも同様に動作するのか。そのあたりが疑問である。

クイックツアーで機能を全体的に確認する

公式サイトのクイックツアーでさらに機能を確認する

The Basics of Visual Studio Code

VS Codeの基本的な機能の解説が、 https://code.visualstudio.com/Docs/editor/codebasics にある。

  • Visual Studio Codeは2ペインで左側にUI、右側が編集画面になっているcode editorである
  • フォルダを読み込ませるだけですぐコードがかける
  • いくつかのフレームワークプロジェクトファイルに対応していて、

インテリセンス - Wikipedia な追加高機能が利用できる
f:id:giraffyk1:20150816141643p:plain

  • エディタを同時に3つまで起動できる
  • 最後に開いたフォルダが次回起動時に自動で読み込まれる
  • キーボード操作でサイドバー(左のUI)のon/off が出来る。キーボードからエディタの分割ができる
  • ドラッグアンドドロップでエディタの入れ替えができる

f:id:giraffyk1:20150816142314p:plain

  • コンソールフレンドリーでサイドバーからすぐコンソールを呼び出せる
  • command + p からコマンドラインから外部コマンドラインツールをすぐ呼び出せる
  • files.exclude ファイルを用意すると、非表示ファイルの設定などを柔軟に指定できる

f:id:giraffyk1:20150816142909p:plain

  • サイドバーのWORKING FILESは直近に開いたファイルの一覧
  • WORKING FILESは他IDEのタブの変わりとして機能するだろう
  • WORKING FILESの最大数なんかは設定で変えられる
  • Command + Sでファイルセーブだけどauto save機能もあるので検討してね shift + command + p でプロンプトを出して、autoと打つだけでON/OFFできる

f:id:giraffyk1:20150816143535p:plain

  • サイドバーから強力なファイル検索機能が使える。shift + ctrl + s
  • shift + ctrl + j でワイルドカードを使った検索なんかもできる

f:id:giraffyk1:20150816143910p:plain

  • shift + command + p のコマンドパレットはめっちゃ使える
  • command + p でファイル名やシンボル名でエディタ呼び出し
  • ctrl + tab でファイル履歴からエディタ呼び出し
  • command + o でシンボル検索
  • ctrl + g で行番号ジャンプ

f:id:giraffyk1:20150816144441p:plain

  • ファイルエンコーディングに対応
  • コマンドラインからVS Codeを起動できる。ファイル名指定で起動も可能(要追加設定)

Editing Evolved

このページに関しては省略。
https://code.visualstudio.com/Docs/editor/editingevolved:title]
より細かなエディタの挙動が確認できる。
f:id:giraffyk1:20150816145516g:plain
インテリセンスについてだけ解説すると、C#, TypeScript, CSS, HTML, JavaScript, JSON, Less, Sassに関しては対応している模様。perl,python,php,rubyなどはシンタックスとカッコのマッチだけ対応。言語によって、ただのハイライト付きエディタになるかが決まる。詳しくは
https://code.visualstudio.com/Docs/editor/languages を参照。

私の場合、今回のプロジェクトではtypescriptかjavascriptがメインの戦場になるので、python対応がイマイチでも良しとする。

VS Codeの設定を変更してpep8 Django環境に適したように調整する

https://code.visualstudio.com/Docs/editor/customization を参照し、設定を調整していく。

  • 【Changing the Theme】テーマの設定。初期設定で黒背景なのでそのままにする。暗いテーマ、明るいテーマの2つが確認できた
  • 【User Defined Snippets】自作スニペットの登録。あんまり使わないのでとりあえず不要か。コードコピペ辞書みたいなもの
  • 【User and Workspace Settings】詳細コンフィグ。コンフィグファイルによって提供される。macではcontrol + p でdefault settingを呼び出し、settings.jsonに上書きする。

Default settingを読み下しつつ設定した内容がこちら

{

	//-------- Editor configuration --------

	// Controls the font family.
	// フォントファミリーの変更
	"editor.fontFamily": "Ricty",

	// Controls the font size.
	// フォントサイズの変更(ゼロは指定しない)
	"editor.fontSize": 14,

	// Controls the line height.
	// 一行の高さ(ゼロは指定しない)
	"editor.lineHeight": 17,

	// Controls visibility of line numbers
	// 行番号の表示
	"editor.lineNumbers": true,

	// Controls visibility of the glyph margin
	// グリフマージン(行番号そばのエラーやブレークポイントマーク)の表示
	"editor.glyphMargin": true,

	// Controls the rendering size of tabs in characters. Accepted values: "auto", 2, 4, 6, etc. If set to "auto", the value will be guessed when a file is opened.
	// タブの表示サイズ、autoはファイルオープン時に自動で決定される。2,4,6(文字のスペースで表現)が設定可能
	"editor.tabSize": "4",

	// Controls if the editor will insert spaces for tabs. Accepted values:  "auto", true, false. If set to "auto", the value will be guessed when a file is opened.
	// タブ入力時にスペースを入れるか。true/false autoはファイルオープン時に決定される
	"editor.insertSpaces": "true",

	// Controls if selections have rounded corners
	// 選択範囲(反転)の範囲の角を丸くするか
	"editor.roundedSelection": false,

	// Controls if the editor will scroll beyond the last line
	// 最終行を越えてエディタをスクロールさせるか
	"editor.scrollBeyondLastLine": true,

	// Controls after how many characters the editor will wrap to the next line. Setting this to 0 turns on viewport width wrapping
	// 1行あたりの折り返し文字数
	"editor.wrappingColumn": 100,

	// Controls the indentation of wrapped lines. Can be one of 'none', 'same' or 'indent'.
	// 行折り返しした後の文字開始位置 none=変更しない same=折り返し行と同じ位置から indent=折り返し行をさらにインデントする
	"editor.wrappingIndent": "same",

	// A multiplier to be used on the `deltaX` and `deltaY` of mouse wheel scroll events
	//マウスホイールのスクロール量
	"editor.mouseWheelScrollSensitivity": 1,

	// Controls if quick suggestions should show up or not while typing
	// 入力候補補完表示をする/しない
	"editor.quickSuggestions": true,

	// Controls the delay in ms after which quick suggestions will show up
	// 入力候補補完の表示タイミングを何ms秒にするか(どれだけ遅らせるか)
	"editor.quickSuggestionsDelay": 10,

	// Controls if the editor should automatically close brackets after opening them
	// 閉じカッコの自動入力を、開カッコを記入されたときにするか
	"editor.autoClosingBrackets": true,

	// Controls if the editor should automatically format the line after typing
	// 自動フォーマット整形をタイピング終わりでするか(不明)
	"editor.formatOnType": false,

	// Controls if suggestions should automatically show up when typing trigger characters
	// インテリセンスの補完表示をトリガ文字が入力されたら表示するか
	"editor.suggestOnTriggerCharacters": true,

	// Controls whether the editor should highlight similar matches to the selection
	// 選択したものと共通するものをハイライト表示するか
	"editor.selectionHighlight": true,

	// Controls the number of decorations that can show up at the same position in the overview ruler
	// 同じ行にあるオーバービュールーラー(エディタ右のライン)の最大表示数
	"editor.overviewRulerLanes": 3,

	// Controls if the cursor should be hidden in the overview ruler.
	// オーバービュールーラーで現在のカーソル位置を隠すか
	"editor.hideCursorInOverviewRuler": false,

	// Controls whether the editor should render whitespace characters
	// 空白文字列(スペース・タブなど)を記号で表示するか�で表示するか
	"editor.renderWhitespace": true,

	// Controls if the editor shows reference information for the modes that support it
	// サポートされているモードならリファレンスを表示するか
	"editor.referenceInfos": true,


	//-------- Files configuration --------

	// Configure glob patterns for excluding files and folders.
	// 除外するファイルとフォルダのパターン
	"files.exclude": {
		"**/.git": true,
		"**/.DS_Store": true
	},

	// The default character set encoding to use when reading and writing files.
	// デフォルトの読み書き文字エンコード方式
	"files.encoding": "utf8",

	// When enabled, will trim trailing whitespace when you save a file.
	// セーブ時に行末の無駄な空白を自動で除去するかどうか
	"files.trimTrailingWhitespace": false,


	//-------- HTTP configuration --------

	// The proxy setting to use. If not set will be taken from the http_proxy and https_proxy environment variables
	// http proxyの設定。https_proxyも設定可能
	"http.proxy": "",


	//-------- File Explorer configuration --------

	// Maximum number of working files to show before scrollbars appear.
	// スクロールバーを付けずに表示するWORKING FILESの最大数(左のサイドバー)
	"explorer.workingFiles.maxVisible": 9,

	// Controls if the height of the working files section should adapt dynamically to the number of elements or not.
	// WORKING FILESの行数を可変する=true/固定する=false。固定するとWORKING FILESの数によらず位置が固定される
	"explorer.workingFiles.dynamicHeight": true,


	//-------- Git configuration --------
	// Path to the git executable
	// gitの実行環境パス
	"git.path": null,

	// Whether auto fetching is enabled.
	// gitでオートfetchするか
	"git.autofetch": true,


	//-------- Search configuration --------

	// Configure glob patterns for excluding files and folders in searches. Inherits all glob patterns from the file.exclude setting.
	// 検索時に無視するファイルやフォルダの名称。file.excludeの設定も受け継ぐ
	"search.exclude": {
		"**/node_modules": true,
		"**/bower_components": true
	},

}

言語個別の設定は今回は省略した。




デバッグ機能の動作確認は次回。デバッグ機能はpythonでは使えない模様。シンタックスエラーも表示されない。このまま使うから軽く悩む。
gitを始めとした外部ツールとの連携は、そののち。もう少し操作になれたら取り組む予定。