【VScode】高機能エディタをもっと便利にするおすすめの使い方

公開日:2018-10-12
最終更新:2018-10-24
※この記事は外部サイト(http://www.procrasist.com/entry/vscode-fal...)からのクロス投稿です

こんにちは、ほけきよです!

みなさん結構Markdownを使っていますよね。私もメモを取るときはガッツリ.md派です。

私はMarkdownを使うときは、書きやすいエディタ(高機能版メモ帳)として Visual Studio Code(VSCode)を使っています。

デフォルトでも十分に使いやすいのですが、いろいろと使い方、拡張機能を調べていると

なんやこれ、、、めちゃめちゃしっかりしてるやん

ということがわかってきました。

惚れた。恋するエディタより恋した。

そこで今回は、VSCodeを使うみんなに、おすすめの使い方や拡張機能を紹介します!

【プレビュー機能】Markdown使いには必須級!


プレビュー画面

VSCodeの大きな魅力の一つが、プレビュー機能です。

実際に書きながらMarkdownの経過を見れます。リアルタイムに。

他にこのような機能があるのは、kobitoやwri.pe(オンライン)あたりでしょうか。

やっぱMarkdownをMarkdownのまま使っていると、「思てたんと違う...!」となることが出てきます。

これをある程度まとまって直しているとストレスになるので、その場でぱぱっと直せるリアルタイムプレビューはとても便利です!

【補完機能】これだけは覚えておきたい補完機能集

マークダウンの記法って割といろいろ覚えないとダメで、初心者には敷居がちょっと高いです。 文法ミスが頻繁に起こるとストレスですよね。

ただ、VSCodeはデフォルトでの補完機能が充実しているので、

  • 文法ミスが減る
  • Markdownで書くスピードが上がる
  • Markdown初心者にもわかりやすい

という利点があります。

覚えておくと便利な補完チートシート

ここで、私がよく補完で使っているものを紹介しますね

このくらい知っていれば、普段使いで困ることはないはず!

入力 変換後 効果
"code" text コード記入
"italic" *text* 斜体
"bold" **text** 太字
"heading" # text 見出し
"link" [text](http://link) リンク
"image" ![alt](http://link) 画像の挿入
"quote" > text 引用
"br"+tab <br> 改行
|html用
"hoge"+tab <hoge></hoge>
"p"+tab <p></p> 改行
"class"+tab <class></class> html用
"div"+tab <div></div> html用
"link"+tab <link rel="stylesheet" href=""> リンク
"a"+tab <a href=""></a> リンク

大抵のことに補完機能があるのがわかると思います!

【ショートカット】これだけは覚えておきたいショートカット集

作業を効率化できるショートカットがデフォルトでもたくさんあります。

  • 注1 : ここでは、Macでのキーです
  • 注2 : ですが、Macでのcmdはwindowsのctrlです!windowsはcmdもctrlもどっちもctrlキーで大丈夫。多分!
コマンド 効果
cmd+p ファイルを検索して開く
F1 コマンドパレットを開く
わからないことがあればここに
cmd + shift + K その行を削除
alt + ↑(↓) その行を上(下)に移動
alt + shift + ↑(↓) その行を上(下)の行にコピー
cmd + ]([) インデントの追加(削除)
cmd + / コメントアウト
ctrl + G 指定行移動
ctrl + tab 編集するファイル(タブ)の移動
ctrl+ ` 端末(ターミナル)を起動
コード書く人向け
cmd + B サイドバーを開く
(プロジェクト管理)
ctrl + shift + G gitのサイドバーを開く

基本のコピペ、ファイルの開閉、セーブなどももちろんありますよ!

まだまだいっぱいありますが、このくらいできればより便利になると思います。 効率化したいという人は、少しずつ使いながら覚えていきましょう!

【拡張機能】ワンランク上を目指す、拡張機能

エディタの真の力を発揮するのがこの拡張機能

VSCodeは開発が盛んなので、いろんな人がいろんな拡張機能を出してくれています。

なんか不便だなと思ったら調べてみましょう。痒いところに手が届くものが結構ありますよ!

Visual Studio Marketplace

入れ方

  • Market placeで良さげなものを調べる
  • 良さげなもののタイトルをコピー
  • VScodeに戻って↓図のように検索してインストール

簡単でしょ?

入れてよかった拡張を紹介!(Markdown編)

Markdownを使うにあたって便利なものを紹介します。 なお、たいていの拡張は、説明ページに動画付きで解説をしてくれているので、具体的なイメージは実際に見てもらうのが早そうです!

太字や斜体をより簡単に!『Markdown All in One』

Markdown All in One

Wordとかって、文字をドラッグしてctrl+Bと押すと、太字になりますよね?

VSCodeでは普通それはできないんですが、この拡張機能を使うと可能になります!!

自動でプレビューを開く『Auto-Open Markdown Preview』

Auto-Open Markdown Preview

どうせプレビューするのに、いちいち開くのも面倒ですよね。 この拡張を入れるとmarkdownファイルを開くときに自動でプレビューを開くようになります。

手間が省けて便利!

数式も使えるように!『Markdown+Math 』

Markdown+Math

$$内に数式を書いてctrl+shift+.と打てば、数式対応のプレビューが表示されます!

表作りを少し便利に!『Table Formatter』

Table Formatter

表の整形や、少し補完してくれたりなど面倒な表作りを便利にしてくれます。 ですが、それでもなお不便だと思うので、Excelで作ってコード変換が私的にはいいかなと思います。

一瞬でExcelの表をHTML形式やMarkdown形式に変換する方法 - プロクラシスト

まずは見た目から『VSCode Great Icons』

VSCode Great Icons!

全然効率と関係ないのですが、やはり見た目は大事!

↓のように、アイコンを綺麗にしてくれるプラグインです。

Markdownだけとは言っていない。

Markdown編と書きましたが、良さはMarkdownだけにとどまりません!

普通にpythonやC++などのコーディング用から、html, cssなどを書くエディタとしても便利! さっきも紹介した、MarketPlaceにて、目的に応じたプラグインを入れましょう

■ エディタ内でターミナル起動ができる(ctrl+`)

■ エディタ内でgit管理ができる(ctrl+g)

■ 拡張機能でそれらしき補完を引っ張ってこれる。

■ pycharmやeclipseとかのIDEより断然早い

まとめ

いかがでしょうか。

Markdown使いでも、それ以外の用途でも、かなり高機能なエディタです!

エディタに悩んでいる!
という人は是非、乗り換えを検討してみましょう。
記事が少しでもいいなと思ったらクラップを送ってみよう!
93
+1
@hokekiyooの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする