Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
# Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting This slides are used at VS Code Conference Japan 2024 https://vscodejp.github.io/conference-2024/ (15 ~ 20 minutes) ## References: - Extension API | Visual Studio Code Extension API https://code.visualstudio.com/api - The Biome Tool Chain https://fosdem.org/2024/schedule/event/fosdem-2024-2563-the-biome-toolchain/ - Mo
プログラミング支援AIサービスまとめ。GitHub Copilot、AWS CodeWhispererなど11種類（2024年3月版）
GitHub CopilotやAWS CodeWhispererをはじめとする、コードエディタに統合できる11種類のプログラミング支援AIをまとめた。 GitHub Copilotに代表されるコードエディタに統合されたプログラミング支援AIサービスは、まだ登場して間もないにも関わらず、多くのプログラマの生産性向上にとって欠かせない機能になりつつあります。 と同時に、プログラミング支援AIサービスはGitHub Copilot以外にもさまざまなクラウドベンダ、ツールベンダ、スタートアップなどが参入し、多様な製品が新たに投入され続けている変化の激しい分野でもあります。 ここではその中から、現時点での主要なサービスやソフトウェアを11種類取り上げ、まとめました。導入や選択の参考にしていただければと思います。 価格別の主な機能 （Copilot Individual ／ 月額10ドル／年間100ド
個人的Rails開発環境構築2024
新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開
Dendron
For full text search please use the '?' prefix. e.g. ? Onboarding Dendron Dendron is an open-source, local-first, markdown-based, note-taking tool. Think of it as a cache for everything that you care about - if you've spent more then five minutes solving a problem, you should never spent any more time solving the same exact problem. Dendron is a knowledge base built by and for developers and integ
ast-grep VSCode: 構造検索と置換の強力なツール
こんにちは、 ast-grepの作者Herringtonです。 正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。 そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換（SSR）という技術を利用して、より正確で効率的な検索と置換を実現するツールです。 構造検索は？ テキスト検索と置換の限界 例えば、JavaScriptコードをリファクタリングして、lodash の _.filter 関数をネイティブの Array.prototype.filter メソッド に置き換えたいとします。単純なテキスト検索と置換は次のようになります: これは一部のケースではうまくいくかもしれませんが、いくつかの問題があります。 一行の式しかマッチングできません。コードが複数行にまたがってい
VSCode + WSL makes Windows awesome for web development
I’m kinda shocked. Windows actually got good for web developers. Between VSCode, WSL, and Intel’s latest desktop chips, I’ve been living with a PC for over a week that runs my programming tests faster than an M3 Max, ships with an excellent window manager out-the-box, and generally feels like a completely viable alternative to macOS for working with the web. Hell, not just viable, but better in ma
保守・理解しやすいコードを書きたい！ 〜VSCode拡張機能で循環的複雑度と戦う〜 - Qiita
参考: 循環的複雑度 ちなみに githubで最もやべー関数を発掘するという記事では、循環的複雑度が高い関数が紹介されています。 ものによってはリンク切れしてしまっていますが、最も複雑度が高いのはnode（JavaScript）のjo関数で5505だそうです。想像もつかない... どのようにすれば循環的複雑度を低く抑えられるのか？ 計算方法から考えると、forやifによる分岐を減らしていくことが必要となります。 そのために、分岐の入るロジックを別関数として切り出し、１つの関数でやる事を絞り、分離することを理想として目指していきます。 とはいえ、いちいち複雑度の計算なんてしていられないですね。 そこで役に立つのが次のVSCode拡張機能です。 Code Metrics （VSCode拡張機能） この拡張機能は、TypeScriptやJavaScriptの関数・メソッドに循環的複雑度を表示して
Webサービスを作るときのテンプレートを作った - hiroppy's site
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場
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
Code Tour を使ってじっくり確実にコードを読む
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか（紐付けなし、ブランチ、タグ） を選択すると、リポジトリ直下に .tours/${指定したツ
VSCode のターミナル内で画像を表示できるようになったので試してみた
VSCode の更新情報で Preview features に「Images in the terminal」という項目がありました。 There is now experimental support for images in the terminal. Images in a terminal typically work by encoding the image pixel data as text, which is written to the terminal via a special escape sequence. The current protocols that are supported are sixel and the inline images protocol pioneered by iTerm. 個人的にはわりとうれしい機能なので少し試してみるこ
新時代のコードエディタ、Cursorのメリット・できることを網羅的に解説した
上記のようにコードエディタを開くコマンドを分けるために、既にcodeコマンドをVScodeで使っている方はcursorダウンロードの際にcursorコマンドのみインストールするようにしてください。codeの方もインストールすると、codeコマンドでVScodeとCursorどちらも開いてしまうようです。 Cursor主要機能紹介 cmd + Shift + L or cmd + L でGPTとChat機能 エディタ上で画面右にGPTに質問できるサイドバーが出現する。何も選択してないと無から質問できる状態になっていて、コードを選択した状態で開くとそのコードがあらかじめ引用された状態になっている(別の部分のコードもどんどん追加できる)。 ↑10~21行目をcmd + Lした後に31~33行目を追加でcmd + Lした画像 cmd + K でAI Edit機能 コードを選択した状態でcmd +
GitHub CopilotとのクイックQ&A
About ようこそプロジェクトに貢献するにはGeneral コード補完コメントからコードを生成コードからコメントの自動生成GitHub CopilotとのクイックQ&A正規表現プログラミング言語間の翻訳タイプヒンティング構造化データからのオブジェクト生成コードからドキュメントへClient Side Tips Copilot スニペットハンドリングGitHub Copilot ショートカット定義に移動便利なファイルのピン留めDesign Patterns AI が理解可能な命名規則一貫性のあるコーディングスタイルハイレベルアーキテクチャを先に小さなコードチャンクで作業するコンテキストレス・アーキテクチャ微細な OSS 依存関係の排除Collaboration AIフレンドリーなドキュメンテーションプロンプトとコード生成プロセスのコーチングTesting ユニットテストの作成テストコード生
Vimmer、Visual Studio Codeを使う - 詩と創作・思索のひろば
まだ汚れを知らない若者だったころに「プログラムはね、これを使って書くんだよ」と言われて以来Vimは友達だと思ってずっと（15年くらい）使ってきたが、最近は、とくに新しく何かを書くときにはVSCodeを使うようになってきた。コードを書く間隔が広がってきたせいか、新しい技術や言語に対応することができておらず、なんか最初からいい感じになってるエディタを重宝する。歳を取ってきたからなんだろうな、と素直に思うけれど、自分向けになにかをカスタマイズすることにあまり熱を感じなくなっていて、すでにあるよいと分かっているものに自分を調整していくことを選ぶようになってきた。 とはいえ身体はVimに慣れきってるのでVSCodeを使い始めたときはVSCodeVimを使っている……いた、というのが今回の話。よくできてるとは思うが、とにかくu（アンドゥ）の挙動が本家と違うのがどうも身体に合わない。逆にストレスが高まっ
チームで開発するならDev Containersで環境構築工程をスキップしませんか？ - Qiita
読み飛ばしてください みなさまどうも。 限界派遣SESと言われて心が折れるnikawamikanです。 最近、学生さんと一緒になんやかんや開発することがあり、その中で使ってみてよかった技術の中にDev Cointanersと言われる技術があります。 VSCode限定ではありますが、開発環境の差異を可能な限り埋めてくれるスゴイやつです。 さらに言えば新たにチームに参加するメンバーに開発環境の構築を逐一説明する必要もなくなるので、入れ替わりの激しい限界派遣SESにこそ使う技術です。 本題 前提として以下の環境はインストールされているものとします。 Docker docker compose (WindowsやMacの場合DockerDesktopをインストールしているのでインストール不要のはずです） VSCode OSは上記がインストールできるのであればわりとなんでもOKだと思います（例外はど
GitHub Copilot Chat の使い方｜npaka
2. GitHub Copilot Chatの開始「GitHub Copilot Chat」の開始手順は、次のとおりです。 (1) 「GitHub Copilot」のセットアップ。 「GitHub Copilot」のセットアップが必要です。 (2) VSCodeの拡張機能で「GitHub Copilot Chat」をインストール。 (3) チャットタブが追加されるので、クリック。 (4) チャットのメッセージボックスに質問を入力。 コードを開いて「このコードを説明して」と頼むと、次のように説明してくれました。 エディタでコードが選択されている場合、Copilot は選択した範囲に質問を絞り込みます。 3. スラッシュコマンド「Copilot」がより適切な回答を提供できるように、「スラッシュコマンド」を使用して質問のトピックを選択できます。 ・/explain : 選択したコードがどのように
Port forwarding local services with VS Code
Version 1.88 is now available! Read about the new features and fixes from March. Local Port Forwarding Support for port forwarding is built into Visual Studio Code via Microsoft dev tunnels, no extension required. When running a local web service, you can use the Ports view to make the service accessible to others over the internet. How to use local port forwarding First, you need to have a servic
Next.Nav
NEXT.NAV Navigate and Create routes easily in your Next.js application User friendly VSCode extension(10k+ downloads) Install the extension from VS Code StoreOpen a Next.js project that is using the App Router in VSCodeLaunch Next.Nav by clicking the icon on the status bar (have to have Next.Nav enabled on status bar icons)Alternatively, Launch Next.Nav by opening the command palette using (Ctrl+S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - yoavbls/pretty-ts-errors: 🔵 Make TypeScript errors prettier and human-readable in VSCode 🎀
GitHub - formulahendry/vscode-code-runner: Code Runner for Visual Studio Code
