【VSCode】Markdownエディタとしてカスタマイズ

目次

Markdown と Visual Studio Code

自分はちょっとしたメモ書きや資料作成にMarkdown記法を利用している。簡単にかけてビジュアルも整うからだ。このとき、Markdownエディタとしてプレビュー機能がついていてかつ軽量なVisual Studio Codeを使用している。

導入している拡張機能

1. Markdonw-PDF
2. Markdown Preview Enhanved
3. Markdown TOC

1と2では実は機能が重複していたりするが普段は1を使っている。理由は後述。

Markdown-PDF

Markdownで書いたものをPDFやHTML、JPEGファイルなどに変換できるというもの。これのいいところは、設定に寄って保存する度にHTMLファイルなども保存変換しなおしてくれるところ。いちいち自分で変換の手を踏まなくて良いのは良い。更に複数形式同時変換もできる。設定は次のような感じ。

"markdonw-pdf.type": [ "html" ],
"markdown-pdf.convertOnSave": true

これで元のMarkdownを保存する度に変換してくれるようになった。自分のつくる資料はだいたいこれでHTMLに変換している。適用されるCSSは拡張機能のフォルダ内にある「markdown.css」を書き換えることで変えられる。これも気に入っているところ。

Markdown Preview Enhanced

普段はほとんど上のMarkdown-PDFとデフォルトの機能で足りているのだが、数式などTeX記法を使いたいときは、デフォルトのままでは反映されず、Markdown-PDFも正しく変換を行ってくれない。しかし、このMarkdown Preview Enhancedなら数式もきれいに表示することができる。また、プレビューウィンドウで右クリックすることでHTMLやPDFの各形式への変換にも対応。ただTeXの記法を使うときはオンライン上または拡張機能内のファイル（つまり全くの別ディレクトリ）にアクセスしないといけないHTMLを生成してしまうので、自分以外にデータを渡すには少々不便なところがあり基本的にはPDFに変換することになる。またCSSもGithubのものなどいくつかある中から選ぶことになるのでカスタマイズしにくい（GitHubのCSS嫌いじゃないけどね）。

Markdown TOC

目次を生成してくれる拡張機能。自分の各記事は大抵長くなりがちなので目次が必須レベル。これを使うと一括で目次を設定してくれるので助かる。

まとめ

VSCodeでMarkdownを記述するにあたり使っている拡張機能を紹介した。メモ書きなどにとても便利なので参考にしてほしい。

【VSCode】VSCodeでC/C++ソースコードを書く

目次

VSCodeでC言語開発をする

軽量で高機能なMicrosoft製のテキストエディタ、VSCodeを使ってC言語のソースコードを記述していくための設定とかを紹介。

環境

1. Windows10 Home 64bit
2. Visual Studio Code 1.25.1
3. gcc(MinGW 6.3.0)

Visual Studio Code のインストール

mattyan1053.hatenablog.com

日本語化まで上記にまとめたので参考にしてほしい。

拡張機能のインストール

今回はC言語を扱うのでC/C++の拡張機能をインストールする。
C/C++で検索すれば一番上に出てくる「C/C++」をインストールでOK。これでコード補完やナビゲーションを行ってくれるようになった。

ヘッダーの設定

標準ライブラリ以外からインクルードすると、コード補完などが仕事をしなくなってしまう。そこで、ライブラリの場所を別途記述しておく必要がある。
[Ctrl]+[Shift]+[P]でコマンドを開き、「C/C++: Edit Configurations」をクリックすると、作業しているディレクトリに「.vscode」フォルダが作成され、その中に「c_cpp_properties.json」が作成される。このファイルを編集する。インクルードするものを増やしたい場合は"includePath"の項目を編集して、

"includePath" : [
    "${workspaceFolder}/**,
    "追加のインクルードライブラリの場所"
]

という記述を追加してあげると良い。

コンパイル

練習用に新しくディレクトリを作り、次のファイルを作成した。

#include <stdio.h>
int main(){
    int a;
    printf("Hello World!\n");
    scanf("%d", a);
    return 0;
}

