フロントエンド開発者の生産性を向上させてくれるVS Code機能拡張まとめ

{
  "restartable": "rs",
    "env": {
    "NODE_ENV": "development"
  },
  "watch": ["src/**/*"],
  "ext": "ts,json,js",
  "exec": "ts-node ./src/index.ts"
}

実行すると、次のようなファイルが作成されます。

interface RootObject {
  restartable: string;
  env: Env;
  watch: string[];
  ext: string;
  exec: string;
}

interface Env {
  NODE_ENV: string;
}

JSON to TS - Visual Studio Marketplace

Auto Close Tag

HTMLとXMLについて、閉じタグを自動で追加してくれます。

Auto Close Tag - Visual Studio Marketplace

Bracket Pair Colorizer

f:id:moongift:20210916220123p:plain

これは対応する括弧をカラーリングしてくれる拡張機能で、黄色やピンクなど目立つ色にしてくれるのでコードが見やすくなるのですが、 VSCode 1.60からは本体の機能として提供されるようになりました。

"editor.bracketPairColorization.enabled": true とすることで有効になります。

Visual Studio Code August 2021

Duplicate action

ファイルやフォルダを同じフォルダ内で複製します。一つファイルを作って、それをパターンで作成したりする際に便利です。

Duplicate action - Visual Studio Marketplace

JS & CSS Minifier (Minify)

JavaScriptファイルとCSSファイルを保存時にミニファイします。

JS & CSS Minifier (Minify) - Visual Studio Marketplace

Bookmarks

f:id:moongift:20210916220137p:plain

ファイルの任意の場所にブックマークを付けられます。エクスプローラービューでブックマークした箇所の一覧を表示でき、そこからファイルの該当場所にジャンプできます。

Bookmarks - Visual Studio Marketplace

Docker

f:id:moongift:20210916220148p:plain

Visual Studio Code内でDockerコンテナの起動や停止などの操作が行える機能拡張です。

Docker - Visual Studio Marketplace

Git History

f:id:moongift:20210916220158p:plain

Gitリポジトリのログを閲覧、検索できる機能拡張です。

Git History - Visual Studio Marketplace

HTML Snippets

HTMLタグの入力を短縮できるスニペットが多数登録されています。例えば doc と入れれば <!DOCTYPE html> に展開されます。

HTML Snippets - Visual Studio Marketplace

HTMLHint

HTMLの入力チェックを行ってくれます。あらかじめ htmlhint をnpmでインストールする必要があります。

HTMLHint - Visual Studio Marketplace

Code Runner

JavaScript（に限りませんが）を実行し、その結果を表示してくれる機能拡張です。ファイル全体、または選択したコードだけの実行が可能です。

Code Runner - Visual Studio Marketplace

ESLint

JavaScriptをチェックしてくれる機能拡張です。あらかじめnpmでeslintをインストールしておく必要があります。

ESLint - Visual Studio Marketplace

Prettier - Code formatter

コードの整形を行ってくれる機能拡張です。対応している言語、フレームワークは以下の通りです。

JavaScript
TypeScript
Flow
JSX
JSON
CSS
SCSS
Less
HTML
Vue
Angular
GraphQL
Markdown
YAML

Prettier - Code formatter - Visual Studio Marketplace

Visual Studio IntelliCode

AIベースの入力補完を行ってくれる機能拡張です。GitHub Copilotのように自然文からコードを生成してくれる訳ではないので注意してください。入力した内容から、的確にコードを補完してくれます。

Visual Studio IntelliCode - Visual Studio Marketplace

GitHub Copilot

f:id:moongift:20210916220226j:plain

GitHub Copilotは現在テクニカルプレビューで、自然文からコードを生成してくれます。JavaScriptやTypeScriptはもちろんサポート対象言語です。

GitHub Copilot - Visual Studio Marketplace

まとめ

VS Codeがスクリプト系言語での利用にフォーカスしているためか、フロントエンド開発に最適な機能拡張が多数あります。自分の開発スタイルにあった機能拡張をぜひ選んでください。あまりインストールすると動作が重たくなる可能性もありますので、その点は慎重にお願いします。

FRONT-END.AIではフロントエンド開発者を大募集中です。VS Codeの使い勝手にこだわる方は、ぜひ私たちと一緒に働きましょう！

FRONT-END.AI Blog

FRONT-END.AIやAI/機械学習に関する最新情報を発信しています