VSCodeでコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニック
Post on:2019年8月8日
sponsors
Visual Studio CodeでWeb制作・開発のコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニックを紹介します。
My Web Development VS Code Settings, theme, Extensions, tips and tricks
br lampewebdev(@lampewebdev)
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
私がVSCodeを使用している理由
私はプログラミングを始めて以来、たくさんのエディタやIDEを使ってきました。Eclipse、Netbeans、Notepade ++、Brackets Editor、Sublime Text 2、Sublime Text 3、Webstorm、Atom Editor、他にもあると思いますが、もう忘れました。
私は現在、Visual Studio Code（VSCode）を使用しています。VSCodeはGoogleトレンドによると、最も検索されたエディタです。その理由はいくつか考えられます。
- VSCodeは速く動作するように感じます。
もしVSCodeが遅く感じるのであれば、それはVSCodeのせいではなく、不十分に実装された機能拡張が原因です。 - ファイル検索も非常に高速で、あっという間です。待ち時間はありません。
- 軽量ですが、必要な機能があらかじめ揃っています。ファイル検索、デバッグ、基本的なgit GUIなど。
- テーマやカスタマイズのサポート、VSCodeのすべてを自分用に変更できます。
- 便利な機能拡張もたくさん用意されています。
賞賛の言葉はこれくらいにして、VSCodeを私が実際にどのように使用しているか紹介します。
VSCodeのテーマ・アイコン・フォント
私は毎日数時間、VSCodeを使用するので、テーマやアイコンやフォントは使いやすいものにしています。
VSCodeのテーマ
glowは有効にせず、カスタムCSSも追加していません。
ファイルのアイコン
Simple Iconsは見やすいカラーで、ミニマルなアイコンテーマです。必要なファイルを素早く見つけることができます。
フォント
コードが見やすいフォントで、合字もサポートしています。
フォントの設定は下記の通りです、この構成の設定方法については後述します。
|
1 2 3 |
"editor.fontFamily": "Hasklig, Consolas, 'Courier New', monospace", "editor.fontLigatures": true, "editor.fontSize": 15, |
VSCodeの機能拡張
この機能拡張は、すべてのエディタに組み込まれるべきです。{がどこで始まり、}がどこで終わったか分からないコードを書いたことがありませんか？ すべての{}または()が異なるカラーで表示されるので、コードが見やすくなります。
インデントのすべてのタブやスペースに異なるカラーを加える機能拡張です。コードをより速くナビゲートするためにも役立ちます。
.envファイルは最近一般的になっており、多くのプロジェクトで使用されています。VSCodeの初期状態ではこれらのファイルタイプに対する構文強調表示がサポートされていません。この機能拡張は、.envファイルに対するサポートを追加します。
この機能拡張はパフォーマンスとスピードを重視するすべてのデベロッパーにとって必須です。これは、このnpmモジュールをインポートするのにかかるコスト、またはインポートできるものがどれだけあるかをKbで示します。
これは私にとって重要な機能拡張です。SSHを介して開発環境に接続していますか？ Dockerコンテナを使用していますか？ それともWSLを使いますか？ これを使用すると、すべてを非常に簡単に使用できます。一番いいのは、SSHを使ってもファイルの検索も開くのも遅くなりません。魔法みたいなこの機能拡張が大好きです！
これはIntellisenseに代わるもので、AIベースのIntellisenseのようなものです。タブ補完では、他のユーザが使用している関数やパラメータのうち、最も使用されているものが一番上に表示されます。この機能拡張を使うことで、効率がアップします。
この機能拡張をインストールすると、VSCodeに直接ESLintサポートが追加され、ESLintの問題を修正するのに役立ちます。これも必須アイテムです。
VSCodeの設定
VSCodeの設定は歯車アイコンの設定からではなく、JSONを使うことを私は好みます。JSONを使うには、Ctrl+Shift+Pを押して、「open settings JSON」と入力します。これで、settings.jsonファイルが開くので、他のJSONファイルと同じように編集することができます。
カーソルを見やすくする
|
1 2 3 |
"editor.cursorBlinking": "smooth", "editor.cursorSmoothCaretAnimation": true, "editor.cursorStyle": "block", |
1行目は、fade-in-outのアニメーションでカーソルが滑らかに点滅します。
2行目は、カーソルの動きがアニメーションするので、自然に感じられます。
3行目は、カーソルの外観をブロックに変え、より快適に見つけることができます。
これらの設定でカーソルの表示が大幅に改善されました。
フォントを読みやすくする
|
1 2 3 |
"editor.fontFamily": "Hasklig, Consolas, 'Courier New', monospace", "editor.fontLigatures": true, "editor.fontSize": 15, |
前述したように、私はフォントにHaskligを使用しています。また、合字を好み、これはコードが読みやすくなります。私は完璧な視力をもっていないので、フォントは少し大きめの方がよいです。
コードのコピペ時のフォーマット
|
1 |
"editor.formatOnPaste": true, |
私はたまにネットからコードをコピペすることがあります。ペースト時の書式設定をしておきます。
ガイドラインの可視化
|
1 |
"editor.renderIndentGuides": true, |
コードでたくさんのインデントを使うようであれば、ガイドラインがあると見やすくなります。
テレメトリを無効にする
|
1 |
"telemetry.enableTelemetry": false, |
vscode-insidersを使用している場合でも、自分のデータをMicrosoftに送信する必要はありません。だから私は無効にします。
未保存のタブを分かりやすくする
|
1 |
"workbench.editor.highlightModifiedTabs": true, |
VSCodeでは保存されていないファイルには、タブに大きなドットが表示されます。これだけでは分かりにくいので、ラインが追加されるように設定します。
VSCodeの便利な使い方
WSLを使う
Linux用のWSLまたはWindowsサブシステムは、Windows上でLinuxを実行するための素晴らしい方法です。私にとってはWindows上のものよりもはるかに優れたLinuxの開発体験を得ることができます。私はgitをwindowsにインストールしたくないし、nodejsのようなものもインストールしたくありません。
wsl LinuxのgitバージョンをVSCodeに統合する、かなり便利な方法があります。WSLGITをダウンロードし、適切な場所にexeファイルを置き、VSCodeの設定に下記を追加します。
|
1 |
"git.path": "D:\\dev\\wslgit.exe", |
また、VSCodeには統合ターミナルがあります。ctrl+`でターミナルを開き、VSCodeにbashを追加して、下記を追加します。
|
1 |
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\wsl.exe", |
これにより、VSCodeはデフォルトのwsl linuxシェルを使うようになります。私の場合は、bashに付属しているUbuntuです。
コマンドパレットを使う
VSCodeで設定やその他の機能を見つけるために、あちこちをクリックする人をよく見かけます。しかし、通常はコマンドを入力した方が簡単です。VSCodeにはコマンドパレットがあり、Ctrl+Shift+Pを押すだけで呼び出せます。
Shiftを押したくない場合は、Ctrlを押しながらPを押し、ボックスに「>」を入力するとすばやくコマンドパレットが起動します。Ctrl+Pは、必要なファイルを見つけるのにも便利です。
最近閉じたファイルをもう一度開く
Ctrl+Shift+Tを押すだけです。これで最後に閉じたファイルをもう一度開くことができます。また、複数回押すと、複数のファイルを開くことができます。
このショートカットは、ブラウザのタブでも動作します。
単語を削除する
一つの文字でなく、単語を削除するには、Ctrl+Backspaceを押します。これでもうBackspaceを何回も押す必要はありません。
このショートカットも他のソフトウェアで使用できます。
行を削除する
行全体を削除したい場合は、Ctrl+Xがお勧めです。いわゆるカットですが、現在選択されている行を完全に削除します。
あなたはVSCodeを使用していますか？ 持っている機能拡張は何ですか？ 見逃している設定はありますか？ よく使うショートカットはありますか？
何かあれば、私に教えてください。
ここまで読んでくれて、ありがとうございます！
sponsors
