もた日記

くだらないことを真面目にやる

Visual Studio Codeメモ : Tips and Tricksを確認する(1)

※Windows 10、Visual Studio CodeのVersion1.38で確認

code.visualstudio.com

Basics

Basicsは基本的な操作の説明。

  • 「Help」→「Interactive playground」で代表的な機能を試すことができる
  • Ctrl+Shift+P : コマンドパレットを表示
  • コマンドパレットには右側にキーボードショートカットも表示される
  • Ctrl+K Ctrl+R : キーボードショートカットリファレンスを表示
  • Ctrl+P : クイックオープン(さらに?でヘルプ表示)
  • クイックオープンではでバックグラウンドで表示

Command Line

Command LineはcodeというCLIの使い方の説明。

  • codeというCLIで以下のような起動オプションが指定可能
  • tasks.jsonのようなWorkspace特有のファイルは.vscodeフォルダに保存される
# open code with current directory
code .

# open the current directory in the most recently used code window
code -r .

# create a new window
code -n

# change the language
code --locale=es

# open diff editor
code --diff <file1> <file2>

# open file at specific line and column <file:line[:character]>
code --goto package.json:10:5

# see help options
code --help

# disable all extensions
code --disable-extensions .

Status Bar

Status Barは問題(エラーと警告)の使い方の説明。言語モードもStatus Barに表示されるので変更方法の説明もあり。

  • Ctrl+Shift+M : 問題(エラーと警告)の表示
  • F8 : 次の問題(エラーと警告)を表示
  • Shift+F8 : 前の問題(エラーと警告)を表示
  • Ctrl+K M : 言語モード(Python, JavaScriptなど)の変更

Customization

Change your theme

カラーテーマとアイコンテーマの変更方法。

  • Ctrl+K Ctrl+T : カラーテーマの変更
  • Ctrl+Shift+Pのコマンドパレットの「File Icon Theme」でアイコンテーマの変更
  • テーマは拡張機能としてMarketplaceからインストール可能

Change your keyboard shortcuts

キーボードショートカットの変更方法。

  • Vimなどのキーマップ拡張機能はMarketplaceからインストール可能
  • Ctrl+K Ctrl+S : キーボードショートカットのカスタマイズ
  • Ctrl+Shift+Pのコマンドパレットの「Open Keyboards Shortcuts (JSON)」でオリジナルキーボードショートカットを設定可能

Tune your settings

設定の変更方法。UIで変更する方法とJSONを直接編集する方法がある。

  • Ctrl+, : 設定画面UIを開く
  • Ctrl+Shift+Pのコマンドパレットの「Open Settings (JSON)」でsettings.jsonを開く

代表的な設定項目としては下記がある。
デフォルトの設定編集をJSONにする場合(UIの場合は"ui")。

"workbench.settings.editor": "json"

ペースト時にフォーマット(コード整形)する。

"editor.formatOnPaste": true

フォントサイズの変更。

// Main editor
"editor.fontSize": 18,
// Terminal panel
"terminal.integrated.fontSize": 14,
// Output panel
"[Log]": {
    "editor.fontSize": 15
}

ズームレベルの変更。

"window.zoomLevel": 5

Fira Codeなどの合字フォントを使用する場合。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

自動保存する場合。

"files.autoSave": "afterDelay"

保存時にフォーマットする場合。

"editor.formatOnSave": true

タブ幅の設定。

"editor.tabSize": 4

タブではなくスペースを使う。

"editor.insertSpaces": true

ホワイトスペースを表示。

"editor.renderWhitespace": "all"

非表示にするファイル、フォルダの設定(.gitなど)。

"files.exclude": {
    "somefolder/": true,
    "somefile": true
}

検索から除外するファイル、フォルダの設定。

"search.exclude": {
    "someFolder/": true,
    "somefile": true
}

特定の言語向けの設定は以下のように記述する。 languageid(pythonなど)についてはLanguage Identifiersを参照。

"[languageid]": {

}

その他の設定についてはUser and Workspace Settingsを参照。

Add JSON validation

bower.jsonなどのJSON設定ファイルのバリデーションをsettings.jsonに記述することができる。
以下はJSON Schema StoreのJSON Schemaを指定する方法。

