Help us understand the problem. What is going on with this article?

みんなに聞いてみた!オススメVS Code拡張機能(2019年版)

この記事は ウェブクルー Advent Calendar 2019 14日目の記事です。
昨日は @niku_moto さんの「.localドメイン環境にMacOSをぶち込もうとした戦い」でした。

はじめに

ずっとAdobe Dreamweaverを使っていたのですが、最近思い切って切り替えました。
その際に弊社のフロントエンドメンバーに聞いた、オススメ拡張機能を一挙ご紹介!
もし使えそうなものがあれば、ぜひ導入してみてください。

バージョン

Visual Studio Codeバージョン:1.40.2を使用

おすすめ拡張機能一覧

Japanese Language Pack for Visual Studio Code

日本語化するパッケージ。とりあえず必須で入れるやつ。

Auto Close Tag

開始タグを入力しEnterを押すだけで、自動的に閉じタグを入力してくれる。

Auto Rename Tag

開始タグを修正すると、自動的に閉じタグも修正してくれる。もちろん逆でもOK!

htmltagwrap

テキスト等を選択し、Alt+wを押すとpタグで囲ってくれる。
ここpタグで括りたいな~、というとき便利!(設定で別のタグにすることも可)

HTML Snippets

HTML5に対応しているスニペット。Emmetのようなもの。

IntelliSense for CSS class names in HTML

自分で定義したclass名の入力候補が出てくる。

Path Autocomplete

プロジェクト内のパスを予測変換で出してくれる。

Insert br Tag

Shift+Enterでbrタグ挿入できる。

imgタグのサイズを自動入力

ファイル → 基本設定 → キーボードショートカット → キーボードショートカットを開く(右上アイコン)
JSONファイルが開かれるので、[]の中に貼り付ける。

{
    "key": "ctrl+i",
    "command": "editor.emmet.action.updateImageSize",
    "when": "editorTextFocus"
}

↓参考にさせていただきました!
https://qiita.com/maco1028/items/5f8dde07d9a62ec47142

Guides

インデントが分かりやすいように、開始タグと閉じタグを縦線で結んでくれる。

Code Spell Checker

ソースコード上でスペルチェックをし、間違ってるところは波線が引かれる。
class名などで2単語以上繋げる場合、キャメルケースにすると消える。
社名などは単語登録も可。

Bracket Pair Colorizer

括弧に色をつけてくれるので、見易くなる。

Trailing Spaces

末尾などに入ってしまっているムダなスペースを赤く表示してくれる。

zenkaku

全角スペースをグレーで表示してくれる。(※インストール後、機能を有効にする必要あり)

その他

Polacode

ソースコードのキャプチャを撮る機能。

filesize

開いているファイルのサイズを表示してくれる。(画面下のステータスバーに)

Auto-Open Markdown Preview

Markdownファイルを開くとプレビューが表示される。

テキスト校正くん

テキストファイルやMarkdownファイルの日本語の文章をチェックしてくれる。

おまけ

Kitty Time =(^● ⋏ ●^)= ෆ

ネコで癒されたい人はぜひ:cat:

最後に

たまにチームにこういった話題を投げかけてみると、いい拡張機能との出会いがあるかもしれませんね!

明日の記事は@Hideto-Kiyoshima-wcさんです。
よろしくお願いします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした