VsCode拡張!Draw.io Integrationのフローチャート他おすすめ!

2020年3月9日

VsCode拡張覚書です。

エックスサーバーのお友達紹介プログラム!

Contents

1 VsCode拡張!Draw.io Integrationのフローチャート
2 VSCodeのおすすめ拡張機能（言語問わず）
- 2.1 indent-rainbow、Bracket Pair Colorizer2(非推奨)
- 2.2 vscode-textlint
3 VSCodeのおすすめ拡張機能（HTML、CSS）
4 VSCodeのおすすめ拡張機能（Github）
- 4.1 Git History

VsCode拡張!Draw.io Integrationのフローチャート

VSCodeのおすすめ拡張機能（言語問わず）

phpやjavascript言語関係なく共通で使えます。

indent-rainbow、Bracket Pair Colorizer2(非推奨)

indent-rainbow　インデントをカラーでわかりやすくする
Bracket Pair Colorizer2 括弧の対応をカラーでわかりやすくする

Bracket Pair ColorizerとBracket Pair Colorizer2の違いは公式サイトによると以下のとおり。

Differences between v1 and v2?
v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

ベースが同じで速度があがっています。β版だが、今のところ困ったことがないためBracket Pair Colorizer2を使っています。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

(追記)非推奨になりました。VsCodeに組み込まれてデフォルト機能で使えるようです。

bracket pair colorizer is no longer being maintained.
VsCodeより

https://t.co/X4Y6ZpMD8P
— 眼力玉壱號 (@objectxplosive) September 2, 2021

Vs Codeはsettingから設定しますが、最新のVs Codeではデフォルトで有効になるようです。

vscode-textlint

textlintです。

https://marketplace.visualstudio.com/items?itemName=taichi.vscode-textlint

textlintの使い方はこちらです。

ebookbrain

動かない!?vscodeでtextlintの使い方 textlintの使い方の覚書です。 vscodeでtextlintの使い方本体のインストール nodeとnpmが必要です。Javascriptの開発環境が入っている人は元から入っているでしょう。確...

VSCodeのおすすめ拡張機能（HTML、CSS）

Encode Decode2

htmlのコードをアンエスケープするために利用しています。

https://marketplace.visualstudio.com/items?itemName=mitchdenny.ecdc

使い方は次のとおりです。

選択 > コマンドパレット > convert selection > String to HTML Entities

戻るときは次のとおりです。

選択 > コマンドパレット > convert selection > HTML Entities to String

stylelint

stylelintはCSSの整形に便利です。

ebookbrain

【v14で動かない!?】VsCodeでstylelintの使い方(設定/自動修正/ルールの例外・無効など) stylelint導入方法、設定、自動修正、ルールの例外・無効、ソート方法などをまとめていきます。 stylelintとは stylelintはcssスタイルのコードが正しいのか検証を行うもの...