ラベル Visual Studio Code の投稿を表示しています。 すべての投稿を表示
ラベル Visual Studio Code の投稿を表示しています。 すべての投稿を表示

2020年12月18日金曜日

Visual Studio Code で Draw.io を使ってみる!


こんにちは。よっしーです。

今日はお仕事のお話。


仕事でシステム設計をするとき、設計書作成にはいつも「Excel」を使っていました。

今まではそれでよかったのですが、ここ最近、仕事先は「脱Excel」の流れが来ていて、

ついに「Excel」での設計書作成が禁止となってしまいました。。。


UMLなどは、Excelで書いていたので、それに代わるツールをどうするか。

という話しになったのですが、最近では Visual Studio Code でいろいろ出来る。

ということがわかり、拡張機能として使える「Draw.io」を使ってみることにしました。




拡張機能から「Draw.io Integration」を選択してインストールします。

dio もしくは drawio という拡張子でファイルを作成すると認識してくれます。



使い勝手は「Visio」みたいな感じで、作図だけでいえば「Excel」よりも優秀な感じがします。



さらにこれのいいところは、SVG形式で出力できること。


SVGは画像ファイルですが、一般的な画像ファイルのように色情報の集合体(ビットマップ)ではなく、

ベクター情報(点の座標とそれらを結ぶ線など)で表現されていて、ファイル自体がテキストファイルになるので、

例えば画像内の文章をgrepなどで引っ掛けることが出来ます。

※ JPEG/PNGの資料からは文字列検索出来ませんが、SVGだと検索出来るので、
  資料を探し当てる際に便利です!!


SVGで出力し、マークダウン形式で設計書を作ってみると以下のようになります。


マークダウンなどもすべて Visual Studio Code上で作成、閲覧することが出来ます。


本当に Visual Studio Code でなんでもできちゃいますね。

UML図の作成についても使い勝手が良かったですし、慣れれば Excel よりも

生産性が出るような気がします。


皆さんも Visual Studio Code でいろいろやってみてはいかがでしょうか。

ではまた~。

2019年5月11日土曜日

Visual Studio Codeの便利なショートカットキー

こんにちは、やっまむーです。

皆さんはソースコードを書く時にエディタは何を使っていますか?
私は、C言語を書く機会が多かったので秀丸エディタで書くことが多かったです。

最近VisualStudioCodeを使ってC言語をステップ実行する機会がありました。

Visual Studio Code でC言語をステップ実行

その際にソースコードを少し書いてみたのですが、
秀丸エディタとショートカットが違っていたので使いにくさを感じて挫折してしまいました。

ただ、そこで終わってしまうのは勿体ないなと。
ちゃんと使った上で、自分にとって良いものか判断しようと思いました。

というわけで、VisualStudioCodeでコードを書く時に知っておくと便利なショートカットについてまとめてみました。

種別操作ショートカットキー
基本操作コピーCtrl + C
基本操作切り取りCtrl + X
基本操作貼り付けCtrl + V
基本操作元に戻すCtrl + Z
基本操作やり直しCtrl + Y
基本操作検索(現在のファイル)Ctrl + F
基本操作置換(現在のファイル)Ctrl + H
基本操作複数ファイル検索Ctrl + Shift + F
基本操作複数ファイル置換Ctrl + Shift + H
基本操作選択行の先頭に移動Home
基本操作選択行の末尾に移動End
基本操作次の検索候補F3
基本操作前の検索候補Shift + F3
基本操作シンボルの名前変更F2
基本操作カーソル行を下に移動Alt + Down
基本操作カーソル行を上に移動Alt + Up
基本操作行コメントの切り替えCtrl + /
基本操作定義に移動F12
基本操作定義をプレビューAlt + F12
基本操作指定行に移動Ctrl + G
エディタ操作エディターを閉じるCtrl + W
エディタ操作エディターを分割するCtrl + \
エディタ操作一番左のエディターにフォーカスCtrl + 1
エディタ操作2番目のエディターにフォーカスCtrl + 2
表示ズームインCtrl + ;
表示ズームアウトCtrl + -
表示ズームのリセットCtrl + NumPad0
表示フォントのズームCtrl + MouseWheel
(設定の"Mouse Wheel Zoom"にチェック)

ここに挙げたもの以外にも便利なショートカットキーはたくさんあります。
また、ショートカットの設定を変更できるので、自分好みにカスタマイズもできます。

「慣れ親しんだものがベスト」「新しいものはよくわからなくて使いにくい」と一蹴せずに、
ちゃんと使ってから判断できる柔軟な考えでいたいですね。

ではまたー!

2019年1月12日土曜日

Visual Studio Code で C++ と Python をデバッグする


こんにちは、ふじかーです。

明けましておめでとうございます。本年もよろしくお願いします。

