# Visual Studio Code で始める快適ブログ執筆生活

## Markdownの入力環境を作りたい

もはやブログ等の入力フォーマットの標準になりつつMarkdown。
そのMarkdownの執筆環境を整えます。

## Visual Stdudio Code とは

主に開発用に使用する高機能テキストエディタです。
開発者の方にはもうお馴染みのツールですね。

### なぜ開発用のツールを使うの？

#### 無料である

無料で使える。これは大きい。

#### 開発もできる

フロントエンドエンジニアなら知ってて当然とも言えるツール。
これさえあればなんとかなるのはとても大きい。

#### WinでもMacでも使える。Linuxでも使える

仕事はWindows、個人はMacみたいな場合でもOK。
同じ設定にすればほぼ同じ環境になる。

#### 日本語が使える

割と日本語が使えるツールが少ない。
特にMac用のソフトはどうも日本語をONにするとクラッシュしたりと使い勝手が多いものが多かった。

## 早速使ってみる

### Visual Studio codeをインストール

下記からダウンロードしましょう。

https://code.visualstudio.com/

Macの場合にはbrew tapでもインストールできます。

```shell
$ brew tap install visual-studio-code
```

### 起動する

起動すると、自動で日本語などのインストールするか聞かれますので、
従ってインストールを進めましょう。

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

#### Macの場合のみ

MacでVisual Studio Codeを使っていると、たまーに変な文字が入ることがあるので対応。

探したら対策があったので参考にインストールを進めます。
https://dev.classmethod.jp/etc/vscode-mac-control-character-0x08/

**Remove backspace control character のインストール**

下のリンクをひらけばインストールできます。
https://marketplace.visualstudio.com/items?itemName=satokaz.vscode-bs-ctrlchar-remover

### Whitespace+をインストール

同様に、下記のリンクから拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=davidhouchin.whitespace-plus

### 設定

インストール後、「cmd + Shift + p(Mac)」 or 「Ctrl + Shift + p(Windows)」を押すと、
コマンドパレットが開きますので、下記のように入力すると設定画面が開きます。

```
Whitespace+ config
```

<img width="615" alt="スクリーンショット 2019-04-14 20.50.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97156/829f321d-4759-b318-fbee-f81ff899e315.png">

各自設定を変更していきます。

**autostart : "true"**
→自動起動をON

**name:"space"/"tab"/"newline"の下のenableを"false"に**
→空白、タブ、改行の強調表示をOFFに。

**Macで発生する特殊文字を強調表示**

Macのみ、下記のjsonを追加

```json
{
        "name": "control",
        "enabled": true,
        "pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]+",
        "style": {
            "borderWidth": "5px",
            "borderRadius": "0px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 0, 0, 0.9)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }
```

**ちょっとした校正機能を入れてみる**

[「という」と「こと」を減らすだけで、文章はぐっと読みやすくなる]
(https://dev.classmethod.jp/etc/vscode-notice-toiu-and-koto/)ということなので、設定してみる

```json
{
    "name": "blog",
    "enabled": true,
    "pattern": "(という|こと)",
    "style": {
        "borderWidth": "2px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
            "backgroundColor": "rgba(255, 140, 0, 0.9)",
            "borderColor": "rgba(255, 165, 0, 0.3)"
        },
        "dark": {
            "backgroundColor": "rgba(255, 140, 0, 0.9)",
            "borderColor": "rgba(255, 165, 0, 0.3)"
        }
    }
}
```

### 完成形

バージョンによって変わる可能性があるので注意してください。

```json:config.json
{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",
        "enabled": false,
        "pattern": "\\s",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "tab",
        "enabled": false,
        "pattern": "\\t",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(170, 53, 53, 0.3)",
                "borderColor": "rgba(170, 53, 53, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(223, 97, 97, 0.3)",
                "borderColor": "rgba(223, 97, 97, 0.4)"
            }
        }
    },{
        "name": "newline",
        "enabled": false,
        "pattern": "\\n",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "borderColor": "rgba(38, 150, 38, 0.3)"
            },
            "dark": {
                "borderColor": "rgba(85, 215, 85, 0.4)"
            }
        }
    },{
        "name": "trailing",
        "enabled": "unlessCursorAtEndOfPattern",
        "pattern": "[^\\S\\r\\n]+$",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }, {
        "name": "control",
        "enabled": true,
        "pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]+",
        "style": {
            "borderWidth": "5px",
            "borderRadius": "0px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 0, 0, 0.9)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    }, {
        "name": "blog",
        "enabled": true,
        "pattern": "(という|こと)",
        "style": {
            "borderWidth": "2px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(255, 140, 0, 0.9)",
                "borderColor": "rgba(255, 165, 0, 0.3)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 140, 0, 0.9)",
                "borderColor": "rgba(255, 165, 0, 0.3)"
            }
        }
    }]
}
```

これで完成。
config.jsonを弄るともっと色々とできますので、自分だけの執筆環境を整えてみてください。


### 日本語用の校正ツールをインストール

日本語の校正をしてくれるらしい拡張機能も一緒にインストール。
https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading