You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
editorに関するhush_inのブックマーク (53)
-
hush_in 2024/11/27
-
Neovim で VS Code みたいにコーディングする
はじめまして、新卒1年目エンジニアの出口です。 私は以前 Visual Studio Code (VS Code) を使ってプログラムを書いていました。 VS Code はインストールしたらすぐに様々な言語でコーディングを始めることができ、便利です。 ただ、VS Code の統合ターミナル上のシェルと、VS Code のキーボードショートカットが干渉してしまうことが多い点では不便だったため、Neovim に移行しました。 移行してみてしばらく経ち、さほど不満は出てこなかったので、Neovim で開発することで感じたメリットと、VS Code から体験を落とさずに Neovim で開発するために使っているプラグインを記したいと思います。 Neovim とは hyperextensible Vim-based text editor (https://neovim.io/ より) ターミナル上
-
Mermaid Graphical Editorを使うとVSCodeでサクサク図が書けるよ
Mermaid Graphical Editor VSCodeの拡張機能です。 Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。 逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。 vs Draw.io Integration 類似ツールとしてDraw.io Integrationがあります。 こちらは.drawio拡張子のファイルをVSCodeで作成すると、draw.ioのエディタが開いて作図ができるツールです。 しかし、draw.ioはあくまで図が書けるところを生業としていて、作成したdraw.ioファイルをマークダウンファイルに埋め込むには画像としてexportが必要です。 できれば自分はマークダウン以外のファイルを作らず、一つのマークダウンファイルだけで完結したいと思ってま
-
-
JetBrains、JavaScript/TypeScriptのためのIDE「WebStorm」と.NETのためのIDE「Rider」、非商用利用ならば無償で利用可能に。RustRoverやAquaに続き
JetBrains、JavaScript/TypeScriptのためのIDE「WebStorm」と.NETのためのIDE「Rider」、非商用利用ならば無償で利用可能に。RustRoverやAquaに続き IntelliJ IDEAなどの統合開発ツールやKotlin言語の開発などで知られるJetBrainsは、JavaScript/TypeScriptのためのIDE「WebStorm」と.NETおよびゲーム開発のためのIDE「Rider」を、非商用利用ならば無償で利用可能にすることを発表しました。 @WebStormIDE と @JetBrainsRider をご利用の皆様へ嬉しいお知らせです！WebStorm と Rider の非商用利用が無料になりました。 詳しい内容はブログ記事をご覧くださいhttps://t.co/U45rZKvIrm#JavaScript #TypeScript
-
-
Vimの操作感を愛おしむ人たちへ: Zedで広がる新たな可能性 - ROUTE06 Tech Blog
ソフトウェア開発の世界は日々進化していますね。その中で、私たち開発者が使うツールは、まさに職人の道具のように大切なもの。常により良い方法を探し求めているのは、皆さん同じではないでしょうか。 そんな私たちの前に現れたのが、Zedです。このエディタ、一見するとただの新顔に思えるかもしれません。でも、その中身は、私のようなVimmerの心をしっかりと掴みました。なぜならZedは、Vimの精神や操作感を大切にしながら、現代のテクノロジーを駆使して作られているからです。 私は1年ほど前からZedを使い始め、すぐにルックやデザイン、全ての動作が期待通りかつ、速く完了する様子に魅了され、使い続けています。 筆者のZedのキャプチャ 機能的にはVSCodeが優れているし、AI Code EditorのCursorも盛り上がっていますが、もっと速く、たくさんコードを書きたい開発者の方にはZedという選択肢が
-
なぜVimmerの僕はマルチカーソルを必要としないか
はじめに VSCode などのテキストエディタには、マルチカーソルという機能があります。 これは、エディタ上に複数のカーソルを出現させ、一度に複数の場所に同じ操作を行うことができる機能です。 VSCode上でのマルチカーソル 自分はVSCodeをメインとしていた時にはこの機能を多用していたのですが、Neovimに移行してから一切使っていません。 一応Vim/Neovimにもマルチカーソルを実現するプラグインがいくつか存在します。 ですが、一度は入れてみるものの結局使わないままアンインストールしてしまいました。 ではなぜ、マルチカーソルが必要なくなったのか。 それはVim/Neovimの操作体系/機能が十分に強力であるので、マルチカーソルを使わなくても同じことができるからです。 この記事では、自分がVSCodeのマルチカーソルで行っていた操作をVim/Neovimの操作体系/機能でどのように
-
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
-
-
ast-grep VSCode: 構造検索と置換の強力なツール
こんにちは、 ast-grepの作者Herringtonです。 正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。 そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換（SSR）という技術を利用して、より正確で効率的な検索と置換を実現するツールです。 構造検索は？ テキスト検索と置換の限界 例えば、JavaScriptコードをリファクタリングして、lodash の _.filter 関数をネイティブの Array.prototype.filter メソッド に置き換えたいとします。単純なテキスト検索と置換は次のようになります: これは一部のケースではうまくいくかもしれませんが、いくつかの問題があります。 一行の式しかマッチングできません。コードが複数行にまたがってい
-
Atom の作者達が作った Rust 製エディタ Zed (OSS) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. 概要 2024年の1月24日にZedがOpen source化しました! ということで、Zedとは何か、実際に使ってみてどうだったかというのを簡単にご紹介できればと思います。 2. Zed とは何か? AtomとTree-sitterのクリエイターによる、Rust製のコードエディターで、OSS (オープンソースソフトウェア) であり、 Githubのリポジトリ こちらで公開されています。 公式サイトから一部抜粋すると下記のような特徴があるようです。 2.1 パフォーマンスを重視した設計 2.2 インテリジェンス系のサポート Git
-
Code Tour を使ってじっくり確実にコードを読む
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか（紐付けなし、ブランチ、タグ） を選択すると、リポジトリ直下に .tours/${指定したツ
-
iOSブラウザで快適に書けるエディターを作るの大変すぎ問題
iOSのブラウザ（Safari、Chromeなどなど）で体験の良いWYSIWYGエディタを作るのは無理ゲーである。色々と理由はあるが、いちばん辛いのはバーチャルキーボード（オンスクリーンキーボード）を表示したときの挙動だと思っている。 キーボードが表示されているときにposition: fixedが効かない WYSIWYGエディタではテキストの装飾や画像挿入などのボタンを画面のどこかに固定したくなることが多い。 しかし、iOS Safariではキーボードが表示されているときにposition: fixedなどのCSSだけで画面上に何かを固定させることが難しい。 position: fixedとbottom: 0 やtop: 0を使っても要素が画面に固定されない仕様となっている（これはposition: stickyにしても同じ）。 ワークアラウンドも上手く動かない noteやscrapbo
-
新時代のコードエディタ、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 +
-
-
Tiptapでオリジナルエディタをつくろう！
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 今回はHeadless Editor FrameworkであるTiptapのご紹介と、そちらを使ってオリジナルなエディタを作成しようと思います。 Tiptapとは TiptapはHeadless Editor Frameworkと呼ばれています。 これまでWebでのWYSIWYGエディタとしてQuill.jsやDraft.jsなどが存在しました。 これらは文字の装飾や文章の編集に関するUIをデフォルトで提供しており、エディタに特別な機能を追加しようとしたり、UIを大きく変えるというのは少々大変でした。 TiptapのようなHeadless Editor Frameworkは、エディタで必要な機能のコア機能を提供し、必要なUIや機能は拡張機能として追加できるような仕組みになっ
-
Language Server Protocol の仕様 及び実装方法
Language Server Protocol通称LSPの仕様と、各機能をどうやって実装したら良いかの指針を示します。 対象読者 * 言語処理系を実装する人/したい人 * Language Serverを実装する/したい人 * LSPに興味がある人、日本語のまとまった情報源を探している人 * Language Serverがエディタの裏でどのようなことをしているのか気になる人 本書で解説される機能は以下の通りです。 * Diagnostics (検査) * Completion (補完) * Inlay hint * Hover * Goto definition (定義へ移動) * Find references (参照を表示/移動) * Rename (名前変更) * Code actions * Code lens * Signature help * Command * Docu
-
Online Mermaid Visual Editor | Mermaid Flow
Mermaid Flow is a Visual Mermaid live editor that aims to simplify creating Mermaid JS Diagrams online. Currently Mermaid Flow supports Flowchart diagrams, giving you the ability to Drag and Drop nodes, edges and labels to create your Flowchart diagrams visually. This mermaid live editor is useful for creating and maintaining complex diagrams such as Software Architecture diagrams. Once drawn, sim
-
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました