最強 DX な Server-side TypeScript 開発環境を作ってみた (swc)
What 最強の Developer eXperience な Server-side TypeScript 開発環境を作ってみた。 あまり Server-side TS に詳しくないので、問題などあればご指摘願いたい。 Requirements 粒度バラバラだが、必ず実現したいのはこの辺り。 TypeScript No tsc build (Use swc or esbuild) yarn berry (v3) VSCode debugger Docker compatible Hot reload Absolute path import Frontend engineer な人から見れば「何を当たり前のことを」と思うかもしれない。 でもこれらを Server-side Node.js で実現しようとすると意外と壁が多かった。特に NestJS はいろいろ困難。 TL;DR とりあえず
React で展開された HTML 要素から vscode の生成元コードに飛ぶ 方法
自分が欲しかったから作ったシリーズ 説明しづらいので下記の動画を見たほうが速いです。 Shift を押している間だけオーバレイが有効になり、要素名をクリックすると vscode の該当行に飛びます。 今のところ vite + react のみの対応ですが、仕組み上、あらゆる UI フレームワークに適応可能です。 何が起きているか TypeScript transformer の仕組みで *.tsx の jsx 要素に data-sj-path="vscode://file/..." を付与する TypeScript AST は sourcemap 用の情報を持っている Node の parent を探索し、直近の関数コンポーネント名を探す Shift を押している間、 マウスでホバーされた要素が data-sj-path を持っているならオーバレイを表示 オーバレイ中の要素名をクリックした
フロントエンド開発にtextlintを導入して運用している話
フロントエンド開発にtextlintを導入して運用している話 2021.07.13 Tue. SaaSプロダクトのフロントエンド最前線@オンライン 近藤 大介 @diescake SmartHR プロダクトエンジニア ／年末調整チーム／主にWebフロントエンド（React + TypeScript） 2020年1月SmartHR入社 SmartHR年末調整チームを住処にして、2020年の年末調整の管理画面リニューアルから姿を現す クラフトビールをポチっては冷蔵庫に積む習性を持つ 経緯・モチベーション SmartHRの開発グループは、 フィーチャーチーム構想を掲げ、 クロスファンクショナル化の取り組みを進めています クロスファンクショナル化の一環で 文言（UXライティング）と向き合い始めたdiescakeであったが… 単純な表記揺れ・ルールに起因する不備を一掃したい PRでSuggested
いろいろな .config.js で型の補完を効かせる方法まとめ
いろいろな JavaScript 系ライブラリの設定ファイルで型の補完が効くようにするための JSDoc アノテーションまとめです。VSCode で確認しています。 リンクのついていないものは自分で型定義を探したものなので間違っている場合はコメントいただけると助かります。 他のライブラリの情報もコメント大歓迎です！
【2020冬】 TypeScript + Prettier + ESLint + VSCode の設定 - Qiita
概要 eslint-plugin-prettier が非推奨になったらしい。 いつのまにか eslint-plugin-prettier が推奨されないものになってた | K note 以下の要件を満たしつつ、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
GitHub上でSwaggerをプレビューできるChrome拡張機能を作った - Qiita
概要 GitHub 上で、Swagger の yaml | yml | json を Swagger-UI に変換できる Chrome 拡張機能を作った。 その紹介。 「Swagger とは？」という話は、下記等を参照のこと。 Swaggerの概要をまとめてみた。 - Qiita Demo クリックするだけ。簡単に変換できる。 全展開・全折り畳みができて便利。 インストール Chrome Web Store からインストールできる。 swagger-viewer - Chrome ウェブストア 特徴 簡単 1クリックで変換できる 依存なし この拡張機能のみで動作する Web の Swagger Editor を開いたり、ドキュメント生成サーバーを起動する必要なし セキュア（たぶん） 外部ネットワークへの送受信はないため、業務でも使用できる ※自己責任でお願いします たぶん Chrome の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
