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

Visual Studio Code のおすすめ拡張機能と設定値(2018/3 版 随時更新)

More than 1 year has passed since last update.

前書き

 Atom でも Kobito でもなく、Visual Studio Code を使っています。比較的軽量なのと、Visual Studio (2005) で開発をしていたこともあり UI がなじみます。あと Markdown で書けるので好きです。
image

 ここには設定値と、インストールしているおすすめな拡張機能を書いておきます。

ユーザ設定

 Windows のデフォルトではここ。json 形式です。

C:\Users\USERNAME\AppData\Roaming\Code\User\settings.json

 すべての設定値、および設定値変更、およびすべての設定値はこちらで確認できます。

  • ファイル
    • 基本設定
      • ユーザ設定

 こんな設定をいれています。

settings.json
// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
        // 認証プロキシ設定
        "http.proxy": "http://USERNAME:PASSWORD@PROXYSERVER:8080",
        // シンタックスハイライトの判定を追加
        "files.associations": 
        {
            "*.txt": "markdown",
            "*.json.txt": "json"
        },
        // 空白文字列の表示
        "editor.renderWhitespace": true,
        // ウィンドウサイズで折り返し
        "editor.wordWrap": true,
        // Bash on Ubuntu on Windows on Visual Studio Code (Windows 10 only)
        "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
        "termnial.integrated.shell.unixlike": "bash.exe",
        // 文字コードの自動認識
        "files.autoGuessEncoding": true, 
        ...

Bash on Ubuntu on Windows on Visual Studio Code (Windows 10 only)

 Windows 10 限定になりますが、上記の settings.json では cmd.exe を bash.exe に差し替える設定をいれています。Ctrl + @ で開くコンソールで bash を実行することができます。

image

拡張機能

vscode-icons

image
 エクスプローラメニューはもともとシンプルなツリー表示しかできないのですが、それにカラーアイコンを付ける拡張です。Atom にも同様のがありましたね。

追記

 コメント欄でおしえて頂きました、File Icon Theme 機能でアイコン変更の機能は既に実装されていました。上記拡張の人気がすごいので標準機能に入れたそうな。デフォルトでは「Minimal」「Seti」の2パターン設定可能でした。

image image
 Marketpace から、テーマの追加も可能でした。ユーザ設定ファイル(settings.json)で指定することはいまのところできないようです。

Insert Date String

image
 Ctrl + Shift + I で 日付「2016-09-29 13:10:07」とかを入れる(だけ)の機能です。一番使うかもしれません。

encdetect jp

image
 日本語の文字コードを自動判定して警告を出してくれるものです。SJIS がよく化けるんですがデフォルト文字コードをSJISにするのも嫌ですよね。

REST Client

image
 REST API の呼び出しがサクっとできます。開発に使います。

Local History

image
 保存ファイルを世代管理するもの。適当にバックアップしてくれます。

Prettify JSON - Visual Studio Marketplace

image.png
JSON を整形してくれます。

Python - Visual Studio Marketplace

image.png

Python デバッグのお供に。

PowerShell - Visual Studio Marketplace

image.png
PowerShellデバッグのお供に。

Prettier - Code formatter - Visual Studio Marketplace

image.png

zenkaku - Visual Studio Marketplace

image.png
全角スペースを強調表示してくれる、地味に便利。

Power Mode - Visual Studio Marketplace

image.png
カタカタッターンしたくなるやつ。

Visual Studio Code Settings Sync

image
 Visual Studio Code の設定を GIST 経由で同期するもの。Atomでも同様のものがありますね。

わけあって使えなかった拡張機能

Vim - Visual Studio Marketplace

image
 Vimmer じゃないので紹介だけ。

参考文献

image
はじめてのVisual Studio Code (I・O BOOKS) : 清水 美樹 : 本 : Amazon.co.jp

 日本語書籍がありましたが、初心者向けの本でした。ほかのエディタを使いこなしていたことがある方には向かないので、以下を見てショートカットキーとカスタマイズ方法を覚えたほうがよいです。

参考リンク

 設定変更方法(settings.json)、ショートカットキーいくつか、コマンドパレットの開き方(Ctrl+Shift+P)、コマンドプロンプト(Ctrl+@)、拡張機能インストール方法、だけ覚えればなんとかなります。

(以上)

Why do not you register as a user and use Qiita more conveniently?
  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
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