"json.schemas": [
    {
        "fileMatch": [
            "/bower.json"
        ],
        "url": "http://json.schemastore.org/bower"
    }
]

自分で作成してファイルを指定する方法。

"json.schemas": [
    {
        "fileMatch": [
            "/foo.json"
        ],
        "url": "./myschema.json"
    }
]

JSON内に記述する方法。

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    },

Extensions

Extensionsは拡張機能のインストール方法など。

f:id:wonder-wall:20191008225413p:plain

Files and folders

Files and foldersはファイル操作など。

  • Ctrl+@ : 統合ターミナルを開く
  • Ctrl+B : サイドバーの表示/非表示
  • Ctrl+K Z : Zenモード(コーディングに集中しやすい。Escで抜ける)
  • Ctrl+\ : エディターの分割
  • Ctrl+1, Ctrl+2, Ctrl+3 : 分割したエディター間を移動
  • Ctrl+Shift+E : エクスプローラを表示
  • Ctrl+Click : テキスト中のファイルリンクを表示
  • Ctrl+F4 : エディターを閉じる
  • Ctrl+Tab : 最近使用したエディターの表示と移動
  • Alt+←/→ : 最近使用したエディターを前/次に移動
  • ファイルの関連付けは以下のような設定を追加
"files.associations": {
    ".database": "json"
}
  • 編集中のファイルが他のエディターにより編集され競合した場合は、差分が表示され上書き/破棄が選べる

f:id:wonder-wall:20191009080441p:plain

Visual Studio Codeメモ : 対話型プレイグラウンドで代表的な機能を試す

  • Multi-cursor Editing
  • IntelliSense
  • Line Actions
  • Rename Refactoring
  • Formatting
  • Code Folding
  • Errors and Warnings
  • Snippets
  • Emmet
  • JavaScript Type Checking

※Windows 10、Visual Studio CodeのVersion1.38で確認

Welcomeページの「Interacitve playground」または「Help」→「Interactive playground」で表示される対話型プレイグラウンドではVisual Studio Codeの代表的な機能を試すことができる。

f:id:wonder-wall:20191006163634p:plain

続きを読む

Visual Studio Codeメモ : インターフェイスの概要とキーボートショートカット

  • インターフェイスの概要
  • キーボードショットカット

※Windows 10、Visual Studio CodeのVersion1.38で確認

インターフェイスの概要

Visual Studio Codeをなんとなく使っていたが、基本的なことを理解していなかったりするので公式ドキュメントを見ていく。
まずはWelcomeページから(Welcomeページは「Help」→「Welcome」で表示できる)。

f:id:wonder-wall:20191006155115p:plain

続きを読む

Vimメモ : Neovimで開発環境を段階的に構築する(7)コメントアウト、Undo、カーソル移動など

  • コメントアウト
  • Undo
  • カーソル移動
  • 囲み文字の編集
  • 自動で閉じ括弧
  • まとめ

今回は開発するときにあると便利な比較的ユーザ数が多いプラグインを紹介していく。

コメントアウト

コメントアウトをサポートするプラグインとしては下記が挙げられる。

Repository スター数
scrooloose/nerdcommenter 3367
tpope/vim-commentary 2588
tomtom/tcomment_vim 1010

例えばvim-commentaryの場合は、gccと入力すると現在行をコメントアウトし、ビジュアルモードで行選択してからgcと入力すると選択行をコメントアウトできる。そして、コメントアウトされた行に対して実行すればコメントアウトを解除できる。

Plug 'tpope/vim-commentary'
続きを読む

Vimメモ : Neovimで開発環境を段階的に構築する(6)プログラム実行

  • プログラム実行
  • まとめ

プログラム実行

プログラム実行をサポートするプラグインとしては下記が挙げられる。

Repository スター数
tpope/vim-dispatch 1966
skywind3000/asyncrun.vim 921
kassio/neoterm 752
thinca/vim-quickrun 614

Neovimでは:terminalコマンドでターミナルエミュレータを起動できるので、:terminalコマンドのラッパーであるneotermを試してみる。

Plug 'kassio/neoterm'
続きを読む