VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
本連載では、VSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。VSCodeは、プログラミング以外の用途にも使えます。第10回では、VSCodeをドキュメント作成のためのテキストエディタ、Markdownエディタとして使う方法を紹介します。 はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げたりできることも大きいでしょう。 本連載では、このVSCodeにフォーカスし、基本
VSCodeの豊富な機能で編集を効率化しよう！―行操作、マルチカーソル、検索と置換、エディターグループを解説
本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。第9回では、VSCodeの持つ豊富な編集機能を紹介します。行操作、マルチカーソル、検索と置換、エディターグループを紹介します。 はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げたりすることも大きいでしょう。 本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発
C言語1000行でテキストエディタを作るチュートリアルをやった
結果的に1200行を越えましたが。 kilo 成果物はこれ↓ 参考サイトはこれです↓ インスパイア元↓ 感想 C言語は10年ぶりくらいに書いた 進めていくうちになんとなく思い出すことができた 最初にちゃんと授業で学んだ言語なので懐かしく思った Cに出会っていなければプログラミングしてなかったかもしれないので感慨深い しかしこのレベルのメモリ管理は正直たいへん 「この関数で確保したメモリはこっちの関数で開放されるので問題ありません」みたいな この調子でやっていったらバグる未来しか見えない 1000行・1ファイルというコンセプトは良いのだがファイル分けて管理したいナ〜〜と思った 配列や文字列の操作、メモリ管理がやりやすい別の言語で書き直したい Cを書くの大変だな…という感想を持った 速さはともかく他の言語で書きたい もっとimmutableに… お手本よりも行数が増えた 1行のif文などでもブ
Tailwind CSSを使う時に一緒に入れておきたいプラグイン・ライブラリ3選 - Qiita
Tailwind CSS IntelliSense VSCodeの拡張機能です。 公式提供のもので、エディタでのリンティングや自動補完を有効にしてくれます。 clsx 複数のクラス名を結合するためのライブラリです。例えばpropsで受け取った値に応じてスタイルを変えたい場合などに便利です。 例えば以下のように、基本的に適用するスタイルに加えてalertLevelに応じたスタイリングを適用するといった用途です。 import clsx from "clsx"; const className = clsx( "mt-4", alertLevel === "danger" && "bg-red-500 text-white", alertLevel === "warn" && "bg-yellow-500 text-black", alertLevel === "info" && "bg-bl
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
【サクラエディタ】CSVの中身をカラムごとにきれいに見たい - Qiita
はじめに CSVファイルをそのまま開くとデータが正しく表示されないことがあるので、サクラエディタで開く方も多いかと思います。 設定なしでサクラエディタで開いてもデータを見ることはできますが、データ量が多ければ多いほどごちゃっと見えてしまいます。 今回は、少しの手間でデータを見やすく設定する方法についてご紹介します。 サクラエディタ設定前だと。。 カンマ区切りで、ずらっと表示されます。 ▼ CSV ▼ サクラエディタ この状態だと、どのカラム名に対しての値なのかわかりづらいですよね。 カラム名が増えるとなおさらです。 サクラエディタの設定方法 ①"設定" > "タイプ別設定一覧" を押下 ②"追加"を押下 ③追加された設定（最終行）を選択した状態で、"設定変更"を押下 ④以下のように追記し、"OK"を押下 設定の名前 ：CSV ※任意 ファイル拡張子 ：csv ドロップダウンリス
なぜコーディングにVSCodeを使うのか。 私がVSCodeを選んだ理由
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 コーディングを始めたい、コーディングにVSCodeというものを使うということはわかってるけど、なぜこれを使うんだろう。VSCodeの何が便利なんだろう。と思っている初心者の方に特に読んでほしいと思い書いています。 VSCodeを使うようになったきっかけ コードエディタ難民だった自分がいくつか試したのちに、Adobeが開発していたコードエディタBracketsに出会いました。拡張機能も追加しやすくてテーマも選べるし、使いやすい。とBracketsで落ち着いていたのですが、ある時「サポート終了になる」ということを知りエディタは何を使おうか…となり、その当時使い始める人が少しずつ増えていたVSCo
2023年度版フロントエンド開発環境構築徹底解説 - Qiita
この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単
Cursorを日本語化する方法【忘備録】 - Qiita
今話題のエディタ「Cursor」のメニューバーを日本語化する方法メモ。 メニューバーから「View」→「Command Palette(Ctrl+Shift+P)」を選ぶ。 立ち上がったコマンドパレットから「Configure Display Language」を選択する。 「日本語(ja)」を選択する。 「日本語に切り替えるためにCursorを再起動するか？」みたいなウインドウが出てくるので、「Restart」をクリックする。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with
次世代のコードエディターCursorのメリデメ - Qiita
初めに 最近になって、コードエディターのcursorが話題になってきています。 自分は、１ヶ月前ほどから実際に開発環境で使い始めました。 そして、今まで使ってきた使用感をGitHub Copilotと比較して述べていきたいと思います。 そもそもvscode Likeに作られているため、vscodeの拡張機能はほとんどそのまま使えます。 うちの開発環境で使っている、ASP.NET Coreのdebuggerだけ使えませんでしたが...。 メリット 1. コード生成能力が高い cursorは、Command Kを用いて会話ベースでコードの生成を行うことができます。 GPT4ベースのコード生成は、copilotよりも明らかに生成能力が高いです。 そもそも、copilotはチャットベースでコード生成はできないですが...。 例 命令：ファイルを読みこむコードを書いて下さい。認めるファイルは、pdf
VSCodeをプログラミングエディタとして強化しよう！ 便利な設定や拡張機能を紹介
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
Vim から VSCode に移行して分かったたった１つの真実
導入経緯 当社は受注開発のIT企業である。2023年に長らくお世話になったVimの利用を辞め、VSCodeを使い始めた。 当社の実情 当社のエンジニアは2022年時点で全員がVimを使っていた。当時の案件はメインがRuby on Rails関連であったことも相まって、世に出回る便利なエディタ、IDEに関する情報感度が極めて低かった。 Rails案件ではVimを使うことに対して大きな問題はなかった。補完がある程度効けばバックエンドの実装に支障がないからである。エンジニアとしてそれでいいのかという葛藤は当然あったが、当社のエンジニアは日々の業務をこなすことに集中していた。 (設立当初から積み上げられた歴史としてのvimrc) 転機 ついにその時が来てしまった。 そう、Vue、Typescript案件が唐突に現れたのである。 当社のエンジニアは皆狼狽した。 Vimで培われた爆速タイピングは、es
VSCodeをWebサイト開発用ツールに ―HTML／CSS／JavaScriptエディタとして強化しよう！
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
とあるｺｰﾃﾞｨﾝｸﾞ初心者勢のエディタ遍歴
追記 初出では記事のタイトルを「とあるｺｰﾃﾞｨﾝｸﾞﾁｮｯﾄﾜｶﾙ勢のエディタ遍歴」としていました。 「ﾁｮｯﾄﾜｶﾙ」の意味を全く理解せずにタイトルに用いてしまい、不快に思われた方にお詫び申し上げます。 「ﾁｮｯﾄﾜｶﾙ」とはすなわち、Linus Torvalds レベルの超上級者のことをさす言葉ということを先ほど知りました。 もちろん自分は到底上級者とは程遠い存在であると自負をしております(記事を読んでいただければわかると思います)。 今年でコードを本格的に書き始めて 8 年目になる。 これまでに メインのエディタを 3 回変えているので遍歴を書いてみる。 (本記事では IDE は除く) Atom (2015 ~ 2017) 2015 年に大学に入学して、初めて自分のコンピュータ(MacBook Pro 13)を手に入れることができた。 小学生の頃からコードを書くことには興味があった
VSCodeが物足りない人へ AstroNvimの紹介
はじめに みなさんはエディタに何を使っていますか? 筆者は最近、VSCodeからNeoVimに乗り換えました。 NeoVimは自分好みにカスタマイズしていくエディタです。 この記事ではVSCodeに飽きちゃった人やNeoVimを使ってみたいけど難しそうだなと思っている人に向けてAstroNvim を紹介します。 AstroNvimとはオールインワンのNeovim環境です。 カスタマイズも簡単にできるため、NeoVim初心者にはとてもおすすめです。 筆者もAstroNvimからNeoVimに入門しており、いまも使い続けています。 AstroNvim のインストール Macの場合はbrewを使って簡単に導入できます。 brew install neovim git clone --depth 1 https://github.com/AstroNvim/AstroNvim ~/.config/
VSCodeのワークスペースを素早く切り替える
はじめに 普段VSCodeを利用しているのですが、複数のプロジェクトを並行して進めている場合にワークスペースの切り替えが地味に面倒だなと感じていました。。 何か簡単に切り替えれる方法はないかと調べていたところ、VSCodeの拡張機能「Workspace Explorer」がよさげだったので試してみました！ 事前準備 VSCodeの ファイル > 名前を付けてワークスペースを保存 から各プロジェクトのワークスペースを作成し、1つのフォルダにまとめて保存しておきます。 設定方法 拡張機能のインストール VSCodeの拡張機能から「Workspace Explorer」で検索し、インストールします。 拡張機能の設定 VSCodeの ファイル > ユーザー設定 > 設定 を開き、設定の検索から「workspaceExplorer.workspaceStorageDirectory」を入力します。
VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding
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の折りたたみ
「VSCode」での開発をよりスムーズに！基本的で役に立つ拡張機能を解説
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられるということも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
機能設計のコミュニケーションには図を使おう！エディタで作れるよ！ - Qiita
昨日の@wanomaedaさんの福利厚生編に引き続きまして、Wano Group Advent Calendar 2022の7日目の記事となります。 （子持ちではないのですが自分も弊社制度に助けられてます！子育てだけでなくただ生きることに対しても非常に有効です◯） 更新履歴 2022.12.07 初稿 2022.12.09 更新履歴を追加 2022.12.26 各図面の説明を追加 ネタバレ 以下の図面は大変便利な上にテキストエディタがあればつくれるよ！ 図面を書いてレッツコミュニケーション！ 特に役に立った図面 シーケンス図：クライアント・サーバ・DBの通信の流れを書くのに便利！ ER図：DBのテーブル構成を書くのに便利！ 使えるエディタ（ほかにもあるよ！） Visual Studio Code Notion はじめに こんにちは！@shibe_ です。TuneCore Japanでバック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ポート転送機能を内蔵した「Visual Studio Code」2023年8月更新（v1.82.0）が公開／「コマンド センター」と新しい差分エディターは既定で有効化、
