Visual Studio Code ができる子なので、開発環境をよせていってます。

C#のちょっとした検証とかを行うのに Visual Studio 立ち上げるのは重いので、Visual Studio Code でできるといい感じ。昔のSharpDevelopみたいに。って、今でもあるか。

ということで、以下を参考に構築する。

https://docs.microsoft.com/ja-jp/dotnet/csharp/getting-started/with-visual-studio-code

1. .NET Coreのインストール

1.1 .NET Core

https://docs.microsoft.com/ja-jp/dotnet/core/

Visual Studio CodeでC#を使うには、.NET Core SDK を使用する必要があるようだ。

.NET Core とは、すべての.NETランタイムで実行できることを目的としたAPIの正式仕様である .NET標準ライブラリを実装した、クロスプラットフォーム(Windows,macOs,Linux) で、オープンソース(MIT,apache2 ライセンス) な開発プラットフォーム。

.NET標準ライブラリ を通して、.NET Framework、Xamarin、Mono と互換性があり、Microsoftによってサポートされている。

自己完結型の展開 として、.NET Core ライブラリ、.NET Core ランタイムすべてをアプリケーションに含んで展開を行うことが可能となっている。

1.2 ダウンロードとインストール

https://www.microsoft.com/net/download/core

上記からSDKをダウンロードしてインストール。

vscode_with_cs01

2. C# 拡張機能のインストール

https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp

Visual Studio Codeを起動し、以下を実行

  • Ctrl + p
  • ext install csharp
  • インストール

vscode_with_cs02

3. コンソールプロジェクトの作成

3.1 Visual  Studio Code で、以下のキーを押下し端末を起動する。

Ctrl + @

3.2 コンソールプロジェクトの作成

PS C:\workspaces\vscode\cslesson> dotnet new cnsole

vscode_with_cs03

Hello world プロジェクトが作成された。

vscode_with_cs04

3.3 ビルドに必要な.NET Core パッケージにアクセス

PS C:\workspaces\vscode\cslesson> dotnet restore

4.実行

PS C:\workspaces\vscode\cslesson> dotnet run

実行された!

vscode_with_cs05

5.デバッグ

ブレークポイントをはったり、ステップ実行をする。

「Required assets to build and debug are missing from ‘{app name}’. Add them?」と聞かれるので、Yes を選択する。

vscode_with_cs06

F5 でデバッグ実行。

左端から、虫のアイコンを押して、上部の 再生ボタンから、「.NET Core launch(console)」の実行でもよい。歯車アイコンから、起動パラメータなどの設定も可能。

vscode_with_cs07

https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger.md

6.展開

.NET Core アプリケーションの展開

Deployint .NET Core apps with command-line interface (CLI) tools

6.1 コンソール Exe アプリケーションを作成する。

プロジェクトファイル .csproj を開き、RuntimeIdentifiers に、対象ターゲットを指定する。

<PropertyGroup>
 <OutputType>Exe</OutputType>
 <TargetFramework>netcoreapp1.1</TargetFramework>
 <RuntimeIdentifiers>win10-x64</RuntimeIdentifiers>
</PropertyGroup>

6.2 ビルド

> dotnet restore

デバッグビルド

> dotnet build

ターゲットを指定してビルド

> dotnet publish -c Release -r win10-x64

/bin/Release/netcoreapp1.1/win10-x64/  以下に EXEが生成された。

vscode_with_cs08

実行してみる。

vscode_with_cs09

OK!

Reactのチュートリアルをこなしているが、シンタックスエラーがあると画面が表示されないだけでどこでエラーが発生しているかわからない。

1.Chrome の拡張機能を使ってデバッグ

1.1 拡張機能をインストール

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

react_debug01

1.2 設定を変更

chrome://extensions/

上記URLにアクセスし以下2か所を有効

  • バックグラウンドページ
  • ファイルのURLへのアクセスを許可する

react_debug02

1.3 デバッグツールを起動し、React タブを選択

コンポーネントを選択することで、状態だったりが分かりそう。

react_debug03

1.4 シンタックスエラー

シンタックスエラーがあると、表示される!これは捗るな。

react_debug04

以上

以下のようなSSLエラーが発生する。

Node.js

PS C:\workspaces\vscode\reactlesson> npm install react-create-app
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "reac
t-create-app"
npm ERR! node v6.10.2
npm ERR! npm  v3.10.10
npm ERR! code EPROTO
npm ERR! errno EPROTO
npm ERR! syscall write

npm ERR! write EPROTO 101057795:error:140943FC:SSL routines:ssl3_read_bytes:sslv3 alert bad record mac:openssl\ssl\s3_pkt.c:1493:SS
L alert number 20
npm ERR! 101057795:error:1409E0E5:SSL routines:ssl3_write_bytes:ssl handshake failure:openssl\ssl\s3_pkt.c:659:
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     

npm ERR! Please include the following file with any support request:
npm ERR!     C:\workspaces\vscode\reactlesson\npm-debug.log

SSLを使用しない用に、以下のファイルのregistry のプロトコルをhttps から http に編集する。

C:\Program Files\nodejs\node_modules\npm\lib\config\default.js

registry: 'http://registry.npmjs.org/',

Bower

インストールしたbowerでも同様のエラーが発生する

> bower search react


bower EPROTO        Request to https://bower.herokuapp.com/packages/search/react failed: write EPROTO 101057795:error:140943FC:SSL
routines:ssl3_read_bytes:sslv3 alert bad record mac:openssl\ssl\s3_pkt.c:1493:SSL alert number 20 101057795:error:1409E0E5:SSL rout
ines:ssl3_write_bytes:ssl handshake failure:openssl\ssl\s3_pkt.c:659:

Node.js と同様に、registry の プロトコルを https から http に変更する

\%USERPROFILE%\AppData\Roaming\npm\node_modules\bower\lib\node_modules\bower-config\lib\util\defaults.js

var defaults = {
    'directory': 'bower_components',
    'registry': 'http://bower.herokuapp.com',
    'shorthand-resolver': 'http://github.com/{{owner}}/{{package}}.git',
    'tmp': paths.tmp,
    'proxy': proxy,