ExcelやGoogleスプレッドシートをMarkdown出力するVS Codeの拡張機能「Excel to Markdown table」が便利すぎる件 | DevelopersIO
Markdownでテーブルを表現するにはつらみが深すぎる みなさんはMarkdownでテーブルを書くことは得意ですか? 私は苦手です。 簡単なテーブルは簡単に書けるのですが、以下のようなテーブルを書くことには抵抗感があります。 行数、列数が多い セル内に書くテキスト量が多い セル内でリストを表現する 一方、私は先日、「Markdownで手順を書いています!」とこちらの記事で伝えました。 そんな私に対して、 「オイオイオイ。 Markdownでもなんでもいいけどよォ... テーブルを使いたい場面は多いんだぜ。」 というセリフが聞こえてくる気がします。 私のようなMarkdownでテーブルを書くことにつらみを覚える方への解決策として、以下記事で紹介している「MarkdownTableMaker」があります。 このアドオンを使うことで、選択したスプレッドシートをMarkdownに出力してくれます
VSCodeのGitHub Copilotが色々便利になっていた件
はじめに 知らない間にGitHub Copilotが結構進化していたので、それらの内容を紹介します。 GitHub Copilot Chatは知っていたのですが、単なるChatGPTみたいな会話機能を追加しただけだと思っていました。 要約 右クリックメニューや#fileのようなコマンドが登場し、それを入力するだけでChatに見てほしいコンテキストを伝えることができるようになった。 ファイル単位だけでなく、選択した行やブロックに限定することもできる。 テストコードや新しいプロジェクトをコマンド一つで生成できるようになっている。 推薦の候補も複数を同時に比較できるようになった。 一度に最大10個くらい出る上、タブで保管できる。 ターミナルや編集中のファイルからコマンド一つでChatを立ち上げることができる。 特別なプロンプトを入力しなくても、開いた場所の文脈を読み取ってくれる。 右クリックメニ
【index.ts】そのVSCodeタブ名、わかりづらくない？【page.tsx】
はじめに VSCodeで、index.tsやpage.tsxなど、同名のファイルを複数同時に開いてしまい、わからなくなってしまったことはありませんか？ 実はよく見ると同一名称のファイルを開いているときには右側にディレクトリ名も表示されているのですが、薄い文字かつ、目線移動が必要で分かりづらいです。 この記事では、VSCodeの設定を変更することで、タブ表示名にディレクトリ名を含めて表示する方法を紹介します。 設定方法 VSCodeの設定ファイルsettings.jsonに以下の設定を追加します。 "workbench.editor.customLabels.patterns": { "**/index.*": "${dirname} .../${dirname(1)}", "**/{page,layout,template,route,actions,hooks,components,ut
【VSCode】オススメの拡張機能と設定 - Qiita
{ "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false, } この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。 以下は、この記事で紹介する拡張機能のカテゴリ一覧です。 設定ファイル関連(Yaml, Json, Toml) Git関連 Markdown関連 カラー系 API関連 コンテナ その他便利な拡張機能 ネタ系 設定ファイル関連(Yaml, Json, Toml) 特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。 Prettier esbenp.prettier-vscode jsonだけの設定では、VSCodeの設定ファイ
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
TypeScriptのエラーメッセージをわかりやすく変換するVSCode拡張機能「Pretty TypeScript Errors 0.2.8」がリリース
イスラエルのYoav Balasiano氏は、TypeScriptのエラーメッセージをよりわかりやすく変換する、Visual Studio Code向け拡張機能の最新バージョンとなる「Pretty TypeScript Errors 0.2.8」を、4月12日（現地時間）にリリースした。 Pretty TypeScript Errorsは、型に応じたカラーによるエラーメッセージの構文強調表示が可能で、関連する型宣言に移動するボタンや、typescript.tvにおける該当するエラーの解説に移動するボタン、ts-error-translatorでエラーメッセージを平易な英語に変換するボタンを備えている。 今回リリースされた「Pretty TypeScript Errors 0.2.8」では、フレームワークとランタイムのサポートが追加され、Astro、Svelte、Vue、MDX、JSDoc、
「有能なバカ」ChatGPTを使って1週間でiOSアプリを公開する方法
初めまして、にわとろです。 さて今回は、ChatGPTを使ってiOSアプリをイチから作ってみました。ChatGPTの記事なんてもうオーバーフローするほどあるのですが、今のところiOSアプリを最後まで作り通した記事はありません。 理由は簡単で、ChatGPTは「バカ」なのでiOSアプリなんて複雑なモノを完成させられないからです。 しかしバカも使いようです。上手く使いこなしてやれば、アプリだって作ることができます。ChatGPTはバカですが、有能なバカです。でもあなたがヤツをわかっていなければ、やっぱり無能のままです。だから、この記事を読んで理解してあげないといけません。 それじゃあ、ChatGPTと仲良くなりにいきましょう。 ChatGPTを使う極意 早速ChatGPTを使う極意を教えます。全部読み通せなくても、これだけは覚えてください。 いい上司になれ。 何を言っているかというと、Chat
[VS Code]ショートカットで文字を大きくする方法 〜Mac・Windows〜
プログラミングをはじめたばかりで、VSCode（Visual Studio Code）を使っていて、 「文字が小さくて見えづらいな」 なんて思ったことある人は多いはずです。 今回は、VSCodeで文字を大きくする（小さくする） かんたんショートカットをMac・Windowsユーザーへ向けてご紹介します。 MacでVSCodeの文字を変える方法 文字の拡大 MacでVSCodeの文字を大きくするには、 「shift」＋「command」＋「＋」 です。 文字の縮小 MacでVSCodeの文字を大きくするには、 「command」＋「ー」 です。 WindowsでVSCodeの文字を変える方法 文字の拡大 WindowsでVSCodeの文字を大きくするには、 「command」＋「＋」 です。 文字の縮小 WindowsでVSCodeの文字を大きくするには、 「command」＋「ー」 です。
ChatGPTのVSCodeプラグインが神すぎる件について
(追記) 自動ログイン機能が利用規約に抵触していたらしく、マーケットプレイスより削除されました。 GitHubにAPIを使ったものは残っているので、知識があれば動作させられるかと思います。（自己責任） これを使った再配布等の行動はトラブルの元なので控えた方がよいでしょう。 ChatGPT いいよね 最近一番メッセージやりとりしてるのChatGPTだし、なんなら1日にしゃべる量よりChatGPTと話してることの方が多い可能性まであります ChatGPTのチャットツール自体はこちらから参加して試せるわけですが、プログラムを書くときに使ったことのない言語やライブラリを開拓する際ここまで有難い存在はありません． このようにネット上を探し回ると地味に時間のかかる情報もチャット形式で手に入ります． さて、今回の話題ですが、我が愛しのテキストエディタ「Visual Studio Code」のChatGP
VSCodeにChatGPTの拡張機能を入れてコードレビューやバグを発見してもらう - Qiita
ChatGPTとは？ OpenAIが開発するGPT-3という言語モデルをベースとした(執筆当時)チャットアプリです。 こちらの質問に対して、AIが色々な質問に答えてくれて、一般的な内容だけではなく、コードレビューやバグなども発見してくれるめっちゃ凄いやつです。 細かい内容は以下の記事がとても参考となります。 筆者の関連記事 VSCodeと連携して、ブラウザを開かなくてもChatGPTを使用できるようにする 通常はブラウザを開いて使用するのですが、コーディング中にサクッとレビューしてもらったり、バグを見つけてもらえるような拡張機能があったので、そちらの設定方法について記述してみます。 今回インストールする拡張機能 使用までの手順 環境 PC: MacBook Pro (Apple M2) OS: macOS Ventura 13.1 VSCode: v1.74.3 OpenAIの価格について
VSCode で 定義へ移動などしたあとに 戻る には Ctrl + - (Mac) だ
TL;DR F12 などで定義へ移動したあと、さっき見てたところに戻れる。 これを知ってるだけでコードリーディングがかなり早くなるので覚えておきたい。 （以下はデフォルトの割り当て） ＜さっきいたとことに戻る＞ VSCode キーボードショートカット コマンドID workbench.action.navigateBack Mac Ctrl + - Windows Alt + Left（左矢印キー） ＜戻った後、さらに戻る（進む）＞ VSCode キーボードショートカット コマンドID workbench.action.navigateForward Mac Ctrl + Shift + - Windows Alt + Right（右矢印キー） 参考 Key Bindings for Visual Studio Code https://code.visualstudio.com/docs
vscodeでsquashしてコミットをまとめる | 日々報道
vscodeでコミットをまとめる方法を書いておきたいと思います。 コマンドで言うと「rebase -i」となるみたいですね。 参考：gitのコミットの歴史を改変する(git rebase) 1 / 2 squashしてコミット履歴をまとめる 下記のようなコミット履歴があるとします。 「ta」「ti」「tu」「teto」をまとめて一つのコミットにしたいと思います。 1.まとめたいコミットの一つ手前のコミット履歴を右クリックする。 (今回の場合は「sasisusesoを追記しました。」を右クリック) 2.「Rebase current branch on this Commit」をクリックする。 3.「Launch Interactive Rebase in new Terminal」にチェックを付ける。 4.「Yes, rebase」をクリックする。 エディタに下記のようなコミット履歴が表示
Visual Studio Codeの設定ファイルを共有してチーム開発をより快適にする | フロントエンドBlog | ミツエーリンクス
2021年8月30日 Visual Studio Codeの設定ファイルを共有してチーム開発をより快適にする UI開発者 太刀川 .vscodeディレクトリとは何か Visual Studio Code（以下、VSCode）を既に使用されている方ならご存知かと思いますが、作業ディレクトリ固有の設定を行った際に.vscodeというディレクトリが作成されます。 一般的にはsettings.jsonなどが作成され作業ディレクトリの設定が記録されます。 .vscodeディレクトリに関しては.gitignoreなどでgitの管理対象外とする場合もありますが、設定を共有することによるメリットなども存在するため、今回は実例を交えながらメリットについて紹介いたします。 今回ご紹介する内容はVisual Studio Code version 1.59.1 時点の情報をもとに記載しています。 共有できる設定
VSCode のおすすめ拡張機能と便利な設定、キーバインド集 2022
主にフロントエンドを開発している、ぼくがかんがえたさいきょうのVSCodeを紹介します。 便利な設定, キーバインド集だけでも参考にしていただけると幸いです。 2023年度版 拡張機能 まずは言語問わず使えるものを紹介していきます。 Japanese Language Pack for Visual Studio Code vscodeを日本語にする。 Path Intellisense ファイル名を autocompletes します。 GitLens — Git supercharged commit単位でのファイル比較、最新のcommit内容表示 REST Client vscode上でgetやpostなどのHTTPリクエストを送信できます。 また、GraphQLにも対応しているみたいです。 Todo+ コメントにToDo: を入れるとToDoを作成することができる。 例外処理を入れ
VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
VS Code の画面を共有するときはキー入力が見える「スクリーンキャストモード」を有効にしてみよう | DevelopersIO
VS Code の「スクリーンキャストモード」使ってますか？ スクリーンキャストモードとは 百聞は一見に如かず。 お分かりでしょうか。どのキーを入力したのかが一目瞭然です。マウスもクリック時には赤丸が表示されるのでどこをクリックしたかが分かりやすくなっています。（マウス押下時の黄色はスクリーンキャプチャソフトが付与したものです） スクリーンキャストモードは VS Code 1.31 January 2019 で搭載された機能ですが、意外と知らない人も多く、私自身この機能の名前がパッと出てこないこともあったので今回改めて紹介してみました。 https://code.visualstudio.com/updates/v1_31#_screencast-mode スクリーンキャストモードを有効にする デフォルトではショートカットキーは割り当てられていません。コマンドパレットから Develope
VSCode に Code Spell Checker を導入して typo と戦う - Qiita
✖ この記事は ACCESS Advent Calendar 2018、7日目の記事です。 こんばんは！ @diescake です。 突然ですが、皆さん！ typo してますか！？ 今年も一度はコードレビューで typo を指摘されたのではないでしょうか？ また、苦虫を噛み潰したような苦悶の表情で typo を指摘したのではないでしょうか？ 自分自身もそれなりの typo をこの世に産み落とし、多くの人を不幸のどん底に陥れました。 レビューの網を掻い潜った typo 達一行は master の奥深くに潜み、 数多の親・家族・友人を浄化したエンジニアに対して復讐の炎を滾らせ、虎視眈々と production へデプロイされるチャンスを狙っているのであった… typo の定義 先に断っておくと、ここでいう typo とは、クラス・関数・変数名、文言などのスペルミスを指していて、 多くの場合、動
VSCodeのマルチカーソル練習帳 - Qiita
VSCodeを使いこなしている人がカーソルを複数置いて手早く作業してて、カッコいいなと思ったことありませんか？こんな感じで。 私はマルチカーソル使います(キャー素敵！)。冗談はさておき、VSCode使ってる人全員がマルチカーソル使ってるわけではなさそうだと最近知ったので、基本をまとめてみました。 なお記事では、以下のテキストをサンプルとして使用しています。お手元にVSCodeを用意できる方は、サンプルを使って同じ操作を試しながら覚えてみてください！ { "id" : "12345678-1234-1234-1234-123456789012", "title" : "myTitle", "content" : "myContent", "createdAt" : "2019-09-01 00:00:00", "createdUser" : "12345678-1234-1234-1234-
VSCode: 拡張機能「bookmarks」が便利
Visual Studio Codeの拡張機能「bookmarks」を使うと、 ブックマークのようにファイル上に印をつけて、印の間を移動することができます。 秀丸でのマーク機能のようなものです。 使い方次第で、アウトライン機能としても使えるので、 大きなファイルを扱うときに便利です。 ここでは、拡張機能「bookmarks」の使い方を紹介します。 「bookmarks」のインストール 拡張画面の検索ボックスに「bookmarks」と入力すると、 一番上に表示されるので、インストールボタンをクリックします。 インストールした時に、説明ページが表示されます。軽く目を通しておくとよいでしょう。 下図の両端に青い小さな四角が表示されています。これがブックマークです。 Bookmarks Toggle: 「Ctrl + Alt + K」 ブックマークの設定・解除 Bookmarks jump to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to change the blame line color · Issue #1089 · gitkraken/vscode-gitlens