Go to Qiita Advent Calendar 2024 Top
LoginSignup
123
191

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@k_zoo(ZOO)inobniz

VSCodeのセットアップ・各種言語(C, C++, C#, Python, HTML, Java Script, LaTex)の環境構築のまとめ(というかVSCode布教サイト)

Last updated at Posted at 2019-03-23

普段テキストエディタとしてVSCode(Visual Studio Code)を使っているのですが，これが統合開発環境のVisual Studioに比べて半端なく使いやすいので，布教がてら環境の整え方を書いていきます．やったら随時増やす予定．

(2019/03/31追記)
VSCodeの設定ファイル(launch.json, settings.json, tasks.json等)の中身を全部羅列してみた
という補助記事を書きました．jsonなどの環境ファイルをつらつら並べたものですが，皆様の一助になれば幸いです．

#VS Codeとは
取りあえず公式サイトを抜粋．

Visual Studioコードは,最新のWebアプリケーションとクラウドアプリケーションのビルドとデバッグを行うために再定義され、最適化されたコードエディタです。Visual Studioコードは無料で、お気に入りのプラットフォーム（Linux、macOS、Windows）で利用できます．

また，ほとんどの言語に対応しています．他にも，

シンタックスハイライト(構文強調表示)だけでなく，IntelliSenseを使うことで変数の型，関数定義，およびインポートされたモジュールに基づいてスマートな補完が提供されます．

例えばArduino IDEとかだと関数は自分で書く癖に一文字も間違えずに書かないとコンパイルエラーしてましたが，これは途中まで打つと勝手に関数が予測表示されます．Visual Studioに付いていたこのめっちゃ便利で強力な機能がVS Codeにも引き継がれているとか神かよ

エディタからコードを直接デバッグします。実行中のアプリケーションを起動または接続し、ブレークポイント、コールスタック、対話型コンソールでデバッグします。

エディタからデバッガ呼び出せるとか神かよ．
・エディタ→プラグラム書くソフト
・デバッガ→プログラム点検するソフト
なんですが，それが一緒になっていて便利です．雰囲気だけでも伝われ．

Gitコマンドが組み込まれています。エディタから直接コミット出来ます。

Gitはプログラム書く際に必須といってもいいほどの機能．クラウドに保存するファイルの様にどんどん上書きできるけど，バージョン管理がしてあって自分の戻りたいバージョンに一瞬で戻れます．
「取りあえずプログラム書いてみてから考える」プロセスに超重要．エディタから直接コミット出来るとか神かよ

拡張可能でカスタマイズ可能。 拡張機能をインストールして、新しい言語、テーマ、デバッガを追加し、追加のサービスに接続します。拡張機能は別々のプロセスで実行され、エディタの速度を落とさないようにします。

これがVisual Studioとの最大の違い．
VS Codeはただのテキストエディタ．しかし，それぞれの言語の開発環境をプラグインとしてエディタに繋いで使うことが出来るので，VS Codeから様々な開発環境にアクセスできるのが強い．(言語ごとに専用のエディタをいちいち開かなくてよいって事．それぞれの開発環境自体は入れないとダメです)
特に言語自体は良いものでも，環境がクソだったりするものに関しては半端ではないメリットを誇ります．(PythonとかArduino IDEとか...)
しかもVS Codeではオフィシャルが出しているプラグインは勿論，大変便利な有志のプラグインもインストールして使うことが出来，プログラム構築を簡単にするのに非常に重宝しています．
以上，無駄話でした．

#VS Codeの環境構築
以下のサイトに従って進めれば終わり．
VSCodeについての特徴も良くまとまっている素晴らしい記事です(ゴマすり)．
俺が説明する必要あった？
https://eng-entrance.com/texteditor-vscode

便利なプラグイン一覧

Gif付きで分かりやすいサイト．
https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234
この中から自分の欲しいものを探すと良いと思います．

以下は個人的に重宝しているプラグイン．

・Coderunner
「Run Code」ボタンを押すだけでコードを実行してくれる．
自分でいちいちターミナルを開かなくていい．マジ便利．
以下のサイトに概要が一通り書いてある．
https://www.bloguchi.info/1282
また，デフォルトだと読み取り専用の出力しか出せず，scans系のプログラムとの通信が出来ず不便なので，以下のサイトを見て設定を追加しよう．
CodeRunnerの出力をターミナルに出す方法[VSCode]

・Japanese Language Pack for Visual Studio Code
英語が出来ない日本語が得意な人向けのプラグイン．
最初VS Codeはコンソールが日本語じゃないのでこれを入れて日本語にしよう．

・GitLens
VSCodeの開発の主目的と言われているほどの強力プラグイン．
Gitコマンドを打たなくてもこれで全部コミットしてプログラムのバージョン管理が出来る．更にエディタ上でカーソルをフォーカスすると，どこを何分前に変えたとかが全て表示される．
マージで便利．(追記：ボタン1つでGithubにもpush出来ることを確認．神．)
・Git History
GitLensと併用．コミットしたファイルが時系列に並び，非常に見やすくなるプラグイン．

#C/C++の環境構築
以下のサイトに従って進めれば終わり．
https://qiita.com/OcoToOo/items/f1d0a125327f5659ad52
以下のサイトも非常に構築の流れが理解しやすいので，難しければ補足としてみると良い．
http://nonbiri-tereka.hatenablog.com/entry/2017/02/13/081605
こっちでも各種設定について書いてあるので，エラーが出るなど気になるところあれば参照．
https://vscode-doc-jp.github.io/docs/languages/cpp.html

###設定でエラー出て苦労したところ

####i. "cout" "endl"等のC++特有の関数が認識されない(コンパイルではじかれる，シンタックスハイライトされないなど)
https://github.com/Microsoft/vscode-cpptools/issues/757
これには書いてないが[c_cpp_propaties.json]の"intelliSenseMode":"clang-x64"にすると動くこともある．
また，iii. が原因のことが多いので，そちらも併せて試してみよう．

####i-ii. <iostream.h>などのヘッドファイルのみがエラる
C++のアップデートにより<iostream.h>→<iostream>になってるので変更．

####ii. VS Code Update後から動かない
VS Codeのほんとやめてほしいところ．VS Code Update後に関数などが変更されて動かなくなる．
https://github.com/Microsoft/vscode/issues/27006

####iii. Includepathが通らない
[c_cpp_propaties.json]にてincludepathを設定する．"includePath"の所に，自分の該当するパスを入れてあげよう(MinGW使ってるなら多分同じ)．以下のファイルが最も簡潔で，最低限これだけあれば動く．
詳しい(自信のない人用)設定については，VSCodeの設定ファイルの中身を全部羅列してみたを見よう．(ダイマ)

c_cpp_propaties.json
{
    "configurations": [
        {
            "name": "Win32",
            "includePath": [
                "C:\\\\MinGW"
            ],
            "defines": [
                "_DEBUG",
                "UNICODE",
                "_UNICODE"
            ],
            "cStandard": "c11",
            "cppStandard": "c++17",
            "intelliSenseMode": "msvc-x64"
        }
    ],
    "version": 4
}

#C#の環境構築
なんかちょうど良いサイトがなかったので自分で書く．めんどい...人によって対応が分かれるので，以下の条件分岐に従って進めると良いと思います．
###1. ".NET Core SDK"をインストール
　C#をビルドするのに必要．Visual Studio（Visual Studio codeではないよ）には同梱されているので，Visual Studio入れている人は次へ．入ってるか不安な人は.NET Core SDKをダウンロードするか，Visual Studio Installerで[変更]を押して「.NET デスクトップ開発」がインストールされているかチェック．
　持っていない人は，Download .NET Core SDKからダウンロードしよう．
###2. Visual Studioでプラグインを入れる
　以下のプラグインが有能なので入れよう．
・C#
　Microsoft製のプラグイン．自動でデバッカを入れてくれて，デバッグ出来るようになる．
・C# FixFormat
　書いたプログラムのフォーマットをフィックスしてくれる(まんま)．まあまあ便利．
###3. C#のプログラムを作成
　ターミナルを開いて，C#ファイルを作りたいディレクトリに移動する．移動出来たら，以下の1行目のコマンドを打つと"test"って名前のプロジェクトファイルが出来る．例としてWindows PowerShellでやったけど，コマンドプロンプトでもMacのターミナルでもBashでも出来る．
　***には俺のユーザ名なので伏せてます．ファイルの場所はあくまで1例で，参考程度に．
　2行目で実行ファイル内に行き，3行目で実行して，"Hello World!"が出ればOK．C#が書けるようになっている．

Terminal(Windows_PowerShell)
PS C:\Users\***\Documents\VScode\C_Sharp> dotnet new console -o test
PS C:\Users\***\Documents\VScode\C_Sharp> cd test
PS C:\Users\***\Documents\VScode\C_Sharp\test> dotnet run
Hello World!

###4. デバッグ
現在デバックできる方法を二つ確認しています．1番目がより確実ですが，2番目はウィンドウを変えずに使えます．お好みでどうぞ．

####1. C#ファイル専用のウィンドウを開く
Windows PowerShellにおいてC#プロジェクトファイルのディレクトリに移動し，codeコマンドを起動．新しいVS Codeのウィンドウを開く．C#ファイル内の"Program.cs"を選択し，デバッグ画面のリボンに行き，以下の様な[構成の追加...]をクリック．[.NET Core]を選択すると自動で起動オプションが生成される．後は"Program.cs"を選択し[F5]を押してデバッグできるはず．

Terminal(Windows_PowerShell)
PS C:\Users\***\Documents\VScode\C_Sharp\test> code .

debagger.JPG

####2. ウィンドウを変えずにVS Codeを使う場合
C#ファイル内の"Program.cs"を選択しておく．先ほど同様デバッグ画面のリボンに行き，[構成の追加...]をクリック．[launch.json]に飛ぶので，以下に示す[{}.NET: ...]を選択すると自動で起動オプションが生成される．
細かいデバッグオプションの説明については以下のサイトが分かりやすい．
https://www.atmarkit.co.jp/ait/articles/1709/01/news034_3.html
image.png

###設定でエラー出て苦労したところ
####i. タスク'build'を見つけられませんでした。
C#プロジェクトファイル内のdllファイルが見つけられてないので，以下の様に[launch.json]の"program"に.dllファイルをきっちりパスしてあげる．多分皆プロジェクト名と同じ名前の.dllファイルが同じような所に入っていると思うので，自分に合わせて書いてください．

launch.json
{
	"name": ".NET Core Launch (console)",
	"type": "coreclr",
	"request": "launch",
	"preLaunchTask": "build",
	"program": "${workspaceFolder}/test/bin/Debug/netcoreapp2.1/test.dll",
	"args": [],
	"cwd": "${workspaceFolder}/test",
	"stopAtEntry": false,
	"console": "internalConsole",
}

####ii. prelaunchtask'build'が終了コード1で終了しました。
"preLaunchTask": "build"をコメントアウト．ただ，これは根本的な解決になってない気がするので，引き続き調べます...知っている人がいたら教えて頂けると個人的にも大変ありがたいです．

#Python3の環境構築
以下のサイトに従って進めれば終わり．
良く起きるエラーについても書いてあって楽．
Python3をインストールする際はADD PATHに絶対チェックを入れよう．
他のソフトとの兼ね合いで面倒になることが多々ある．
https://www.atmarkit.co.jp/ait/articles/1711/24/news034.html

###設定でエラー出て苦労したところ
####i. 実行してもターミナル若しくはOutput画面で文字化け

 'python' �́A���R�}���h�܂��͊O���R�}���h�A