ファイル名を「test.c」として保存した。

手動でコンパイル

VSCodeではターミナルを起動することができ、そこでコンパイルすることができる。
[Ctrl]+[@]を押すとターミナルが起動する。そこでいつもどおり

> gcc -o test test.c

などとやればコンパイルしてあげることができる。そのまま

> test

とやれば実行することも可能だ。

タスクに登録してコンパイル

[Ctrl] + [Shift] + [B]を押すとタスクが起動できる。
まだタスクを作っていないので、「実行するビルドタスクがありません。 ビルドタスクを構成する...」と表示されるはずだ。
これをクリックすると「テンプレートからtasks.jsonを生成」と言われるのでクリック。タスクテンプレートが表示されるので、今回はMinGWのgccを利用するため「Others」を選択する。すると「.vscode」フォルダ内に「tasks.json」が生成される。できたら、"tasks":[]の中身を書き換えていこう。次のように書き換える。

"tasks": [
    {
        "label": "gcc",
        "command": "gcc",
        "args": [
            "${fileBasename}",
            "-o",
            "${fileBasenameNoExtension}"
        ],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
]

"label"はタスクの名前なので実はお好みで良かったりする。それ以下で使用するコマンドとオプションを設定している。もしコンパイルするときに追加でライブラリを設定したりしたい場合は"args":[]の中に更に引数を追加して-"-I<../includePath>"などをつけておくと良いだろう。
これでタスクの設定が完了したので以後タスクを起動して「gcc」タスクを選択するだけでコンパイルを自動でやってくれるようになった。

mingw32-makeを使ってコンパイル

Linuxなどでよく使われている「make」コマンドだが、MinGWをインストールすると同じ機能のアプリケーションで「mingw32-make」というものを使うことができる。ここで「Makefile」を作成し、

test: test.o
    gcc -Wall -o test test.o

test.o: test.c
    gcc -c test.c

保存する。次にタスクからmingw32-makeを起動できるように

"command": "mingw32-make",
"args": [],

としてタスクを実行するとmakeコマンドでコンパイルすることができる。これで複数ファイルを扱いだしても問題なくコンパイルすることができそうだ。

まとめ

これでVSCodeを使ってC言語のコンパイルができるようになった。大きな開発ならIDEとか使ったほうがいろいろ便利だけどちょっとしたコードを走らせたいときは結構便利かもしれない。

【VSCode】VSCodeの日本語化

目次

VSCodeとは？

軽量で高機能なMicrosoft製のテキストエディタ。最初インストールしたときは英語なので日本語化の方法についてメモ。

環境

1. Windows10 Home 64bit
2. Visual Studio Code 1.25.1

Visual Studio Code のインストール

次のリンクからVisual Studio Codeを自分のOSに合わせてインストール。コンパイラのインストールとかに比べて特に難しいことはないので問題なくできると思う。PATHは設定しておいても良いと思う（インストールのオプションにあったかも）。

code.visualstudio.com

PATH設定した場合はcodeで起動できる。

日本語拡張機能のインストール

Visual Studio Code（以下VSCode）のインストールが終わったら起動してみよう。次のような画面になるはずだ（既に日本語なのは許してほしい）。

日本語拡張機能をインストールするので、左端の四角いマーク（Extension）をクリックする。そのあと、検索欄のところで「japanese」と検索しよう。一番上に出てくる「Japanese Language Pack for Visual Studio Code」をクリックしてインストールする。

VSCode内での設定

日本語拡張プラグインがインストールできたら、最後はVSCode本体の設定を行う。
[Ctrl]+[Shift]+[P]を押した後、出てきたところにlanguageと入力してほしい。すると下に、「Configure Display Language」と出てくると思うのでそれをクリッククリック。

最後に、"locale"の後ろの"en"を"ja"に書き換えれて上書き保存すればOK。

"locale": "ja"

あとはVSCode自体を一旦閉じて起動しなおそう。

これでVSCodeの日本語化が完了した。

これで「setting.json」の説明も日本語になっていると思うので思う存分カスタマイズしてほしい。