サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
What 最強の Developer eXperience な Server-sideTypeScript 開発環境を作ってみた。 あまり Server-side TS に詳しくないので、問題などあればご指摘願いたい。 Requirements 粒度バラバラだが、必ず実現したいのはこの辺り。TypeScript No tscbuild (Use swc or esbuild) yarn berry (v3)VSCode debuggerDocker compatible Hot reload Absolute path import Frontend engineer な人から見れば「何を当たり前のことを」と思うかもしれない。 でもこれらを Server-side Node.js で実現しようとすると意外と壁が多かった。特に NestJS はいろいろ困難。 TL;DR とりあえず
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックするとvscode の該当行に飛びます。 今のところ vite +react のみの対応ですが、仕組み上、あらゆるUI フレームワークに適応可能です。 何が起きているかTypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与するTypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
こんにちは、ちょっと前に 3 ヶ月半の育児休業から復帰したくらさわです。 なんと今日で生まれてちょうど半年です！早い！！ こちらの記事は Gunosy Advent Calendar 2021 の 16 日目の記事です。 昨日の記事は yamaYu さんの『EKS Managed Node Group でカーネルパラメータを変更する 』でした。 今回は Visual Studio Code (以下 VS Code) の拡張機能を開発した話 + α を書きたいと思います。 タイトルが全てです。 はじめに 作成した拡張機能拡張機能作成の流れ セットアップ Yeoman と VS Code Extension Generator をインストール Yeoman を実行プロジェクトを開く コード contributes.commands activationEvents activate 関数
初めに 最近開発環境を整備していて、コンテナでGoアプリケーションをリモートでデバッグするのにちょっと面倒だったので、自分のメモも兼ねてやり方を残しておきます。 要件プロジェクトによりますが、今の現場では主要エディタがVSCodeです。 もちろんVimユーザー（うち一人はぼく）がいるので、ターミナルでもデバッグできるように対応する必要があります。 また、コード変更を反映させるために都度イメージをビルドしてコンテナを再作成するは開発スピードが落ちるため、コンテナ再起動だけで反映されるようにする必要があります。 デバッガのしくみGoにはdelveというデバッガがあります。 delveはClient-Serverモデルになっていて、次の2つのプロトコルで通信が可能になります。 JSON-RPC DAP JSON-RPCはdelveのCLIに使われています。 DAPはMicrosoftが策定し
はじめに なぜ遅いのか 何をやるのか 計測 名前付きボリュームを使ってない場合 Named Volumeを使う場合Macからどう見えているか 結論とまとめ はじめに 以前からいろんなところで話していますが、僕は普段、手元のMacには言語系のランタイムとかは入れておらずVS CodeとDocker forMacだけ入れてRemote Containersの環境で開発しています。 この環境自体はとても便利でいいのですが、一点大きな問題があります。 それは遅いということ。自分の場合は最近だとJSでの開発が多いのですが、例えばNext.jsで開発している場合に以下のような操作が特に遅く感じます。 yarn install yarn add yarn jest next dev next start nextbuild yarn jestとかnext devが遅いのは起動だけだったりします。起
VS Code の「スクリーンキャストモード」使ってますか？ スクリーンキャストモードとは 百聞は一見に如かず。 お分かりでしょうか。どのキーを入力したのかが一目瞭然です。マウスもクリック時には赤丸が表示されるのでどこをクリックしたかが分かりやすくなっています。（マウス押下時の黄色はスクリーンキャプチャソフトが付与したものです） スクリーンキャストモードは VS Code 1.31 January 2019 で搭載された機能ですが、意外と知らない人も多く、私自身この機能の名前がパッと出てこないこともあったので今回改めて紹介してみました。 https://code.visualstudio.com/updates/v1_31#_screencast-mode スクリーンキャストモードを有効にする デフォルトではショートカットキーは割り当てられていません。コマンドパレットから Develope
突然ですが、皆さんはどのフォントでコーディングしていますか? monaco、Monospace、MSゴシックなど、等幅フォントを軸に種類は多種多様です そんな中、それらを尻目に私が使っているフォントはIosevkaというフォントです Iosevkaとは? 以下の特徴を持ったフォントです 等幅フォント 日本特有の文字種(㈱や㌕など)に対応 これらもきっちりと等幅を守っている リガチャ機能あり !=や<=など、特定の連続した文字列を合成して別の文字で表す機能 エディタもリガチャに対応している必要あり(VSCodeやAtom、iTerm2は対応しているので、大抵のエディタやIDEは対応していると思います) 特定の文字をプリセットの中から選ぶ事ができる プリセットから選んで、特定の文字のみデザインを変更することも可能 全体的な文字の太さ、デザイン、文字のゆとりも設定することが可能 特に 特定の文字
いろいろなJavaScript 系ライブラリの設定ファイルで型の補完が効くようにするためのJSDoc アノテーションまとめです。VSCode で確認しています。 リンクのついていないものは自分で型定義を探したものなので間違っている場合はコメントいただけると助かります。 他のライブラリの情報もコメント大歓迎です！
概要 eslint-plugin-prettier が非推奨になったらしい。 いつのまにか eslint-plugin-prettier が推奨されないものになってた | Knote 以下の要件を満たしつつ、ESLint の config から Prettier を分離したい。VSCode からフォーマッタを実行できる。 非VSCode 民でも npm script からフォーマッタを実行できる。 CI でフォーマッタ未適用コードをエラーにできる。 TL;DR src: https://github.com/arx-8/try-separate-eslint-and-prettier/commit/0d0f92201ca2102f20893b26fd23a902621aba41 やったことVSCode からフォーマッタを実行 以下の通り移行。 prev:拡張機能dbaeumer
今見ているファイル内をSearchしやすくする「Search in Current File」というVSCode拡張を作ったので紹介です。 https://github.com/shibayu36/vscode-search-in-current-file https://marketplace.visualstudio.com/items?itemName=shibayu36.search-in-current-file 背景Emacsにはhelm-occurという拡張があって、インクリメンタルサーチからスムーズにファイル内の検索結果一覧を見れる拡張がある。これが現在のファイルを探索するのに非常に便利で愛用していた。VSCodeでも同じようなことが出来ないかなと思ったので、勉強がてら拡張を作ることにした。 使い方 Search in Current File - Visual Stu
Visual Studio Codeでコードを書く時に知っていると便利なショートカットを紹介します。コードを書く時に自分がよく実行する操作のショートカットを覚えておくと、作業効率は格段にアップします。 21VSCode Shortcuts to Make Coding Faster and More Fun by jsmanifest 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめにVSCodeで利用できるショートカットのいくつかを見逃しているかもしれません。すべての人がすべてのショートカットを調べて、より速くコードを作成し、より多くの人に役立つショートカットを見つける時間があるわけではありません。 この記事では、より高速なプログラマーになるためのお気に入りのショートカットをリストアップしました。これらのショートカッ
概要 Visual Studio Code（以下VS Code）の拡張機能であるREST Clientが便利だったのでその紹介です。 使い方を文字とgifで説明していきます。 説明はマーケットプレース以上の情報を足していないので、英語に抵抗がなければ公式ページを照会してください。 REST Clientとは VS Code上でHTTPリクエストを送信し、VS Code上でレスポンスを確認できるVS Codeの拡張機能です。 マーケットプレースのREST Clientのページでインストールボタンをクリックするか、VS Codeの拡張機能アイコンをクリックして「REST Client」を検索してインストールボタンをクリックするかで使用できます。 文字だけではイメージし辛いかもしれないので、gifで見てみましょう。 左側のタブがリクエスト、右側のタブがレスポンスです。 ブラウザの拡張機能を使うで
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる id:hitode909です．Kyoto.なんか #4 に飛び入りでLTするための資料です．VSCode拡張を作ろう ここ2ヶ月くらい早起きして作っている友達作りのため様子を紹介 自己紹介はてなで働いているEmacs→Atom→VSCode 練習 祝日を挿入するコマンド gyazo.com const holidayList = "元日 成人の日 建国記念の日 春分の日 昭和の日 憲法記念日 みどりの日 こどもの日 海の日 山の日 敬老の日 秋分の日 体育の日文化の日 勤労感謝の日 天皇誕生日 元日 成人の日 建国記念の日 建国記念の日 振替休日 春分の日 昭和の日 昭和の日 振替休日 憲法記念日 みどりの日 こどもの日 海の日 山の日 敬老の日 秋分の日 秋分の日 振替休日 体育の日文化の日 勤労感謝
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要GitHub 上で、Swagger のyaml | yml | json を Swagger-UI に変換できるChrome拡張機能を作った。 その紹介。 「Swagger とは？」という話は、下記等を参照のこと。 Swaggerの概要をまとめてみた。 - Qiita Demo クリックするだけ。簡単に変換できる。 全展開・全折り畳みができて便利。 インストールChrome Web Store からインストールできる。 swagger-viewer -Chrome ウェブストア 特徴 簡単 1クリックで変換できる 依存な
vscode-read-aloud-textという文章を読み上げるVisual Studio Codeの拡張機能を作りました。 azu/vscode-read-aloud-text:VSCode extension that read aloudtext likeMarkdown andtextetc… Read Aloudtext - Visual Studio Marketplacevscode-speechを元にしていますが、vscode-read-aloud-textは文章の構造をパースしてから読み上げたり、読み上げている部分をハイライト表示する機能が追加されています。Markdownなどをパースして、コードブロックなどは読み上げないtextlintのプラグインを再利用してるので、現在対応しているのはMarkdown、Txt、Re:Viewのみ 読み上げるのはHe
あるいは、画像コメントのすすめ。 TL;DR 画像コメントのほうが意図が伝わりやすい 画像URLからツールチップで画像表示してくれるVSCode拡張機能があるよ その場で画像を作るSVGエディタもあったよ 問題提起 みなさんは、少し複雑なアルゴリズムを書くことになったときどうしていますか。 たいていの場合、いきなりコーティングに取り掛かるのでなく、 雰囲気をつかむためメモやホワイトボードに落書きすると思います。 特に幾何計算では簡単なものでも図を描いた方がいいです。こんな感じ。 図を書いたら後はコードに落とすだけです。 ね、簡単でしょう？ // 指定した直線を対称軸としたときの指定した点の鏡映位置を返す function flipVectorByLine(p: Vector,line:Line): Vector { // TODO: よくわかるコメントを書く const ln = ne
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
