7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【VS Code】全角、末尾のスペース、TODO、校正など拡張機能Highlightが便利

Last updated at Posted at 2020-04-08

VS Codeの拡張機能「Highlight」をご存じでしょうか。
正規表現を利用して文字列を装飾する拡張機能なんですが、その自由度の高さから私にとっては手放すことのできない拡張機能となっています。

◆できること

  • この拡張機能ひとつで、

    • 全角スペースの表示
    • 行末のスペースの表示
    • 文字間の2つ以上のスペースの表示
    • URLなど特定の文字列の装飾
    • 全角記号の装飾
    • 文書の曖昧な表現への装飾
    • TODOなどの指定した単語を含むコメント行への装飾
    • などなど
  • 正規表現で表すことができれば、およそのことはできます。

◆できないこと

  • リアルタイムに装飾されないことがあります。

◆設定例

設定はSettings.jsonを直接、変更します。わたしの設定例をご紹介いたします。
作者さんの拡張機能Highlightの紹介ページに、todoコメント行の設定例なども載っています。

※便利な設定をご存じの方、コメントで共有して頂けるとうれしいです。😊
 ご返信はできないかと思います。申し訳ありません。

settings.json
   "( )": [ // 全角スペース
    {
      "backgroundColor": "#FFC0F0",
      "borderColor": "#FF0086",
      "borderWidth": "1px",
      "borderStyle": "solid",
    }
  ],
  "( {1,})[\\r?\\n]": [ // 行末のスペース
    {
      "backgroundColor": "#FFC0F0",
      "borderColor": "#FF0086",
      "borderWidth": "1px",
      "borderStyle": "solid",
    }
  ],
  "(?<=\\S)( {2,})(?=\\S)": [ // 文字間の2個以上のスペース
    {
      "borderColor": "#FF0086",
      "borderWidth": "1px",
      "borderStyle": "none none dashed none",
    }
  ],
  "(https?|ftp)(:\/\/[-_.!~*\\'()a-zA-Z0-9;\/?:\\@&=+\\$,%#]+)": [ // URL
    {
      "color": "#FF7F00"
    },
    {
      "color": "#FF7F00"
    }
  ],
  "([!”#$%&’()=~|‘{+*}[]<>?_-^¥@「;:」・])": [ // 全角記号
    {
      "borderColor": "#FF0086",
      "borderWidth": "1px",
      "borderStyle": "solid",
    }
  ],
  "(といった|という|こと|など|実際|なんて|のような|かもしれ|たったの|もある)": [ // あいまいな表現
    /* あいまいな表現の例
    だいぶ|すごく|たくさん|非常に|とても|もっと|かなり|たいそう|はなはだ|めっきり|極めて|ことのほか|いたく|こよなく|ずいぶん|大変|よほど|めっぽう|いやに|相当に|はるかに|大層|すぐに|ときどき|たまに|たまたま|しばらく|まあまあ|そこそこ|素晴らしい|素敵な|美しい|おいしい|かっこいい|つまらない|おもしろい|おかしい|優しい|偉い|危ない|新しい|古い|明るい|暗い|暑い|寒い|大きい|小さい|高い|安い|低い|長い|短い|早い|遅い|広い|狭い
    */
    {
      "backgroundColor": "rgba(255, 150, 200, 0.2)",
      "borderColor": "#FF0086",
      "borderWidth": "1px",
      "borderStyle": "none none dashed none",
    }
  ],
},
"highlight.maxMatches": 250,

◆VS Codeのテーマを作成しております

せっかくなので宣伝をいたします。
Visual Studio Code用のライトテーマ、kindfeeling-lightを作成させて頂いております。
完全にわたしの好みで作っているので好き嫌いはあると思います。
お時間頂けましたら、ぜひぜひお立ち寄りくださいませ。

7
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?