さて、こないだ下記の記事で VS Code でC言語デバッグできるようにしたんですが
Visual Studio Code でC言語をステップ実行

現場で C++ を扱う可能性が出てきたので、
そちらも VS Code で動かせるようにしたいと思います。

あと、ついでに Python も動かせるようにしたいと思います。

C++_デバッグ環境作成の流れ


    基本的に前回の C言語環境 作成時と同じ流れです。
    ファイル名や設定が少し異なるくらい。
    → ここまでは C言語環境 作成時と全く同じ手順ですので
      前回の記事にリンクしています。実施済みの場合とばしてください。



    C++_作業場所、test.cppの準備


    C言語の時と同じく、適当にHelloWorldソースを用意します。

    #include <iostream>
    
    int main() {
        std::cout << "Hello, world!" << std::endl;
        return 0;
    }
    

    これを作業フォルダに保存しておきます。ここでは D:\test\cpp\test.cpp としました。

    またこの作業フォルダを、VS Code のメニューから開いておきましょう。
    ・メニュー → フォルダーを開く → D:\test\cpp



    C++_デバッグの為の設定

    • ビルドタスクの設定(tasks.json)
    修正したソースコードをビルドするための設定を行います。
    ほぼC言語の時と同じで、コマンド行が下記のように異なるだけなので
        C言語・・・ "gcc -g -O0 -o a.exe test.c"
        C++   ・・・ "g++ -g -O0 -o a.exe test.cpp"

    C言語の時の tasks.json があるならファイルコピペして
    コマンド行だけ編集してもOKです。

     ・フォルダーを開いている状態で Ctrl+Shift+B
     ・「実行するビルドタスクがありません。ビルドタスクを構成する」というメッセージが出るのでクリック
     ・「テンプレートからtask.jsonを作成する」というメッセージが出るのでクリック
     ・表示された候補の中から「Others 任意の外部コマンドを実行する例」を選択
      → 作業フォルダ内に「.vscode/tasks.json」ファイルが自動生成され、画面に表示される




     ・表示された task.json の
    "command": "echo Hello"
    
      を削除して、下記を挿入
    "command": "g++ -g -O0 -o a.exe test.cpp",
    "problemMatcher": "$tsc", 
    "group": {
        "kind": "build",
        "isDefault": true
    }
    
     ・Ctrl+S で保存しておく


    • デバッグ環境の設定(launch.json)
     デバッグに必要な設定を行います。こちらはC言語の時と完全に同じなので、
    C言語の時の launch.json があるならファイルコピペでもOKです。

     ・画面左のデバッグアイコンを押下
     ・デバッグの開始アイコン(再生マーク)を押下
     ・表示された候補の中から「C++(GDB/LLDB)」を選択
      → 作業フォルダ内に「.vscode/launch.json」ファイルが自動生成され、画面に表示される




     ・表示された launch.json の
    "program": "enter program name, for example ${workspaceFolder}/a.exe",
    "miDebuggerPath": "/path/to/gdb",
    
      を削除して、下記を挿入
    "program": "${workspaceRoot}/a.exe",
    "miDebuggerPath": "c:\\mingw\\bin\\gdb.exe",
    
     ・Ctrl+S で保存しておく



    C++_デバッグ開始!


     ・試したいコードをmain関数に記載し、リビルドは Ctrl+Shift+B
     ・ブレークポイントをセットしてF5でデバッグ開始、F10でステップ実行



    Python_デバッグ環境作成の流れ


      お次は Python です。
        →  ここも同じ手順ですので、実施済みの場合とばしてください。



        Python3のインストール


        パソコンにまだPythonを入れていない場合、
        下記サイトに従ってインストールしておきます。








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


        C言語の時と同じく、Python開発用の拡張機能もインストールしておきます。
         ・画面左の 拡張機能(Extensions)ボタン を押して「python」で検索 → インストール → VS Codeを再起動






        Python_作業場所、test.pyの準備


        C言語の時と同じく、適当にHelloWorldソースを用意します。

        a = "Hello World!"
        print(a)
        

        これを作業フォルダに保存しておきます。ここでは D:\test\python\test.py としました。

        またこの作業フォルダを、VS Code のメニューから開いておきましょう。
        ・メニュー → フォルダーを開く → D:\test\python



        Python_デバッグ開始!




         ・ブレークポイントをセットしてF5でデバッグ開始、F10でステップ実行


        Pythonはインタープリタ言語なのでビルドとか必要ありません。お手軽。
        ただこのとき、こんなエラーメッセージが出る事があります。



         これはPythonのLinter(構文チェッカ)が入ってないよ、というエラーのようなので
         インストールしておきましょう。



        2018年10月26日金曜日

        Visual Studio Code でC言語をステップ実行


        こんにちは、ふじかーです。

        C言語をテキストエディタで書いているような 組み込み開発現場 では

        (´-`)。oO( このロジックが意図通り動作するか、ちょいと手元で確認したい。。 )

        みたいな時、少し困ります。

        テキストエディタではそんな事できないし
        VisualStudioの無償版は昔に比べて準備も大変だし、使うのも重いし不便。
        業務のクロスコンパイル環境を立ち上げるのは、もっと大袈裟で面倒くさい。

        ということで「軽量なツールで、C言語をお手軽にステップ実行できる環境」 を作成します。

        以前、もりもり君が「なかなか使いやすいっスよ」とお勧めしてくれた
        Visual Studio Code(以下、VS Code)を使います。

        <手順>



        コンパイラ(gcc)をインストール

        • ダウンロード・インストール
        下記のサイトにアクセスし、一式おとしてインストールします。
        http://www.mingw.org/download/installer
         → mingw-get-setup.exe のダウンロードが始まる
         → 実行して Install → Continue で進める
         → 「MinGW Installation Manager」が起動

        • gcc設定
        C言語作業に必要なパッケージをインストールします。
         ・「mingw32-base」   を右クリックして「Mark for Installation」を選択し、チェックを入れる
         ・「mingw32-gcc-g++」を右クリックして「Mark for Installation」を選択し、チェックを入れる
         ・[Installation]→[Apply Changes]]→[Apply]→ セットアップが終われば [Close]


        • パスを通す
        システムのプロパティから、環境変数のPathにgccのパスを追加します。
        手順が分からない場合、下記参照。
         ・Windowsキー+R → [ファイル名を指定して実行] 画面が開く
         ・「sysdm.cpl」 と入力してEnter → [システムのプロパティ]画面が開く
         ・[詳細設定]タブ → 環境変数(N) → システム環境変数(S) エリアの 「Path」 を選択 → 編集(I)... をクリック
         ・[システム変数の編集] ダイアログの [変数値(V)] の末尾に 「;C:\MinGW\bin」 を追記して [OK]



        VS Code 本体をインストール

        • ダウンロード・インストール
        下記のサイトにアクセスして、本体をダウンロード・インストールする。
         https://code.visualstudio.com/Download


         → 64bit環境なら、[User Installer 64 bit] をクリック
         → VSCodeUserSetup-x64-X.XX.X.exe のダウンロードが始まる
           (記載時点ではVSCodeUserSetup-x64-1.28.2.exe)
         → 同意して、次へ次へ~でインストール完了。



        • 日本語化 
        VS Code はバージョン1.25以降「デフォルト英語版のみ」になったため、
        日本語化する必要があります。
         ・画面左の 拡張機能(Extensions)ボタン を押して「Japanese Language Pack」で検索 → Install → VS Codeを再起動



        • C/C++
        C/C++開発用の拡張機能もインストールしておきます。
         ・こちらも拡張機能から「C/C++」で検索 → Install → VS Codeを再起動




        作業場所、test.cの準備

        • test.c ファイル準備
        VS Code からでも お手持ちのエディタでも良いですが、適当にHelloWorldソースを用意します。
        #include <stdio.h>
        
        int main(int argc, char *args[])
        {
            printf("Hello, world!\n");
            return 0;
        }
        
        これを作業フォルダに保存しておきます。ここでは D:\test\c\test.c としました。

        またこの作業フォルダを、VS Code のメニューから開いておきましょう。
        ・メニュー → フォルダーを開く → D:\test\c



        デバッグの為の設定

        • ビルドタスクの設定(tasks.json)
         修正したソースコードをビルドするための設定を行います。
         ・フォルダーを開いている状態で Ctrl+Shift+B
         ・「実行するビルドタスクがありません。ビルドタスクを構成する」というメッセージが出るのでクリック
         ・「テンプレートからtask.jsonを作成する」というメッセージが出るのでクリック
         ・表示された候補の中から「Others 任意の外部コマンドを実行する例」を選択
          → 作業フォルダ内に「.vscode/tasks.json」ファイルが自動生成され、画面に表示される


         ・表示された task.json の
        "command": "echo Hello"
        
          を削除して、下記を挿入
        "command": "gcc -g -O0 -o a.exe test.c",
        "problemMatcher": "$tsc", 
        "group": {
            "kind": "build",
            "isDefault": true
        }
        
         ・Ctrl+S で保存しておく


        • デバッグ環境の設定(launch.json)
         デバッグに必要な設定を行います。
         ・画面左のデバッグアイコンを押下
         ・デバッグの開始アイコン(再生マーク)を押下
         ・表示された候補の中から「C++(GDB/LLDB)」を選択
          → 作業フォルダ内に「.vscode/launch.json」ファイルが自動生成され、画面に表示される


         ・表示された launch.json の
        "program": "enter program name, for example ${workspaceFolder}/a.exe",
        "miDebuggerPath": "/path/to/gdb",
        
          を削除して、下記を挿入
        "program": "${workspaceRoot}/a.exe",
        "miDebuggerPath": "c:\\mingw\\bin\\gdb.exe",
        
         ・Ctrl+S で保存しておく



        デバッグ開始!


         ・試したいコードをmain関数に記載し、リビルドは Ctrl+Shift+B
         ・ブレークポイントをセットしてF5でデバッグ開始、F10でステップ実行


        [デバッグの為の設定] を見ての通り、
         gcc を使って test.c を a.exe にビルドして、gdb を使ってデバッグする
        というだけのシンプルな構成です。

        既存のプロジェクト全体をデバッグするものでは無いけど、軽量だしIntelliSenceも使えるし、
        ちょっと机上じゃ面倒な確認をしたい時とか、関数の単体試験などにも使えて便利。

        とりあえず現場でも使ってるC環境の手順が整ったので
        今度は別の言語も使えるように整備していこう。

        2019/1/12追記:Visual Studio Code で C++ と Python をデバッグする



        ※VS Codeは結構な頻度でバージョンアップを繰り返しており
         記事の内容(ver.1.28.2)と 最新のVS Codeとでは、手順や表示が若干異なるかも知れません。

        ※ちなみに「用意したcソースの日本語が文字化けするよー」という時は
         画面下の文字コード選択からポチポチと選べば直せます。
         

        2017年10月20日金曜日

        vscode #01 : 便利機能

        どうも、もりもりです。

        最近 VS Code が便利すぎてよく使ってます。

        7月末には64bit版もリリースされました。
        またファイルサイズの制限が50MBから無制限となったので
        デカいログファイルも読み込めるようになりました。

        アップデート情報は下記で確認できます。
        https://code.visualstudio.com/updates/v1_16

        あとは印刷できるようになればよいのですが。。。

        よく使うショートカット


        キー 動作
        Ctrl + , ユーザー設定を開く
        Ctrl + F ファイル内検索
        Ctrl + H ファイル内置換
        Ctrl + Shift + F フォルダを指定して検索
        Ctrl + K, M 言語の選択
        ※IMEが半角モードになっていること
        Ctrl + Shift + P コマンドパレットを表示
        Ctrl + R 履歴からファイルを開く
        Ctrl + Space サジェストを表示
        Shift + Alt + 選択 矩形選択

        SQL関連
        キー 動作
        Ctrl + Shift + C DB接続先の表示
        ※表示中ファイルの言語モードが「sql」の場合く
        Ctrl + Shift + E SQL実行

        よく使う拡張機能


        mssql
          ・SQL Serverに接続できる

        Excel Viewer
          ・CSVを表形式で表示できる
          ・並び替え可能
          ・フィルタリング可能

        EvilInspector
          ・全角スペースを強調してくれる

        mssql


        <DBの接続設定を保存する>

        1.「Ctrl + N」で新規ファイル作成
        2.「Ctrl + K, M」で「sql」と入力し「SQL」を選択
        3.「Ctrl + Shift + C」で「Create Connection Profile」を選択
        4.指示通りにサーバ名、DB名、認証方式、ユーザ名、パスワード等を順に入力してEnter


        <接続設定保存済みのDBにアクセスする>

        1.「Ctrl + N」で新規ファイル作成
        2.「Ctrl + K, M」で「sql」と入力し「SQL」を選択
        3.「Ctrl + Shift + C」で保存済みの接続設定を選択


        <テーブルからデータを取得>

        1.上記の各手順1で作成したファイルにSELECT文を記述
        2.「Ctrl + Shift + E」でSQLを実行


        Excel Viewer


        1.CSVをVS Codeで開く
        2.「Ctrl + Shift + P」でコマンドパレットを開く
        3.「csv」と入力
        4.「CSV: Open Preview」を選択


        設定(settings.json)


        VS Codeの設定の一部ですが、こんな感じで使ってます。

        { "editor.minimap.enabled": true, "editor.fontSize": 12, "editor.renderWhitespace": "boundary", "files.defaultLanguage": "csharp", "files.associations": { "*.txt": "csharp", "*.log": "csharp" }, "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe", "mssql.connections": [ { "server": "xxxx", "database": "xxxx", "authenticationType": "SqlLogin", "user": "xxxx", "password": "", "emptyPasswordInput": false, "savePassword": true }, { "server": "xxxx", "database": "xxxx", "authenticationType": "SqlLogin", "user": "xxxx", "password": "", "emptyPasswordInput": false, "savePassword": true } ] }


        便利な拡張機能などがあれば随時アップしていきます。

        それではまた。