［速報］GitHub Copilot extensions発表。CopilotがDockerやAzureなどサードパーティの専門家へ拡張、プログラマの質問に答えてくれる
マイクロソフトは、日本時間5月22日未明から開催中のイベント「Microsoft Build 2024」で、GitHub Copilotの新機能「GitHub Copilot extensions」を発表しました。 GitHub Copilot extensionsは専門知識を持つCopilot GitHub Copilotは、プログラマはVisual Studio Codeなどのコードエディタ上やチャット欄でAIと対話し、プログラミングに関する質問への回答やコードの生成などをAIが行ってくれる機能です。 GitHub Copilot extensionsは、このCopilotの能力をサードパーティなどがそれぞれのソフトウェアやサービスの専門家へと拡張できるようにし、プラグインとしてCopilotに組み込み可能にしたものです。 拡張されたCopilotの例として、マイクロソフトが提供する「
VSCodeでペットを飼う - Qiita
はじめに こんにちは。エンジニアの皆さん。 日々の業務にお疲れではないでしょうか？ 消えないエラー、動かないプログラム、迫る締切、etc... 数あるストレスで限界になっていませんか？ ... ...!!! そんな時はペットを飼いましょう！！！！！！！！！！ ...というわけで、VSCode上でペットを飼うことができる拡張機能を紹介します。 その名も、vscode-pets.......!!!!!!!!!! これです。vscode-petsで検索しましょう。 導入 インストールしたらコマンドからPet Coding: Start pet coding sessionを実行します。 Pet Coding:Spawn additional petから好きなペットを選んで... ほわああああああああ！！！！！！！ 殺伐としたVSCodeに一輪の花が爆誕しました。かわいいですねー。 あそびかた す
VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話 - Qiita
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
KANTANコード - Chrome ウェブストア
コード譜サイトのコード記号をディグリー(度数)表記に置き換える拡張機能です。 ■概要 「KANTANコード」は、コード譜サイトで表示されるコード記号を、ディグリー(度数)表記に置き換えるブラウザ拡張機能です。 ※旧アプリ名:InstaChordizer(インスタコーダイザー)。 ■対応サイト ・U-フレット(https://www.ufret.jp/) ・楽器.me(https://gakufu.gakki.me/) ・J-Total Music(https://music.j-total.net/) ・ULTIMATE GUITAR TABS(https://www.ultimate-guitar.com/) ・Guitarians.com(https://guitarians.com/) ※2023年7月注記 楽器.meでは表示が崩れる場合があります。 ■使い方 対応するコード譜サイト
サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能) - Qiita
概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。 REST Client 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。 このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。 使用方法 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。 下記にcrudの例を載せていきたいと思います。 また今回はREST A
DeepLの”公式”Chrome拡張がヤバイ。TwitterもSlackも英語でつぶやき放題 | DevelopersIO
ちゃだいん（@chazuke4649）です。 DeepLの公式Chrome拡張機能がヤバかったので勢いにまかせて紹介します。 "公式版"がリリースされてたの知ってた？ DeepL翻訳（ベータ版） - Chrome ウェブストア ベータ版ではありますが、いつの間にか公式版がリリースされていました。自分は今まで公式版がなかったので、以前は非公式版のツールを使っていました。 インストールする Chromeウェブストアからインストールすると、右上にアイコンが表示されます。それをクリックすると以下ポップアップ画面が表示されます。 現時点では以下２つの機能が存在します。 読む: ブラウザ上の文章を任意の言語に翻訳して表示できる 書く: ブラウザ上に入力している文字を任意の言語に変換できる それぞれ試してみます。 「読む」 一般的にはこちらがよく認知されている機能だと思います。 下図のように、翻訳したい
iOS/iPadOS 15のSafariでWebインスペクターを表示してくれる機能拡張「Web Inspector」がリリース。
iOS/iPadOS 15のSafariに対応したインスペクター機能拡張「Web Inspector」がリリースされています。詳細は以下から。 Appleが現地時間2021年09月20日にリリースした「iOS 15/iPadOS 15」では、モバイルSafariでも機能拡張がサポートされましたが、このモバイルSafariでWebインスペクターを表示してくれる機能拡張「Web Inspector」が新たにリリースされています。 Web Inspector is a Safari extension on iOS and iPadOS that works like its desktop counterpart but is less powerful. It allows web developers to edit web pages on the fly, debug JavaScri
React開発効率を3倍にするVS Code拡張機能&環境設定 - Qiita
この記事を読むと VSCodeを最適化することで、React開発効率が加速します。 関数コンポーネントの雛形が一瞬で出来る。しかもファイル名がそのままコンポーネント名になる ES6の作法に則った作法で自動でコード整形してくれる。どういう時に関数内の()が省略できるか等を覚えなくて良い useEffectの最適な第二引数を自動で補完してくれる コンポーネントのimport文を自動で挿入してくれる なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、React開発においてはもはやデファクトスタンダードです(長年愛用しているエディタがある方も、是非一度VSCodeを試してみてください)。 さて、VSCodeはそのままでも素晴らしいエディタです。しかし、使用するフレームワークや用途に応じて拡張機能を入れるとさらにその卓越した機能性を発揮します。VSCodeがなぜ世界中の
VS CodeのAdobe XD用拡張機能が登場！デザインシステムにもとづきコード出力と補完が可能に - ICS MEDIA
VS CodeのAdobe XD用拡張機能が登場！ デザインシステムにもとづきコード出力と補完が可能に Microsoftが開発を行っている無償のエディター「VS Code」にAdobe XD用の拡張機能「Adobe XD extension」が登場しました。 この拡張機能を使うことで、Adobe XD上で作成したデザインアセットをVS Code上で参照・編集できるようになります。デザイナーとエンジニア間の溝を埋めることができ、デザインシステム構築のハードルが下がるでしょう。 今回の記事では、「Adobe XD extension」の活用方法を紹介します。コーディングの際に活躍する拡張機能ではありますが、Adobe XDを使ったデザイン段階でのひと工夫も必要になりますので、デザイナーの方も理解しておくとプロジェクトの進行がスムーズになるでしょう。 「Adobe XD extension」と
VSCodeでAngularのコード編集を快適に2020
この記事はAngular Advent Calendar 2020の14日目の記事です。 はじめに 普段はJetBrains系のIDEを使ってAngularの開発をしているのですが、ふとVSCodeだとどんな感じになるのかなと気になり、調べてみました。 意外と網羅的にVSCodeのAngular向けの拡張などを紹介している記事がないような気がしたので、整理してみました。 ※本記事ではコードの編集に内容を絞り、テストやデバッグ等については扱いません 移動・検索系 TypeScript内での定義元への移動 VSCodeは標準でTypeScriptをサポートしているので、拡張は入れなくてもGo to Definitionで移動できます。 テンプレート→TypeScriptの定義元への移動 VSCode拡張：Angular Support テンプレート→TypeScriptの定義元へのプレビュー・
ダミーデータ作成のお供に！ VS Code 拡張機能「vscode-random」で人名やカラーコードなどを自動生成してもらおう！ | DevelopersIO
はじめに ダミーデータを作成しなければならないときってありますよね？ テストデータやサンプル画面を作るときに値をどうするか困ったことありませんか？ そういった悩みを VS Code で解決するための拡張機能が vscode-random です。 https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random デモ （GitHub リポジトリより引用） 拡張機能としてはカーソル位置にランダムな値を挿入するという単純なものなのですが、VS Code のマルチカーソル機能と組み合わせることで非常に強力な体験を得ることができます。 名前やメールアドレスの項目がある JSON や YAML に対し、複数の項目にまとめて値を挿入して作り上げるのは気持ちいいこと間違いなし！ 対応コマンド コマンド 説明 生成例
Laravelの開発時に入れておくべきVSCode拡張機能「Laravel Extension Pack」
はじめにPHPの開発時のエディターでよく利用するVisual Studio Code（以下、VSCode）ですが、Laravelのフレームワークで開発する際に入れておくべき「Laravel Extension Pack」についての導入方法の備忘録です。 このExtension Packですが、下記のプラグインがインストールされます。 Laravel Blade SnippetsLaravel 5 SnippetsLaravel ArtisanLaravel goto viewDotENVPHP DebugPHP IntellisenseEditorConfig for VS CodeVS Live ShareLaravel Blade Snippetsbladeファイルのシンタックスハイライトが有効になります。 また、コードの生成をコマンドで出来たりと、便利な機能が使えるようになります。
Visual Studio Code公式の設定同期「Settings Sync」を利用する - Qiita
はじめに これまでも「Setting Sync」という拡張を入れることで、複数のVisual Studio Codeの設定を同期することは可能でした。ただGithubやGistの設定がやや面倒な側面があり、初期設定が煩雑でした。 しかしVer.1.48でついに公式の設定同期機能「Settings Sync（紛らわしいですがこちらは複数形）」がリリースされました。以下の内容が同期可能です。 設定 キーボードショートカット ユーザースニペット 拡張機能 UIの状態（表示言語、アクティビティバー、パネル、画面レイアウト、コマンド履歴、同一通知の抑止） ここではその簡単な使い方と、何ができるのか簡単にまとめたいと思います。 なお公式ドキュメントはこちら。 https://code.visualstudio.com/docs/editor/settings-sync 事前準備 設定の同期を利用するた
VSCode に必ず入れておきたい拡張機能 - Qiita
普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ
[Firebase Extensions] Resize Images - Qiita
Summit2019で発表されたFirebase Extensions 今年のFirebaseSummit2019で発表されたFirebase Extensions! 生放送を見る前にFirebase Consoleに追加されておりなんだこれ？！と心踊る追加内容でした Firebase Extensionsの特徴として公式の言葉を借りると以下2つの特徴があります。 ユースケースに合わせて拡張機能を構成する 今回リリースされているのは9つの機能 Translate Textについてはすでに記事になってましたのでリンク付けさせていただきました 簡単にインストール 左下のExtensionsをクリックして使いたい機能をinstallしたら使えるようになるイメージです ボタンぽちぽちで画像のリサイズなどが可能になります。 便利なCloud Functionsのメソッドが誰でも使えるようになった感じ
![[Firebase Extensions] Resize Images - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7cd236bff94a10b1267e79086deb172e2a1871bf/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCRmlyZWJhc2UlMjBFeHRlbnNpb25zJTVEJTIwUmVzaXplJTIwSW1hZ2VzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1iNTQ0YjZlZDdlYTIxMDRjNmYxZDVhOTc5YjM2NjQyMw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBnaWlpaXRhJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01ODg4OGE1YmU0ZjY0NDMxZjVkOGMwZDI3Mjc3ZWUyYg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-RGl2ZXJzZQ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Ddff8758e070e3a18fd9318182c8391ad)
無料で画面をキャプチャしてムービーを録画・保存できるシンプルなChrome拡張機能「Aperture」 - GIGAZINE
ホームページの様子を紹介したり、アプリの操作手順を伝えるような短めのムービーを作りたいと思ったときに、「ムービーをキャプチャするソフトで撮影して、編集ソフトで編集してからエンコードして……」という手順を踏むのは大変です。無料のChrome拡張機能「Aperture」を使えば、キャプチャするアプリやウィンドウを指定するだけで、録画から編集、保存までをブラウザ内で一気に行うことが可能です。 Aperture - Simple Screen Video Recorder - Chrome ウェブストア https://chrome.google.com/webstore/detail/aperture-simple-screen-vi/jlbnmcnmjhcgdnbkdlgmibahbffjlnpa ブラウザ「Google Chrome」を使って上記URLにアクセスして「Chromeに追加」をク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
便利なのが登場！ これ一つでWeb制作に役立つ機能がたくさん使用できるChromeの拡張機能 -SuperDev
ソースコードの断片をスタイリッシュな画像にするVisual Studio Code拡張機能／Twitterなどで共有したいときに便利なインスタントプリントツール「Polacode」【レビュー】
ShowNote:「フロントエンド開発の便利ツール・設定・プラグインなど」を語るフロントエンドTechCafe #2 - HackMD
「これは革命」とまでは言わないけれど、Webサービスへのサブスク導入がめちゃめちゃ楽なのでぜひ知って欲しいStripeのFirebase Extensions - nabettu
