Haystack — the fastest path from pull request to merge. AI-powered code reviews that guide you through changes in logical order, keeping reviews fast and focused.
はじめに Pythonはコードが汚くなりがち（個人的にそう思う） そんなPythonくんを快適に書くための設定を紹介します。 拡張機能編 ここでは Pythonを書きやすくするため の拡張機能を紹介していきます。 1. Error Lens before 「コード書いたけど、なんか波線出てるよ💦」 記述に問題があった場合、デフォルトでは波線が表示されるだけ。。。 after Error Lensくんを入れることによって 波線だけでなくエディタに直接表示される。 はい、有能〜 2. indent-rainbow before Pythonくんは インデントでスコープを認識している。 for の f から下に線が伸びてるけど、ちょっと見にくいなぁ after 色が付いてちょっと見やすくなった！ 3. Trailing Space before 一見、普通に見えるコード after 末尾にある
はじめに 皆さんVisual Studio Code(以下VSCode)使ってますか？ 私はメインで使っているのですが、自分なりにしっくりくる設定や拡張機能がある程度揃ってきたので公開しちゃいます。 おすすめ設定だけではなく、おすすめの機能もできる限り紹介したいと思いますので、最後までぜひお付き合いください。 ※プログラミング言語固有の設定の解説は軽めですのでご了承ください。 GIF画像が小さい場合は、クリックして頂けると拡大して表示が可能です デフォルト機能編 Local History機能 Gitは非常に便利なので、皆さん使われていると思います。 Gitはコミット単位で履歴が管理できますが、保存単位で履歴が見れると嬉しいな、保存単位で復元できると嬉しいな、と思うことはないでしょうか。 私はVSCodeは自動保存をオフにして、手動で保存するので、保存単位で履歴が見れると嬉しいなと思うこと
なぜMarkdownか 記法が簡単で表現力が高い（※１） テキストなので差分管理がしやすい QiitaもMarkdown形式を採用している ※１ プレビュー機能があるとなおよい！ VSCodeを使うならこの拡張機能を入れてみよう Markdown All in One https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) まずはこれを入れていたら間違いないと思う！ 詳細は拡張機能の公開サイトを見ていただくといいですが、とりあえずのおすすめポイントは これを入れていたら大体の機能が使える（最初に入れるべき拡張機能） 便利なショートカットが用意されている 太字：Ctrl＋B 表のフォーマット：Alt+Shift+F パスの補完をしてくれる ファイルリンク（特に画像）のパスを補完してくれる
この記事はNuco Advent Calendar 2022の14日目の記事です。 VSCodeに必須の機能20個を紹介していきます。 インストール数と星の数は記事作成時点(2022年11月時点)のものです。 Japanese Language Pack for Visual Studio Code vscode-icons Code Spell Checker zenkaku Path Autocomplete Prettier - Code formatter indent-rainbow GitLens Git History HTML CSS Support Output Colorizer TODO Highlight vscode-random Atom One Dark Theme Trailing Spaces REST Client Live Server Jupyter
(追記) 自動ログイン機能が利用規約に抵触していたらしく、マーケットプレイスより削除されました。 GitHubにAPIを使ったものは残っているので、知識があれば動作させられるかと思います。（自己責任） これを使った再配布等の行動はトラブルの元なので控えた方がよいでしょう。 ChatGPT いいよね 最近一番メッセージやりとりしてるのChatGPTだし、なんなら1日にしゃべる量よりChatGPTと話してることの方が多い可能性まであります ChatGPTのチャットツール自体はこちらから参加して試せるわけですが、プログラムを書くときに使ったことのない言語やライブラリを開拓する際ここまで有難い存在はありません． このようにネット上を探し回ると地味に時間のかかる情報もチャット形式で手に入ります． さて、今回の話題ですが、我が愛しのテキストエディタ「Visual Studio Code」のChatGP
こんにちは。ソウゾウの Software Engineer (CTO) の @suguru です。連載：「メルカリShops」プレオープンまでの開発の裏側の1日目を担当させていただきます。 7月末にメルカリShopsという新しいサービスが公開されました。メルカリShops は、2021年1月にメルカリのグループ会社として設立したソウゾウが新たに立ち上げたサービスです。 この記事では、メルカリShops を作るにあたり、どういった技術、アーキテクチャを選定したのか、その背景と意思決定をまとめて共有したいと思います。 monorepo まず最初にプロジェクトをスタートしたときに、サービスのリポジトリを作るのですが、迷わず monorepo による構成を選択しました。monorepo は、システムを構成する複数のコンポーネントの独立性を保ちつつ、全ての構成を1つのリポジトリで管理する手法です。今
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場 WindowsやMacなどのデスクトップPCでVisual Studio Code（以下VSCode）を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで接続して操作することは、開発環境としてよくあることだと思います。 これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。 V
重くなる主な原因 VSCodeが重くなる最も一般的な原因は、インストールされている拡張機能の数や質です。その他の原因として以下が挙げられます↓ 大規模なプロジェクトを開いていると、VSCodeが必要とするリソースが増加 ファイル監視プロセス（watcherService）がメモリやCPUを大量に消費 TypeScriptプロジェクトでの型チェックやインテリセンスの負荷 1. 拡張機能の最適化【最重要】 重い拡張機能を特定する コマンドパレット（Ctrl + Shift + P）から「Developer: Show Running Extensions」を実行すると、各拡張機能の起動時間を確認できます。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連 フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他 拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。 この記事の対象者 プログラミング初心者の人 分野別におすすめの拡張機能を知りたい人 開発の生産性をより上げたい人 VSC
追記：最新のAIコーディング実践環境に関して 変化が激しい分野なので、以下記事でアップデートしています。本記事と基本的な考え方はそこまで変わっていませんが、ツールはかなり変わっていますので、以下記事ベースに、本記事も参考にしていただけましたら幸いです。 AIコーディング時代の到来 AIを使ったコーディングが話題になっていますね。私も個人のプロジェクトやデモで実験的に使っていますが、ちょっとしたアプリやツールなら、それこそ人間には不可能な速度で爆速で開発することができるようになり、その体験に驚き興奮しています。一方で「そんなに便利に思えない」とか「Cline(Roo Code)、Cursor、Windsurf、GitHub Copilot等たくさんAIによるコーディングサポートツールが出てきていて、どれを使えばよいのか分からない」という理由で、なかなか利用に踏み出せない人も多いのではないでし
昨日の自分「今作ってる曲まじで良すぎる。天才かもしれん」 今日の自分「ﾅﾆｺﾚ。曲作り下手すぎか～～」 この記事は新歓ブログリレー23日目の記事です。 こんにちは、カシワデと言います。サウンド班に所属していてパソコンで音楽を作っています。 皆さん、DTMってしってますか？ DTMとはDeskTop Musicという和製英語の略で、パソコンで音楽を作ることを広く指します。パソコンで音楽を作ると言っても昨今の曲は大体パソコンを用いて作られているので、DTMというと特に"打ち込み"のニュアンスが出るような気がします。 でも、『パソコンで音楽を作る～』とか『打ち込み』っ… 🎉入学おめでとう🎉まずは新入生の皆さん、ご入学おめでとうございます！！！これから始まる大学生活は非常に短いですし、世間で言われる程時間に余裕があるわけでは無いので、後悔の無い充実した生活を送ってください！
VSCodeを使いこなすには、まずはよく使用する操作のショートカットを覚えることです。コードを書くときに便利なショートカットとどのように機能するか視覚的に分かるチートシートを紹介します。 ショートカットはmacOS, Windows, Linux対応で、視覚的にどうなるか分かるので、記憶に残りやすいと思います。
VSCodeの画面編集という仕事柄、テキストエディタは毎日触る大事な仕事道具です。仕事の内容にあわせて設定などを変えると非常に捗ります。しかし、日本語を書きながら同時にはてな記法やらMarkdownやらCSSやらを書くという環境のため、なかなかテキストエディタのデフォルトの設定では痛し痒しといったところで、それなりにカスタマイズをしないといい感じになりません。 半年前に、それまでかなり長いこと使ってきた秀丸エディタからVSCodeに乗り換えてみたら、案外日本語をあれこれ書いたり編集したりするのにいい案配にすることができました。そこでなんとなくなじんだ今のカスタマイズ方法を書き残しておこうと思い立ちました。たぶんもっともっと拡張機能で便利にできるはずなので、ドラクエでいう「ひのきのぼうからこんぼうにそうびを変えた」くらいの気持ちで見ていただけるとうれしいです。 テーマ アイキャッチにしたのは
テキスト編集だけでなく、表計算やイラスト作成など、何かの目的を達成しようとした際には「どのツールを選ぶのか」が問題になってきます。テキストエディタの世界でVisual Studio Codeがその地位を不動のものにしつつある点について、ロビン・クリーンさんがデータをまとめています。 The Era of Visual Studio Code | Roben Kleene https://blog.robenkleene.com/2020/09/21/the-era-of-visual-studio-code/ ツール選びの一つの考え方は、「一番寿命が長いツールを選ぶ」というものです。どんなに慣れ親しんだツールであっても、開発が終了してしまうと新たなツールの使い方をまた最初から学びなおす必要があり、そうした苦労を避けるには人気があって長く使われているツールを選びたいところ。表計算やイラスト作
概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。 REST Client 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。 このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。 使用方法 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。 下記にcrudの例を載せていきたいと思います。 また今回はREST A
はじめに データベース設計のER図について、VSCodeなどで作成する以下３つの方法を比較した記事です。 Draw.io PlantUML Mermaid 以前、Webアプリケーションを作成した際には、 Draw.io を使用して、作図しました。 （そのアプリのER図を今回サンプル図としています） 最近、 PlantUML を利用するようになり、ER図や、シーケンス図、クラス図の作図に利用しているのですが、とても編集しやすいと感じています。 ただ、どのツールにも、一長一短あるかと思いますので、それぞれ以下目次の内容を書いて、ご紹介したいと思います。 目次 1. Draw.io 1-1. VSCodeでの使い方 1-2. ER図 1-3. 感想 2. PlantUML 2-1. VSCodeでの使い方 2-2. ER図 2-3. 感想 3. Mermaid 3-1. VSCodeでの使い方
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか（紐付けなし、ブランチ、タグ） を選択すると、リポジトリ直下に .tours/${指定したツ
VScodeだけでGit操作を完結させる方法について書くのだ。 👀その前に！ この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。 Git Graph - Visual Studio Marketplace GitLens — Git supercharged - Visual Studio Marketplace インストールしておいてほしいのだ。 ✅ステージング(git add ◯） 以下のようにするのだ。 ＋ボタンをクリック：ステージングする ーボタンをクリック：ステージングを解除する ▲ステージング→解除 ✅コミット名を自動でつける 右にある✨ボタンを押すと、コミット名を自動で決めてくれるのだ👇 ▲この例だと、変更内容が意味不明すぎて変なコミット名になってるし、現状英語だけみたい？ これは、GitHub Copilotの機能なのだ。 ✅コミット(git c
概要 VSCode のリモートコンテナ機能を用いると、開発環境を dockerfile の形でコード管理することができます。これにより、開発者が開発に用いる環境をリポジトリごとに統一できます。 VSCodeのリモートコンテナ機能とは コンテナの中に開発環境を押し込んで、その中にディレクトリをマウントして開発するVSCodeの機能です。 リモートコンテナ機能を用いて開発するメリット リモートコンテナ機能を用いて開発することには以下のようなメリットがあります。 local環境を汚さない 複数のプロジェクトで開発するにつれて、local マシンにはそのための様々なアプリ・設定が導入されていきます。この状態には以下のような欠点があります。 導入されたアプリや設定が膨大になって管理しきれなくなり、何のために導入されたか、変更してよい設定なのかが分からなくなる 異なるプロジェクトで必要な設定・アプリ同
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
これは何 備忘録も兼ねて、PCのセットアップで自分のやることをまとめてみました。 随時更新していく予定です。 VS Code VS Codeの環境設定 setting.jsonに下記を追加します。 内容はコメントで書いているので、詳細は省きます。 { "editor.fontSize": 12, // フォントサイズを変更 "editor.guides.bracketPairs": true, // 対応している括弧にガイドを表示する "editor.minimap.renderCharacters": false, // ミニマップに実際の文字を表示しない "editor.renderControlCharacters": true, // 制御文字を表示する "editor.renderLineHighlight": "all", // 現在の選択行をハイライトする "editor.r
去年8年ぶりに vimrc を書き直した時はLSPの体験があんまりよくなくてLSPなしでNeovimを使い続けていたのだが、様々な言語のOSSをメンテする都合で用途に応じてIntelliJとVSCodeとNeovimの三刀流で暮らしていた結果、可能ならNeovimに寄せたいけどそれならLSPを使いたいなということになり、今回LSPの所を真面目に設定し直して、かなり良い体験になっている。 正直Neovimの設定はVSCodeのそれに比べたら面倒なんじゃないかという印象がありサボっていた節があるが、実際にやってみるとVSCodeと同程度に簡単に済む方法もあったので紹介したい。 何故Neovimなのか LSPの話の前に、タイトルだけ見た人がそもそも単にVSCode使えばいいじゃんと言いそうなので、どうしてIntelliJやVSCodeではなくNeovimに揃えようと思ったのかについて書いておく。
突然ですが世の中には2種類のエンジニアがいます。 開発環境をずっと立ち上げっぱなしにするエンジニアと毎回落とすエンジニアです。 自分を含む毎回落とすエンジニアにとって、開発環境を立ち上げる度に複数のターミナルを開き、それぞれでコマンドをたくさん打たないといけないのは苦痛です🥺 そこでこの記事ではVSCodeでプロジェクトを開いたときに開発環境を自動で立ち上げる方法をご紹介します！ おまけで紹介するAlfredまで設定するとコマンド一発で開発環境が立ち上がるようになり、こんな感じになります！ ではいってみましょう！ 対象読者 開発環境を毎回落とすエンジニア VSCodeを使っている 開発環境を立ち上げるためのコマンドがたくさんあって毎回打つのがめんどくさい 環境 VSCode: 1.66.0 macOS Monterey Hello Custom Task! VSCodeでプロジェクトを開
こんにちは。ソウゾウのSoftware Engineer(CTO)の@suguruです。連載：メルカリShops 開発の裏側 Vol.2の1日目を担当させていただきます。 去年、2021年に開始した メルカリShopsの技術スタック についての記事を書きましたが、今回はリリースまでに採用した技術スタックが、半年通してどのようにアップデートしてきたかを共有したいと思います。 ローンチ時に採用した技術が、実際の運用でどのように変遷したのかを共有することで、技術スタックを考える際の何らかの参考になれば幸いです。 monorepo メルカリShops ではサービスに必要なコードを1つに集約する monorepo を採用しています。リリース後半年たってコード量はかなり増えてきましたが、monorepo に対する満足度は非常に高く、うまく機能しています。 サービス全体の見通しが良くなることと、すべての
マルチカーソル機能の使い時 筆者がマルチカーソルを使用したくなる場面を3つ紹介します。 1. 命名を一括変更するとき 変数名や関数名を一括で変更するときに、マルチカーソル機能を使うことで、短時間で変更を行うことができます。 命名を一括変更している様子 検索バーから一括変更する方法もありますが、その場合カーソルが残らないため上記GIFのように複数の命名を試行錯誤しながら変更することができません。 2. 特定の範囲に閉じた修正を行うとき 特定の範囲に閉じた修正を行うときにもマルチカーソル機能は有用です。 特定の関数に閉じた修正 こちらは検索バーから一括変更してしまうと、下のfuga()関数にも変更が適用されてしまいますが、マルチカーソル機能を使うことで意図した範囲の修正に留めることができます。 3. フォーマットを変更するとき 以下のGIFではCSVで定義されたデータをMarkdownのドキュ
AWS Toolkit for VS Codeとローカルマシン上でAWSをエミュレートするLocalStackが統合可能に。ローカルでAWS Lambdaの開発やテストが容易に Amazon Web Services（以下、AWS）は、Visual Studio Code（VS Code）の拡張機能として提供しているAWS Toolkit for VS Codeに、AWSのさまざまなサービスをローカルマシン上でエミュレートする「LocalStack」を統合する機能の追加を明らかにしました。 これによりローカルマシン上でAWSのサーバレスコンピューティング基盤であるAWS Lambdaに対応したアプリケーションの開発やテスト、デバッグなどがこれまで以上に容易になることが期待されます。 Serverless devs, your local testing workflow just got
SREチームマネージャーの藤原です。 LM Studio + Gemma 3 + Cline + VSCodeの環境を自由研究的に試用したので、その報告エントリです。 モチベーション プライベートでコードを書く際も最近はClineなどを使ってLLMを使ってコーディングをすることが徐々に増えてきました。 VSCodeとClineを組み合わせて外部サービスをつかってコードの変更作業を実施する場合、 何かコードの変更を依頼するたびに、財布の中身から少しずつお金が溢（こぼ）れていく感覚があるでしょう。 1回1回の額は少額とはいえ、多数回繰り返すとなかなかの金額になってきます。 会社では予算の範囲内であれば、利用できますが、個人開発の場合はなかなか躊躇してしまうこともあるでしょう。 また、先日Googleが公開したオープンなローカルLLMのGemma 3も話題になったりしています。 そこでAPI課金
{ "plpgsqlLanguageServer.database": "データベース名", "plpgsqlLanguageServer.user": "ユーザ名", "plpgsqlLanguageServer.password": "パスワード", "plpgsqlLanguageServer.definitionFiles": [ // glob をサポート。 "**/*.sql", "**/*.psql", "**/*.pgsql" ], // Language Server が対応するファイルの拡張子はデフォルトで ['*.pgsql', '*.psql'] です。 // （ SQLite など他の RDS と競合させないためです。） // '*.sql' のファイルも対応させたい場合は、下記の設定を追加してください。 "files.associations": { "*.sq
VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示されます。 Better Folding Better Foldingの特徴 Better Foldingのインストール Better Foldingを使ってみた Better Foldingの特徴 Better FoldingはVisual Studio Codeの機能拡張で、折りたたみ機能で求められるすべての機能を一つにまとめた拡張機能です。 VS Code標準の折りたたみ機能をより使いやすくします。 左はVS Code標準の折りたたみ、右はBetter Foldingの折りたたみ
はじめに もっとミニマルで簡単なポータブルな環境を! 自分自身の研究のための環境構築についてこれまで二本の記事を書いてきました. これらの記事から二年ほどたち, いくつかの点において不満点が出てきました. 特に, GCPや自宅のサーバー上でリモートで作業することが多くなってきたので, よりミニマルでポータブルな環境が必要になりました. 以下では, 現時点で最小限の努力で環境を再現ができることを目標にしたDockerベースのGitHubレポジトリのテンプレートとその使い方を紹介します. このテンプレートを用いて作られた環境は, 新たなコンピュータ上で最短4ステップで環境を再現できるようになります. git clone VSCodeの"Open in Remote Containers" renv::restore() dvc pull この環境とセットアップはこのレポジトリにテンプレートとし
GeekGig 『スタディサプリ x Showcase Gig』 〜フロントエンドを楽しむ〜 Links: p.6 [Deep Environment Parity CDNT 2019 - Speaker Deck](https://speakerdeck.com/spring_mt/deep-…
2023年6月にFigma Config 2023という、Figmaのカンファレンスが開かれました。そこでFigma上で開発をサポートするような機能が多数発表されました。 デザイナーとエンジニアの効率を上げるDev Modeなどの発表があり、エンジニアにとっても知っておきたい内容があります。 今回は発表にあった中でも特に開発に直結するFigma for VS Codeを紹介します。 Figma for VS Codeとは？ VS Code上でFigmaを使用したさまざまなことができる拡張になります。 ただVS Code上でFigma上のデザインを確認するだけではなく、Figmaと連携した開発速度を上げる機能やコミュニケーションをサポートする機能があります。 Figmaにコメントを送り、コメントの通知を受け取れる VS Code上からFigmaのコメント機能を使用して、UIの質問をすることが
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
