「Visual Studio Codeの教科書」を読んでVS Codeの設定をゼロから見直してみた - karaage. [からあげ]
追記：VS Codeの入門書をZennでリリースしました ブログで扱ったVS Code関連の記事をまとめて、無料の電子書籍としてZennというプラットフォームでリリースしました。よければ、こちらも参考にしてみてください。 Visual Studio Codeの教科書 Visual Studio Codeの教科書を購入しました。基本的な使い方から拡張機能の作り方まで、広く押さえられていました。 プログラマーのためのVisual Studio Codeの教科書 (Compass Booksシリーズ) 作者:川崎 庸市,平岡 一成,阿佐 志保発売日: 2020/04/30メディア: Kindle版 自分は拡張機能作りには興味なかったのですが、思わず手を伸ばしたくなりますね。拡張機能作りまで興味ある方にとってはかなり良い本ではないかと思います。 本を読むと、色々改めて発見があったのと、拡張機能一回
![「Visual Studio Codeの教科書」を読んでVS Codeの設定をゼロから見直してみた - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b8cf77980ab900ed339768901e94cfe2584441d7/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20200707%2F20200707003818.png)
ファイル比較 VSCodeのエクスプローラで、ファイル２つを選択して右クリックメニューから「選択項目を比較」で比較することができます。 また右クリックで、「比較対象の選択」をした後に「選択項目を比較」でも比較することも可能です。 VSCodeのSnippetの使い方 VSCodeのSnippetも便利です。似たような構造のクラスを実装する場合などや、プロジェクト共通で使いがちな書き方というものをSnippetに登録して、効率化することができます。 また、変数を持たせておくこともできます。この場合、Snippetを呼び出した後に変数部分にカーソルがあたるので、そこで変数部分をタイピングできます。 詳細は以下のリンクをご覧ください。 Visual Studio Codeに定型文（スニペット）を登録する方法 VSCodeのUser Snippetを活用しよう！ また後述するSnippet Gen
最近の開発者が最も好むドキュメント形式を挙げるとしたら断然マークダウンになるでしょう。マークダウンは、GitHub、GitLab、Bitbucketなど、タスクやイシュー管理に対応するほとんどのサービスにおいて、基本のドキュメント形式として使用されています。また、IntelliJ、VSCode、Vim、Emacsなど、ほぼすべてのテキスト編集ツールでも、プラグインを通じてマークダウン文書の強調構文やプレビュー機能を使用することができます。 TOAST UI Editorはここからさらに一歩進んで、マークダウンエディターとウィジウィグエディターを統合した形式のインターフェースを提供しています。ウィジウィグエディターを使用すると、テーブルなどの複雑な文法をより直感的に簡単に編集することができ、マークダウンに慣れていないユーザーでもマークダウン基盤の文書を簡単に編集できます。特に、開発者と非開発
Markdownをはやく効率よく書くために 前提として、マークダウンを編集するエディタはVSCodeを使います。 Markdownファイルを使って記事を管理している場合、マークダウンを効率良く書けるかどうかは生産性に直結します。 VSCodeの拡張機能と基本設定（スニペット）を使ってマークダウンを速やかに編集する方法について書いていきます。 よく使う機能にフォーカスしてその操作をイメージできる一般的なショートカットキーを使う（覚える）のがポイントです。 拡張機能があるならそれを使う Markdown All in One ショートカットや便利なコマンドが有効になる拡張機能です。たくさんの機能がありますが、利用頻度が高いものだけ使います。 太字にするショートカット テキストを選択した状態で、Macなら ⌘ + B 、Windowsなら Ctrl + B で太字になります。多くのエディタで採用
Vim やめます - Qiita
はじめに この度、長年連れ沿ったVimとお別れをすることにしました。移行先はVSCodeです。 正直に言うと、かなり前からVSCodeへの移行は検討していました。実際過去に何度もVSCodeへの完全移行は試しており、その度に挫折してきていました。 今回は挫折していた理由も含めてお話ししていこうと思います。 なぜ移行しなかったのか まず第一に、Vimをあまり普段使いしていないひとは驚くかもしれませんが、VSCodeに備わっている機能のうち、Vimではまったく出来ていなかったことというのは多くありません。Vimのlanguage serverとの連携は強固であり、定義ジャンプや補完・自動フォーマットといった動作もVSCodeとかわらず実現できます。Vimの中からGit関連の操作をすることも、ファイル操作も、デバッガを動かすことも、スニペット機能もmarkdownのプレビューも出来ていました。
VS Code でコミットするときに GitHub Copilot を使っていると コミットメッセージを生成してくれたりします。 図 1 コミットメッセージを Copilot で生成 英語苦手な自分からすると「マジうれしいんですけど」という感じなのですが、コミットメッセージはできればエディターで記述したいと考えてしまいます。 そこで今回は「コミットメッセージをエディターで編集する利便性」を維持しつつ、「GitHub Copilot による生成機能もできるだけ利用しよう」という内容のメモになります。 VS Code のエディターでコミットメッセージを記述するとは VS Code でコミットメッセージを記述する方法としてはソース管理タブの利用が一般的かと思われます。 図 1-1 ソース管理タブのフィールドから普通に入力 一方で上記とは別に、コミット用のコマンドを実行しエディターの中で記述する方
はじめに はじめまして、@nkato_です！ 普段は機械学習寄りのソフトウェアエンジニアとして、PythonでMLパイプラインを記述したりGoでバックエンド処理を記述しています。 便利アプリや各種ツールの拡張機能が好きで、これまでにも様々な機能を取り入れて試してきました。 自社エンジニア向けにそういったツールを共有したいと思ったのですが、どうせなら公開情報としてQiitaに投稿しようと思い立ち、まとめてみることにしました。 量は多いですが、どれもおすすめです！ アプリ Alfred ショートカットキーで検索窓を開いて、アプリ名で検索してアプリを起動するやつ アプリの起動以外でも、ファイルを開いたり計算したりできる 僕はアプリはAlfred経由でしか開かないので、ドックもランチャーもあまり使ってない App Storeのやつは古いので公式サイトからダウンロードする The Unarchive
【VSCode】おすすめの拡張機能 21選
はじめに 今回の記事では、主にバックエンド(PythonとTypeScript中心)を開発している私が使っているVSCodeの拡張機能を紹介する。 拡張機能 基本的にどのような言語でも対応できる拡張機能を紹介する。 Japanese Language Pack for Visual Studio Code VSCodeを日本語にできる。 REST Client VSCode上でgetやpostなどのHTTPリクエストを送信できる。GraphQLにも対応している。 GitLens — Git supercharged commit単位でファイルを比較したり、最新のcommitの内容を表示したりできる。 DeepL for Visual Studio Code VSCode上にて日本語から英語に翻訳できる。翻訳の精度が非常に高い。 JSDoc Generator JavaScriptのドキュメ
こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。 Markdown(マークダウン) とは、文章を記述するための軽量マークアップ言語です。プレーンテキストに対して「# 見出し」「* 箇条書き」などの文書構造を明示し、MarkdownエディタでかんたんにHTML生成することができます。 今回は、無料で使えるオススメのMarkdownエディタを厳選！ Windows/Mac/スマホアプリ対応している定番＆人気エディタを、おすすめポイントと合わせてご紹介します。ブラウザ専用のオンラインMarkdownエディタについては、以下の記事を参照ください。 参考： 【ブラウザ専用】オンラインMarkdownエディタ おすすめ4選 【便利ツール】MarkdownテーブルをExcelライクな操作で簡単に作成できるツール Markdownとは そもそもMarkdownとは、どのよう
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Visual Studio小説モード Visual Studio Codeで小説を執筆するための機能拡張です。 リアルタイム更新する原稿用紙プレビューで印刷時の組版に近い読み方を確かめつつ、会話と地の文、名詞や動詞、助詞などの品詞ハイライトを備えたエディターで執筆を行うことが可能です。句読点のぶら下げも行う原稿用紙プレビューは1行当たりの文字数を指定できますので、新聞原稿のように13文字や15文字といった短い行の文字送りを確かめながら執筆できます。 CSS組版システムVivliostyleを用いることで、原稿用紙プレビューと同じ字数行数で組版されたPDFも出力できます。 novel-writerは.txt、.mdなどのテキストフ
はじめに ぼく「Pythonistaのみんなは当然、日々の開発にエクセレントなIDEであるPyCharmを器用に使いこなして爆速開発しとるやん？」 ぼく「かくいうワイもPythonistaの端くれとしてPyCharm沼にハマって早半年以上経ったで。」 ぼく「でもな、ここ最近。」 ぼく「みんなどうやらPyCharmのインテリジェンスっぷりをよく理解していないんか、無料だからーとVSCodeとかいうツールを使っとるしているで！！！」 ぼく「これはけしからん！！！！！我らがPyCharmはこんなにすごいんだぞ！！！！！と威張ってやろうと思っていたんですが調べてれば調べるほど…」 ぼく「あれ？プラグイン組み合わせたらVSCodeで十分じゃね…？しかもめっちゃ軽い…無料でいいのこれ…と、感じる日々…」 こうして、僕のVSCode→PyCharm化計画が始まった… 目次 目次 VSCodeに求める機能
Visual Studio Code for the Web (vscode.dev) が Public Preview になりました - Qiita
Visual Studio Code for the Web (vscode.dev) が Public Preview になりましたGitHubAzureVisualStudioVSCodeAzureDevOps 皆さんごきげんよう。米国時間 10 月 20 日、Visual Studio Code for the Web (vscode.dev) の パブリックプレビューを発表しました。今日はこの vscode.dev について紹介いたします。 (2021/10/21 20:37 Update) (2022/02/18 12:20 Update) VS Code の January 2022 Update で、vscode.dev および github.dev での署名付き GitHub Commit がサポートされるなど、いくつかのアップデートを本記事に反映しました。 記事の該当箇所
近ごろの様子
2024年5月 自分の個人ウェブサイト内でのここの呼称を「かつてTwitterとして知られていたプラットフォーム」で統一したい (12時35分) Firefoxに昔からあったので、大して調べずにoverflow-inlineプロパティーを使い始めたら、全然実装されていなかった (7時2分) 東西線の工事の日を確認しているが、関係なかった (8時1分) 隠したテキストは検索できないことがあるので、ちゃんと表示するようにした(v9.30.5) (7時33分) ソフトミント色のAirPods Proとか出たら買っちゃいそう (18時52分) Kindleのマンガが1000冊を超えてしまい、1冊500円とすると50万円だなと思い、ブックオフで売りたい (18時52分) Firefoxのプライベート・ウィンドウのタブでは、ダークモード対応のfavicon.svgでダークモード側が選択されるという学び
Qiita初投稿で至らない点もあるかと思いますので、何かあればコメントにお願いします🙇♂️ はじめに 色々ソフトを漁るのが好きなのですが、おすすめソフト紹介を見てみてもMacのソフトばかりで、Windowsだったとしてもメジャーなソフトを紹介している人が多いなぁって思ったので備忘録がてら軽く紹介していこうと思います。 もしも他にもおすすめのソフトがあれば教えて頂けると嬉しいです！ 一部機能制限版を紹介しているものもありますが基本的にフリーソフトです。 タイトルにマイナー寄りと銘打ったものの社内向けに書いた資料がもとになっているのでメジャーなものも入っています。 また、おすすめ度の判定に業務に使えるかっていう視点が強く出ているのでその辺ご了承下さい。 wingetのIDが記載されているソフトは winget install -e --id <ID> のコマンドでインストールすることも可能
Visual Studio Codeの初期設定とメリット
作成：2019/06/24 Tool > エディタは一つだけ使うのではなく、AtomやVisual Studio Codeなどを用途によって使い分けるようにしています。今回はおすすめしたい初期設定をご紹介します。 エンジニア速報は Twitter の@commteで配信しています。 エディタの使い分け 以下のエディタは全て、Vim化できるのでVimを覚えれば効率よくコーディングできます。 フロントエンド / Atom スニペット管理、ブログ / Quiver フロントエンド、マークダウン / Visual Studio Code iOSアプリ開発 / Xcode（XVim2をインストール） Visual Studio Codeが使いやすいところ Visual Studio Codeは、デフォルトで様々な機能が設定されています。また、動作も軽いです。 マークダウンのシンタックスハイライト対応
このノートをプレビューすると、プレビュー画面に@excalidraw/excalidrawを使ったexcalidrawのエディタが表示されるので、そのまま編集できます。 編集したexcalidrawの内容は元の.excalidrawファイルに自動的に保存され、保存時にあわせて.excalidraw.pngファイルも作成します。 プラグインのオプションで、inline image widgets連携を有効にすると、書き換えるたびにエディタ側が参照する画像も更新して、エディタにレンダリング結果の画像を表示もできます。 プラグインの設定から次の設定をします。 saveDir: .excalidraw ファイルが自動的に保存されるディレクトリを入れる Enable integration for inline image widgets: inline image previewを使う場合はチェッ
自分メモです。 Visual Studio Codeで記事や書籍等を執筆するにあたっての環境を久しぶりに整えようと思ったのでせっかくならまとめておこうと思います。 vscode-textlint vscode-textlint は著名なテキスト校正ツールであるtextlintをVS Code上から実行するためのプラグイン。僕の場合はMarkdown形式で文章を書くことが多いんだけど、その校正をVS Code上でできるようになります。もちろんテキストファイルもOK。 なお、このプラグインを使うには事前にtextlintをOS側でインストールしておく必要があります。 ただ、OSの環境を汚したくないという人向けにここではRemote Containersの環境で利用することにしていきます。 といっても普通にRemote Containersで使うための環境を用意するだけです。ここではシンプルにN
VSCode と Marp で A4 マニュアルを作成する方法 背景 PowerPoint や Word で資料を作成するのが苦手なので、他に何か良い方法がないものかと探して見つけ出した手段を紹介。 というか、PowerPoint はそもそもスライド作成ソフトなので、それで書類作成するのはナンセンスですよね？ Marp もスライド作成ツール？ ……はて？ Word で作ればいい？ ……ちょっと何言ってるかわからないです。 というか、Word も PowerPoint も画像やデザインまわりの UI が煩雑すぎて正直苦手。 ちなみに、本来のスライド作成においても Marp はかなり優秀なので、そのあたりは各自で調べてみてほしい。 メリット 画像以外、全てテキストだけで作成できる マウス操作で細かい操作が不要、各サイズなどは数字入力で調整できる デメリット デザインの融通が効きづらい けっこう
使ってみよう！VSCode+mermaid
mermaidとは フローチャート等の絵をコードから作成できる、JavaScriptのライブラリです。 ……とはいえ普段JSに触れることがないのでワタクシはVSCode+Markdownで書いてます。 ちょっとしたタスクやスクリプトの処理を他の人にレクチャーしたり引き継いだりするときに、説明しつつササッと手を加えてプレビューできるのが良いな～！って思ってます。 なお、この記事ではグラフの形など、お作法的な箇所は無視してますし記載しません。 関連サイト様です！ 開発 様 公式マニュアル 様 環境の準備・説明 VSCodeインストールします プラグインで「Markdown Preview Mermaid Support」をいれます 補足ですが、Markdownを使うなら以下も入れておくと便利だと思います。（他にもおすすめあれば誰か教えて！） Markdown All in One1)Markd
VSCode使い必見！？使って便利な Visual Studio Code 拡張機能10選 | ソフトウェア開発のギークフィード
こんにちは。半年ぶりのはるです。関わる仕事も増え、結構忙しい日々を過ごしています。 自分の実力も少しずつついていってるかなぁ。。あの案件辛かったなぁ。。実になったけど。。とか。 もうすぐ半分が過ぎようとする今年に思いを馳せている今日このごろです。(なお外は土砂降り) 改めて、自分が使っている VSCodeの環境を見直してみた AtomとSublime。少し前に私がよく使っていたエディタなのですが、Atomは重いしSublimeは少し不安定。 なかなかエディタで決定打となるものはありませんでした。 ところが、Visual Studio Code (以下VSCode) を知って、一気に虜になりました。 軽い上に拡張機能がすごい量？名前やバックのあの会社からくっそ重そうな印象があったけどやるな！？ などと大変失礼なことを思いながらも、使っていったわけです。 今や、メインのエディタはこれ以外では考
全世界5億人[1]のMicrosoft PowerPointユーザーの皆さんこんにちは。Keynote、Google Slidesユーザーの方もこんにちは。本記事はtraP夏のブログリレー8月19日の記事です。 こんにちは。@d_etteiu8383です。突然ですが皆さんは課題や仕事で「プレゼン用のスライドを作ってくれ」と言われたらどんなソフトウェアを使って作成しますか？ ...え......? ......Microsoft PowerPoint.........!? 見出しやテキストの位置、フォントサイズをマウスでちまちまと調整する必要があったり[2]、閲覧に専用のソフトウェアが必要な[3]あのPowerPointを使っているのですか...? ...失礼、少し質問を変えましょう。皆さんはMicrosoft PowerPoint以外のプレゼン用スライド作成ソフトをご存じですか?もしパワポ
VSCode の設定のすゝめ はじめに みなさんこんにちは、GENEROSITY の西村です。 ご存知の通り、VSCode（Visual Studio Code）は、Microsoft が開発したフリーでオープンソースのコードエディタです。 非常に出来ることが多く、設定は自分好みにカスタマイズ可能で拡張機能も豊富です。 しかし、その力を最大限に引き出すためには、適切な設定が必要です。 設定を見直し、DX(Developer Experience)を向上しましょう！ おことわり 今回は、Mac の環境での設定について記載をします。 ショートカットキーは⌘(Cmd), ⌥(Option), ⇧(Shift), ^(Ctrl)を使用します。 適宜 Windows ユーザーの方は置換していただければと思います。 最後に本記事の私の考えや発言は個人の見解として捉えていただければと思います。 キーボー
webmanab.html
Visual Studio Code（VS Code）はデフォルトで Markdown を使って記述されたドキュメントをサポートしていますが、拡張機能でさまざまな追加機能をサポートしてあげると、最強の Markdown の記述環境を準備できます。 Markdown All in One Markdown All in One – Visual Studio Marketplace Markdown を扱う際には必ず入れておきたい最初の拡張機能だと思います。これを有効にすると ショートカットキーで Markdown を入力 画像の挿入時にパスの入力を補完 Markdown のアウトライン表示 md ファイルを開くと自動でプレビューを表示 といった機能が使えるようになります。 markdownlint markdownlint – Visual Studio Marketplace Markd
この技術ブログの生産性は「VSCodeでいかに効率良くマークダウンを書けるか」にかかっています。Markdownファイル(.md)を効率良く書いて、その見た目を速やかに確認するTipsをまとめます。 すぐに見た目を確認できればMarkdownが最強であるそもそも、Markdownがあまり好きではありません。 過去にアウトライナーアプリも試したことがありますが、どうもしっくり来ませんでした。 テキスト編集は最終的な見た目と一緒に確認したい派なので、自由に使えるなら見たものがそのま出力されるエディタの方が圧倒的に好みです。 Notionや最近のSlack UIアップデートを見ても、もはや死語になりつつあるくらい「WYSIWYG（ウィジウィグ：What You See Is What You Get）」がトレンドだと思います。 それでもMarkdownを使う理由は、構造をプログラミングで取り扱え
突撃！となりのマイ・エディタ ～愛用のエディタは何ですか？～ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、技術広報のsyoeshinです。 当社ラクスの開発では様々ツールを使ってますが テキストエディタを使用するケースも多く 若手もベテランも自分に合うテキストエディタ ”マイ・エディタ” を愛用してます。 テキストエディタ って種類が多くて ・結局どれを選ぶか？ ・となりのあの人は何を使っているか？ 気になりますよね。 そこで、今回は当社の若手からベテランにまで 普段愛用しているテキストエディターと おすすめポイントを聞きました。 質問：「愛用のエディタは何ですか？」 当社調査結果のグラフは以下 ●愛用エディタの調査結果 やはりと言いますか 当社ラクスで1位のおすすめエディタは ●VisualStudioCode ヤングからベテランまで幅広い層で支持 以下、愛用者達からのおすすめコメント 今や最主流なので便利プラグインや記事などもVSCode前提のものが多い。AtomやBracke
文系大学生が卒論をGit管理した話 - Qiita
沢山書き直したい。差分を確認したい。頑張った履歴を数値で残したい。Gitを実践的に利用して学びたい。 そんな思いから始まり、卒論提出までGitで管理しながらやりとげました。 これから論文をGitを使って管理しようと考えている人たちにこの記事が届いてほしいです。(特に、縦書きの人に) 構成 下記ツールを使いました。 エディタ : VSCode ファイル形式 : mdファイル gitストレージ : GitHub (private) gitGUIアプリ : SourceTree 資料管理 : Notion ファイル形式 提出形式が縦書き指定ということもありwordで使われるdocx形式が理想でしたが、gitHubでも閲覧・編集を可能にするためmd形式に落ち着きました。 SourceTreeではdocxファイルの差分も閲覧できるので、GitHubでの閲覧編集を考えていない場合はおススメです。バイナ
VScodeは今のままでも十分使いやすいですが、拡張機能を入れると更に使いやすくなります。言語別にご紹介しますので、気になる拡張機能があったら入れてみてくださいね！拡張機能の追加は、サイドバーに「EXTENSIONS」（左のアイコンの一番下）を表示させて検索してください。有効、推奨、無効になっている拡張機能も見れるので、定期的に整理しましょう。 基本設定・ビジュアル変更の拡張機能 HTMLの拡張機能 CSSの拡張機能 JavaScripの拡張機能 WordPressの拡張機能 （おまけ）ライティング・TODOリストの拡張機能 基本設定・ビジュアル変更の拡張機能 VSCodeの基本設定やビジュアルを変更する拡張機能をご紹介します。ちょっとした事ですが、見た目が変わるだけで作業のしやすさが変わります。拡張機能を使わないでテーマを変更したいだけでしたら、パレットコマンド（Mac : Cmd +
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
主にVSCodeではじめるPython開発環境構築ガイド | DevelopersIO
新しいマークダウンパーサーが必要な理由 | NHN Cloud Meetup
Markdown（マークダウン）をVSCodeの拡張機能とスニペットで効率良く書く - Qiita
VS Code + GitHub Copilot 環境でも git commit しちゃうんだな、これが
実際に使っていて便利だと感じたアプリ、Chrome拡張、ターミナル拡張、VSCode拡張まとめ - Qiita
【2024年版】Markdown(マークダウン)エディタ厳選まとめ＜Win/Mac/iOS/Android＞
novel-writer - Visual Studio Marketplace
VSCodeをPyCharmにする。 - Qiita
【マイナー寄り】Windowsで便利なソフトウェア集 - Qiita
excalidrawをinkdropでインライン編集できるプラグインを作った
VS Codeで執筆環境を整えるメモ - Sweet Escape
VSCode と Marp で A4 マニュアルを作成する方法
【まだパワポ！？】Markdownから爆速スライド作成【パワポが許されるのは小学生までだよね】
【DX向上】VSCodeの設定のススメ【Mac】 - Qiita
Markdownのブログ記事をVSCodeで効率良く書くための備忘録
【VSCode】言語別、おすすめ拡張機能１９選！拡張機能でストレスフリーなエディターを作ろう！