VSCodeおすすめ設定大公開！！おすすめ拡張機能も - Qiita
はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと
「Visual Studio Code」で執筆するSF作家 藤井太洋氏が作る物書きのための拡張機能
「VS Code Meetup」は、強力かつ軽量なオープンソースのコードエディター「Visual Studio Code」のミートアップです。今年もVS Code Meetup 主催の年次カンファレンス、「VS Code Conference Japan 2021」が開催されました。招待講演では、SF作家の藤井太洋氏が登壇。VS Codeで執筆を支援する機能拡張「novel-writer」の制作について発表しました。 『Hello, World!』で吉川英治文学新人賞を受賞したSF作家 藤井：お時間いただきまして、ありがとうございます。本日、「Visual Studio Codeで小説を書く」というセッションを持たせていただく、SF作家の藤井太洋です。それでは、プレゼンテーションを進めます。 まず簡単な自己紹介から。私は、2012年に『Gene Mapper』というサイバーパンク小説をセル
Visual Studio Codeから起動するターミナルソフトをiTerm2に変更する | DevelopersIO
こんにちは。サービスグループの武田です。 Visual Studio Code（以下、VSCode）はマイクロソフトにより開発されているソースコードエディタです。VSCodeはシンプルながらプラグインによってかなりカスタマイズ性の高いエディタになっています。 さて、VSCodeはコマンドパレットから外部ターミナルソフトを簡単に起動させることができます。手順はコマンドパレットを起動して Open New Terminal コマンドを実行するだけです。Macの場合、OS標準のターミナル（Terminal.app）が起動します。今回はこの起動するターミナルソフトを、いつも使用しているiTerm2に変更してみました。 前提 次の前提で進めます。 OSはmacOS VSCodeインストール済み iTerm2インストール済み やってみた まずはVSCodeを起動します。 設定変更はVSCodeのUse
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれる。どういう時に関数内の()が省略できるか等を覚えなくて良い useEffectの最適な第二引数を自動で補完してくれる コンポーネントのimport文を自動で挿入してくれる なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、React開発においてはもはやデファクトスタンダードです(長年愛用しているエディタがある方も、是非一度VSCodeを試してみてください)。 さて、VSCodeはそのままでも素晴らしいエディタです。しかし、使用するフレームワークや用途に応じて拡張機能を入れるとさらにその卓越した機能性を発揮します。VSCodeがなぜ世界中の
VS Code の使い始めに入れておくと便利な拡張機能 10 選
はじめに この記事では、IT エンジニアである/ないに関係なく、Visual Studio Code (以下、VS Code) をこれから初めて使い始める人が、最初に入れておくと後々便利になるだろうと思われる拡張機能を紹介しています。 拡張機能 (Extension) とは、サードパーティー製の追加機能のようなものであり、誰でも自由に開発・公開することができるようになっているものです。VS Code は無償で提供されているテキストエディタですが、それだけでは不便というユーザーの悩みを解消してくれるものです。 (という立ち位置で存在していた当初でしたが、最近は標準機能のみでも最早テキストエディタという範疇を超えている気がしなくもないです) まだ拡張機能を使い始められていない/使いこなせていないという方は、是非この記事を参考に、VS Code の拡張機能を使い始めるきっかけにしてもらえれば幸い
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
VSCodeのFindで今マッチしている場所にボーダーを引いて見やすくする - $shibayu36->blog;
VSCodeでFindしている時に、マッチしているwordは背景色が変わって分かるのだけど、今どこにフォーカスしているかが分かりづらかった。これが特に問題が起こるのがReplaceをしようとしている時で、Replaceするたびに今どこ？とマッチ箇所を探していた。これだと時間がかかって困る。 調べてみるとTheme Color | Visual Studio Code Extension APIに書かれているように、自分のsettings.json内で自分用に色を調整し、見やすくカスタマイズ出来ることが分かった。これでFindの現在のマッチ箇所を見やすくしてみる。 Findの色のカスタマイズは editor.findMatchBackground: Color of the current search match. editor.findMatchHighlightBackground:
「Visual Studio Codeの教科書」を読んでVS Codeの設定をゼロから見直してみた - karaage. [からあげ]
追記：VS Codeの入門書をZennでリリースしました ブログで扱ったVS Code関連の記事をまとめて、無料の電子書籍としてZennというプラットフォームでリリースしました。よければ、こちらも参考にしてみてください。 Visual Studio Codeの教科書 Visual Studio Codeの教科書を購入しました。基本的な使い方から拡張機能の作り方まで、広く押さえられていました。 プログラマーのためのVisual Studio Codeの教科書 (Compass Booksシリーズ) 作者:川崎 庸市,平岡 一成,阿佐 志保発売日: 2020/04/30メディア: Kindle版 自分は拡張機能作りには興味なかったのですが、思わず手を伸ばしたくなりますね。拡張機能作りまで興味ある方にとってはかなり良い本ではないかと思います。 本を読むと、色々改めて発見があったのと、拡張機能一回
![「Visual Studio Codeの教科書」を読んでVS Codeの設定をゼロから見直してみた - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b8cf77980ab900ed339768901e94cfe2584441d7/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20200707%2F20200707003818.png)
VSCode ExtensionのBookmarksが便利 - hitode909の日記
VSCodeで長いコードや入り組んだコードを読んでいくときに、さっき読んでたあれはどこに行ったっけ、となって困っていた。ファイル名を手元のテキストファイルにメモしたりしていたけど、ところでさきほどのメモのタブはどこにいったのか…と混乱していた。 エディタ内にブックマークを作れる拡張があるに違いない、と探したらBookmarksという拡張があった。 その名の通りで、行に対してブックマークを追加できる。サイドバーのBookmarksタブからブックマーク一覧を参照できる。 ここのテストは後で直しそうだな、と思ったらとりあえずブックマークしておく、みたいに使えて便利。 marketplace.visualstudio.com 追記 コメントで偽物の拡張があると教えてもらった。たしかにインストール数が100くらいの同名の拡張がありました。どのような挙動をするかは分かっていません。GitHubのリポジ
VSCodeVimの設定を見直す
久しぶりにVSCodeVimの設定を見直してみました。 そこから得た知見の一部をVimの設定にも反映させました。 Table of Contents 経緯 ツールによらないキーバインド統一化を目指す過程で、VSCodeのキーバインドを見直し始めたのがきっかけです。 以前からモヤモヤしていたVSCodeVimに関する設定も整理しようと思って始めました。 ツールによらないキーバインド統一化 普通、キーバインドはツールごとに異なります。 ある程度統一されている部分もありますが、細かな違いが脳のコンテキストスイッチの切り替えコストを増大させます。 全てのツールで同じキーバインドを実現することにより、それらの問題を解決するプロジェクトです。 まだ実行には至りませんが、2019年中に完成させたいと思っています。 以下のようにとても人気があり、私にとってもVSCodeを使う上で欠かせない拡張機能です。
VSCodeでコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニック
Visual Studio CodeでWeb制作・開発のコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニックを紹介します。 My Web Development VS Code Settings, theme, Extensions, tips and tricks br lampewebdev(@lampewebdev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私がVSCodeを使用している理由 VSCodeのテーマ・アイコン・フォント VSCodeの機能拡張 VSCodeの設定 VSCodeの便利な使い方 私がVSCodeを使用している理由 私はプログラミングを始めて以来、たくさんのエディタやIDEを使ってきました。Eclipse、Netbeans、Notepade ++、Brackets Ed
JavaScript開発者のための優秀なVSCodeツール26選 - Qiita
以下はjsmanifestによる記事、26 Miraculous VS Code Tools for JavaScript Developers in 2019の日本語訳です。 26 Miraculous VS Code Tools for JavaScript Developers in 2019 Visual Studio Code(一般的にはVScodeと呼ばれる)は、デスクトップ上で動作する軽量で強力なクロスプラットフォームのコードエディタです。 TypeScriptやChrome Debuggerなどの開発ツールがサポートされています。 最初は自分のプロジェクトを構築するためにVScodeを使ったのですが、すぐに惚れ込みました。 VScodeには、誰もが開発することができ、誰もが使用することができる莫大なオープンソースの拡張機能が存在します。 開発に使える便利なツールを探している
VS Code上でHTTPリクエストを送信し、VS Code上でレスポンスを確認できる「REST Client」拡張の紹介 - Qiita
VS Code上でHTTPリクエストを送信し、VS Code上でレスポンスを確認できる「REST Client」拡張の紹介extensionREST-APIVSCode 概要 Visual Studio Code（以下VS Code）の拡張機能であるREST Clientが便利だったのでその紹介です。 使い方を文字とgifで説明していきます。 説明はマーケットプレース以上の情報を足していないので、英語に抵抗がなければ公式ページを照会してください。 REST Clientとは VS Code上でHTTPリクエストを送信し、VS Code上でレスポンスを確認できるVS Codeの拡張機能です。 マーケットプレースのREST Clientのページでインストールボタンをクリックするか、VS Codeの拡張機能アイコンをクリックして「REST Client」を検索してインストールボタンをクリックする
VS Codeでターミナルやエディター、エクスプローラー間の移動を楽にする - notebook
VS Code でなるべくマウスを触らない設定 - notebook swfz.hatenablog.com の続きです ショートカットの設定ではターミナル↔エディターなど特定のコンポーネント間の移動だけしか設定できなかったのでショートカット結構覚えないといけないかなーと思っていたのですがそんなことはなかったです。 デフォルトでそれぞれの領域に移動できるショートカットが用意されていました Ctrl + q で一覧が出てくるのでそれだけで移動できます 便利ですね VSCodeVim,Postmanの拡張を入れていたのでその設定とかぶっているので試してみても動作しなかったのですがショートカット設定を見直してみたら競合していたので該当の設定を消してあげれば移動ができるようになりました { "key": "ctrl+q", "command": "-extension.vim_winCtrlQ",
VS CodeをGitHubとスクリプト使って半自動で楽々セットアップ - karaage. [からあげ]
VimからVS Codeから乗り換えつつある日々 デバッグがVS Codeで便利にできることが分かってから、エディタはVS Codeがすっかりお気に入りになりVimから完全に乗り換えつつある今日この頃です。 ただ、乗り換える時大変なのが、環境設定ですね。1台のPCならなんてこと無いのですが、プライベートや仕事の闇のエンジニアとしての諸事情により、ゆうに10台を超えるマシンの環境設定をする必要があるのです。しかも、OSはMac、Linux、Windowsと多岐に渡ります。なんてこったい… Vimでは、以下の様にGitHubで設定ファイル（.vimrc）を管理していたので、VS Codeでも同じことを実現してみることにしました。 というわけで、今回はVS Codeを使っていて、GitHubをある程度知っている、GitHubアカウントを持っている人が対象の記事になります。GtiHubに関して詳し
![VS CodeをGitHubとスクリプト使って半自動で楽々セットアップ - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/2532d559d836080495cfdf1365d7e72eed497a37/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20190224%2F20190224232535.png)
VS Code でなるべくマウスを触らない設定 - notebook
はじめに この記事はVisual Studio Code Advent Calendar 2018 9 日目の記事です 動機 もともと Vim を開発サーバとローカルでも使っていました そろそろ違うエディターを使って見ようかなーという軽いノリで導入してみ見た感じです 使ってみるとちょっとしたことでマウスを使わないと行けなかったりするのが多少なりともストレスになっていたのでなんとかショートカットキーなどを駆使してなるべくマウスに手が行かないような設定をしたい！！ ということで早速ですが僕がしている設定を共有しようと思います また現段階で開発では使っていない（メモやブログ記事書く際に使用）ので開発で使うようになったらまた変わりそうな気もします プラグイン なにはともあれ VSCodeVim を入れます エクスプローラーとエディターの切り替え これはデフォルトでショートカットが用意されているので
VSCodeのオススメ拡張機能 24選 (とTipsを少し)
1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。 6. Settings Sync どこでも同じ設定で使いたい人には便利。 ⇧ + ⌥ + U/D で設定をアップロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCode(Visual Studio Code)をメモ帳として使える拡張機能「VSNotes」が便利 | カレリエ
VSCode(Visual Studio Code)の設定を同期させる拡張機能「Setting Sync」が便利 | カレリエ
VSCode (Visual Studio Code)で簡単に履歴・バックアップが取れる拡張機能「Local History」が便利 | カレリエ