[VSCode] 文章を読みやすく！　〜「という」と「こと」に気づいて直せるようにした〜

はじめに

サーバーレス開発部の藤井元貴です。

今朝、日課のインターネット巡回をしていると、次のnoteを見つけました。

• 「という」と「こと」を減らすだけで、文章はぐっと読みやすくなる | note

タイトルから「あっ（心当たりある）」と気になり、実際に読んでみると、なるほど納得でした。

そこで、普段ブログを書いているVSCode（＋Markdown）で、「という」と「こと」を強調表示させ、すぐ気づくようにしました。

環境

項目	バージョン
macOS	High Sierra 10.13.6
VSCode	1.33.0 (1.33.0)

強調表示の設定

拡張機能のインストール

下記を使用します。

• Whitespace+

空白文字を強調表示する拡張機能ですが、下記説明にもあるように、新しいパターンを設定して利用します！

By modifying the configuration, you can add new patterns to be marked, customize the look of the highlights, set the default display mode, and modify the update rate.

設定の追加

VSCodeのコマンドパレットでwhitespaceと入力し、whitespace+ Configを選択します。

選択すると、config.jsonが開くため、次の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)"
        }
    }
}

色の設定はお好みでどうぞ。全体の設定は、本記事の最後に載せておきます。

設定おわり！

こうなります！

強調表示されないとき

VSCodeのコマンドパレットでwhitespaceと入力し、whitespace+ Toggleを選択して、設定のON/OFFを切り替えてください。

さいごに

論文や報告書ではなくブログなので、すべての文章で「という」や「こと」を無くす必要はないと思っています。

絶対に「という」や「こと」を無くす！！、とは考えず、分かりやすい文章、リズムよく読める文章、気持ちよく読める文章を心がけていきたいです。

参考

• 「という」と「こと」を減らすだけで、文章はぐっと読みやすくなる | note
• 【VSCode】Macで文章作成中に制御文字（0x08）が勝手に混ざるので、とりあえず対策した | Developers.IO

全体の設定

次の内容も含んでいます。

• 【VSCode】Macで文章作成中に制御文字（0x08）が勝手に混ざるので、とりあえず対策した | Developers.IO

{
    "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)"
            }
        }
    }]
}