����”\�ȃv���O�����܂��̓o�b�` �t�@�C���Ƃ��ĔF������Ă��܂���B

以下のサイトで解決
https://teratail.com/questions/116351

####ii. Linter pylint is not installed.
何回やっても消えずほんとウザかった．
VSCodeがPythonを見つけられてないのでInclude Pathを設定しよう．
[settings.json]にてincludepathを設定する．自分は以下のようにした．
Python_Ver3.7だとpythonPathは多分同じ．不安なら自分でエクスプローラ開いて調べる．
***には自分のユーザ名を入れてくれ．

settings.json
    //Python設定
    "python.jediEnabled": false,
    "python.pythonPath": "C:\\Users\\***\\AppData\\Local\\Programs\\Python\\Python37\\python.exe",
    "python.linting.pylintEnabled": true,
    "files.autoGuessEncoding": true

#HTML, Java Scriptの環境構築
以下のサイトに従って進めれば終わり．
VS Codeで簡単にJava Script, HTMLの統合開発環境を作ってみた(obnizに応用してみた)

#LaTexの環境構築
以下のサイトに従って進めれば終わり．
http://elecho.hatenablog.com/entry/2017/04/27/175500
ただし，TexLiveを入れて操作することを念頭に置こう．
###設定でエラー出て苦労したところ
####i. w32TexをVS Codeで使用する
上のサイトではTexディストリビューション何でもいいって言ってたけど，w32Texで頑張ったけど出来なかった...
TexのコンパイルにはデフォではLatexmkが必要だけど，それをw32Texで動かすにはPerl5が必要．
詳しくは以下の公式サイト参照．
https://texwiki.texjp.org/?Latexmk
まあTexLive使えば普通に動くのでいいか...

123
191
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
123
191

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?