VSCode Devcontainer 放浪記
Docker でローカルテストを行っている皆様，いかがお過ごしでしょうか 皆様おはようございます．かさいです．今年一年， VSCode の Devcontainer の様々な所でコケまくったり，色々な知見があったので Devcontainer について知識整理を行い，ついでにその経験を VSCode Advent Calendar 2022 に奉納することにしました． よろしければ Advent Calendar の他の方々の記事も見ていってください． この記事では，Docker についての事前情報がある方を対象に， Devcontainer とはどういうものなのか，なぜそれを使いたがるのか，一般的な Docker コンテナの構築指針とどういった違いがあるのかを整理していきます． Devcontainer をすでに使っている方にも助けとなるような記事を目指して書きましたので最後まで見ていっ
UI Sketcher - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. UI Sketcher Turn sketches into UI code Installation Once installed, make sure to run the command UI Sketcher: Set OpenAI API Token. Your token will be stored in a secret store handled by VSCode. It will never be shared with anyone. Usage Open a text file and put your cursor where you want the code to be generated Use
GitHub ActionsのVS Code拡張の提供が開始されました（公開ベータ版） | DevelopersIO
こんにちは、CX事業本部 Delivery部の若槻です。 このたびのアップデートにより、GitHub Actions VS Code extensionが公開ベータとなりました。 下記のextensionを使うことにより、GitHub Actions workflowの管理をVS Code上で行うことができるようになります。 試してみた VS Codeへのインストール マーケットプレイスからextensionをVS Codeにインストールします。 サイドバーにGitHub Actionsのアイコンが追加されます。GitHubへのサインインを求められるので、サインインします。 サインイン後に[Refresh]ボタンが表示されるので、クリックします。 するとNo GitHub repositories found. Please open a folder that contains a Gi
VSCode の Profiles 機能で拡張機能や設定を共有してみる
VSCode の設定を簡単に切り替える方法はないかなと思っていたところ、2023-01(v1.75.0) の更新で Profiles 機能が追加され、複数 Profile を持てようになったとのこと。 そこで、どんな感じかなと試してみたところ、設定の切り替え以外にも共有などで便利そうだったのでその辺についてなど。 2023-02-10: 通常版の vscode.dev でもプレビューを利用できるようになったので、注意点などを更新しました 2023-02-10: Profile の切り替えについての追記などを行いました Profiles 機能とは？ これまで VSCode の UI ではユーザーの設定を 1 つしか持てませんでした。 今回の更新で導入された Profies 機能を使うとその辺を良い感じにしてくれるとのこと。 Profiles If you have different VS
7 Promising VS Code Extensions Introduced in 2021
Screengrab from Stack Overflow 2021 Developer SurveyVisual Studio Code is unarguably the most sought-after source code editor tool today. The recently concluded Stack Overflow Developer Survey 2021 only reaffirms the growing dominance of Microsoft’s VS Code. Much of the popularity is due to their rich library of extensions which makes it easy to plug and play third-party APIs. You can also create
マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜 - memo.md
先日投稿した以下のエントリで、「使い方がわからない」という意見を多く頂いた。 mugi1.hateblo.jp マルチカーソル自体の操作方法は調べれば出てくるし、事例だけ紹介しとけばええやろ、と思っていたのだが、いきなり応用のサンプルを貼りすぎてわけがわからなかったらしい。申し訳ない。 せっかくなので、基礎から含め、どういったキー入力で上記のような操作を実現しているのかを紹介したいと思う。 🔥実践！マルチカーソル / 入門編 なおmac環境です。Windowsやその他環境の方は気合で調べてください。 また、言い訳臭くて申し訳ないが、私は普段はSublime Text Keymap and Settings Importerを使っており、SublimeTextっぽいキーバインドに変えて編集している。 一旦無効にしたうえでVSCodeデフォルトの状態で一通り調べて書いたつもりだが、もし違って
Azure Terraform Visual Studio Code 拡張機能のインストール
Terraform を使用すると、クラウド インフラストラクチャの定義、プレビュー、およびデプロイを行うことができます。 Terraform を使用する際は、HCL 構文を使って構成ファイルを作成します。 HCL 構文では、Azure などのクラウド プロバイダーと、クラウド インフラストラクチャを構成する要素を指定できます。 構成ファイルを作成したら、"実行プラン" を作成します。これにより、インフラストラクチャの変更をデプロイ前にプレビューすることができます。 変更を確認したら、実行プランを適用してインフラストラクチャをデプロイします。 Visual Studio Code の Terraform 拡張機能を使用すると、エディターから Terraform を操作できます。 この拡張機能を使用して、Terraform 構成の作成、テスト、実行を行うことができます。 この記事では、次のこと
【2020年1月】令和だし本格的にVSCodeのRemote Containerで、爆速の"開発コンテナ"始めよう - Qiita
【2020年1月】令和だし本格的にVSCodeのRemote Containerで、爆速の"開発コンテナ"始めようJavaPythonPHPJavaScriptGo VSCode の Remote Conainer で"開発環境+プロジェクト全部入りのコンテナ"からスタートダッシュをキメるッ！？ 開発でVS Code の Remote Conainer使っていますか？単に既存のコンテナに入るだけなら Remote SSH でも構いませんが、"ローカル開発環境の一部"として、いやむしろローカルの開発環境＝Remote Containerとして、ビンビンにRemote Container使っていきましょう。令和だし！(すでに２年だけどね・・・？) 特にMacを使っていると最初からPythonやらPHPやらRubyやらが入ってしまっているので開発環境があるのですが、これらは割とmacOSのエコシ
awesome-vscode
A curated list of delightful Visual Studio Code packages and resources. For more awesomeness, check out awesome. Table of Contents Table of Contents Official Syntax Migrating from other editors Migrating from Vim Migrating from Atom Migrating from Sublime Text Migrating from Visual Studio Migrating from Intellij IDEA Camel Humps Using VS Code with particular technologies Lint and IntelliSense 1C A
VS Codeでファイルを常に新しいエディタに開くには
［エクスプローラー］ビューからファイルを常に通常のエディタに開くようにする VS Codeの「プレビューエディタ」は、その名の通り、［エクスプローラー］ビューなどから開いたファイルの内容を「プレビュー」するためのものだ。［エクスプローラー］ビューでファイルを「シングルクリック」すると、そのファイルの内容は通常、プレビューエディタに表示される。次に、別のファイルを［エクスプローラー］ビューでシングルクリックすると、そのファイルの内容が同じプレビューエディタに表示される。以下に例を示す。これは2つのファイルを連続して、［エクスプローラー］ビューでシングルクリックしているところだ。2つのファイルの内容が1つのプレビューエディタに表示されるのが分かるはずだ。
[Ansible] Visual Studio Code で Playbook を書く時に便利な拡張たち - てくなべ (tekunabe)
はじめに Visual Studio Code（以下、VS Code）で Ansible の Playbook を書く時に、私が便利に利用させてもらっている拡張をご紹介します。 「自分は Windows で VS Code 使ってて、Ansible は SSH 先の Linux だから関係ないや。」という方も、最後の「Remote Developement」まで見ていただけると幸いです。手元が Windows でも通用します。 動作確認環境: VS Code 1.38.1 その前に・・標準ではどんな感じに？ VS Code では特に拡張を入れなくてもある程度は Playbook が書きやすいようになっています。 具体的には Playbook の拡張子を .yml または .yaml にするこことで、言語として YAML が選択されます。 これにより、シンタックスハイライトが効くようになり、
![[Ansible] Visual Studio Code で Playbook を書く時に便利な拡張たち - てくなべ (tekunabe)](https://cdn-ak-scissors.b.st-hatena.com/image/square/e505855f6b4602bad326910ea5e7fb02e6a5f379/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Fakira6592%2F20190921%2F20190921112537.png)
Debugging the Main Process in VSCode | Electron
1. Open an Electron project in VSCode. $ git clone git@github.com:electron/electron-quick-start.git $ code electron-quick-start 2. Add a file .vscode/launch.json with the following configuration: { "version": "0.2.0", "configurations": [ { "name": "Debug Main Process", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/elect
VSCodeでなるべくマウスを使わない開発環境をがんばる - Qiita
はじめに 最近，職場の若手が自分も愛用しているVSCodeを使って開発をがんばっています．それに触発されてVSCodeでの開発環境についてまとめたものを書いていきたいと思います．まわりにはターミナル上でEmacsやVimを使ってコードを書いているプログラマも多い環境なので，なるべくマウスを使わずにキーボード操作だけで開発できるようにまとめます． https://code.visualstudio.com やりたいこと 次にあげる内容をキーボード操作で行えるようにするのが目標です． 指定したファイルを素早く開く 関数やクラスなどのシンボルで検索する 定義にジャンプしたり戻ったりする 手軽にC/C++をビルドして，素早くコンパイルエラーの場所を表示する 前提としてがっつり設定などをカスタマイズするというのではなく，初心者向けになるべく簡単に環境を立ち上げられる内容でまとめていきます．またビルド
Prettier - Code formatter - Visual Studio Marketplace
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Prettier Formatter for Visual Studio Code Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTM
VS Codeのコマンドラインオプション：拡張機能編
連載「Visual Studio Code TIPS」 Visual Studio Code（以下、VS Code）はコマンドラインから「code」コマンドでも起動できる。このときにはコマンドラインオプションを指定可能だ。本稿では、それらのうちの拡張機能に関連するものを幾つか紹介する。VS Codeの起動時に指定する一般的なオプションについては「VS Codeのコマンドラインオプション：起動編」を参照されたい。 なお、ここで紹介するコマンドラインオプションは、拡張機能を無効化してVS Codeを起動するオプションを除けば、拡張機能をインストール／アンインストール／一覧するものであり、VS Codeウィンドウを開かずに終了する。
VSCodeの設定ファイルやキーバインド、拡張機能をDotfiles形式(GitHub)で管理し、環境を共有する。｜teitei.tk
ですが、shellやvimなどの設定はDotfilesで管理をしており、VSCodeだけ拡張機能を分けるというのは管理するものが増えるので避けたいと思っていたので、Dotfilesで管理をするようにしました。 1. Repositoryを作るすでにRepositoryがある方はスキップしてもらって大丈夫です。 無い方は下記の記事を参考にして作成をしてください。 Launch VS Code. Open the Command Palette (⇧⌘P) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command.上記の記事を参考にインストールをすると、codeというコマンドが追加されています。 自分が利用している拡張ファイルを書き出すのは下記のコマンドを実行することで出
VS Codeのワークスペース - Qiita
ワークスペースとは ワークスペースは、複数ルートのフォルダーを同時に開く機能です。イメージとしては、Visual Studioのソリューション内で複数のプロジェクトを開けるのと同じです。アプリケーションを複数のルートフォルダーに分割していたり、テストを別ルートフォルダーに分けていたりした方には便利だと思います。もちろんルートフォルダーは、それぞれ異なるパスに配置してあっても問題ありません。 ワークスペースは、従来のバージョンからプレビュー機能として実装が進められていましたが、VS Code 1.18から正式リリースされました。 ワークスペースの使用方法 使い方は簡単で、[ファイル]-[ワークスペースにフォルダーを追加]を選択するだけです。もう少し直感的に追加したい方は、エクスプローラーにフォルダーをドラック＆ドロップしても追加できます。 ワークスペースの設定を保存したいなら、[ファイル]-
VS Codeを極める！ MarkdownやGitにもオススメの拡張機能9選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。 前回の記事では、「HTMLコーダー」「フロントエンジニア」に役立つ拡張機能を紹介しました。本記事では、開発者全般の方に役立つ拡張機能を紹介します。 エディターを強化する拡張機能 1. Clipboard Ring テキストを「コピー」や「切り取り（カット）」したものを「貼り付け（ペースト）」する場合に、この拡張機能を入れることで複数件の内容を記憶できます。ctrl+shift+v（⌘+shift+v）を押すごとに過去の情報に切り替えられます。デフォルトでは10件の情報を記憶できますが、設定を変更することで記憶する件数を増やすことも可
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual Studio Code and VS Code icons and names usage guidelines
https://twitter.com/su_mi1228/status/1563092230709313536?s=12&t=gncLEc5ARzHtB-FcP8ywQg