VisualStudioCodeは大人気なだけあって、有能なエクステンションが次から次へと出てきますね。 色々とっかえひっかえ試して遊んでいる人も多いのではないでしょうか。 なんかMinecraftのMOD環境構築と同じ空気を感じますね。 (環境ができたところで飽きて遊ばなくなる) まあ一番手っ取り早いのは、既に評価の固まっている手堅いエクステンションを導入することです。 ということで以下はSahil Bondre( Twitter / GitHub / LinkedIn / Instagram / 個人HP )による記事、💡 10 VS Code extensions I can't code withoutの日本語訳です。 💡 10 VS Code extensions I can't code without VSCodeは私のお気に入りのエディタです。 存在するコードエディタの

シナプスの技術部 システム開発課の蔵坪と申します。 弊社は、10年近くソースコードは、Subversionで管理しておりましたが、昨年、GitLabに移行しました。 弊社でお世話になっているパートナーさんから、GitLabはAsciiDocが利用できるので、仕様書などのドキュメントは、AsciiDocがお勧めだとアドバイスをもらいました。そこで、Windows上のVisual Studio CodeでAsciiDocのプレビューできる環境を構築してみました。 AsciiDocとは AsciiDocとは、メモ、ドキュメンテーション、記事、本、電子ブック、スライドショー、Webページ、マニュアルページ、ブログを書くためのテキスト文書フォーマットです。 試した環境 OS : Windows 10 Professional (1809) AsciiDocのプレビューに必要なツール Chocolat

Jekyll とか Hugo とかで AsciiDoc や Markdown を書くとき，ファイルの先頭に YAML (たまに TOML) を入れることがあります． フロントマター (front matter) と呼ばれるやつです． このフロントマターが入った AsciiDoc を VS Code で扱うのにいろいろ設定をしたので，ここにメモしておきます． ちなみに，設定がうまくいったときのスクリーンショットはこんな感じです． AsciiDoc プラグインのインストール まずは AsciiDoc 用のプラグインをインストールします． AsciiDoc - João Pinto https://marketplace.visualstudio.com/items?itemName=joaompinto.asciidoctor-vscode Ctrl+P を押して次のコマンドを叩けば，インスト

概要 こんなTweetを見かけたので、さっそくやってみた。 VisualStudioにはJSONをクラスとして貼り付けるという機能があるよ、と。 Tip of the Day! A little reminder of the paste JSON as classes feature in Visual Studio :) There is also 'paste XML as classes' pic.twitter.com/O79D6ZEuwl — Iris Classon (@IrisClasson) November 27, 2016 用意したJSON { "title":"Harry Potter and the Philosopher's Stone", "author":"J.K. Rowling", "hoge": { "stringField": "piyo", "nu

メシウス株式会社のDeveloper Solutions〈開発支援ツール〉の情報発信メディア「MESCIUS.devlog」 Visual Studio Codeでコードを表示しながらデータを確認する場合に役立つ拡張機能の紹介です。 スクリーンショットの工夫 Excelファイルを操作するライブラリDioDocs（ディオドック）は、ユーザーインタフェースが無いので、スクリーンショットを撮影する際に工夫が必要です。 GrapeCity.devlogで利用方法を解説する場合も、成果物であるExcelファイルやPDFファイルを表示した画像になるケースがほとんどです。 また、.NET CoreのConsoleアプリの場合、コマンドラインのUI（CLI）になるためVisual Studio Code（以下、VSCode）にコードを表示した画面になります。 しかし上図では、右側にグリッド画面が見えます。

読書メモを図にしたいとき、簡単なグラフを作成できるツールがあったら便利です。 調べたらいくつか候補がありました。 PlantUML　https://plantuml.com/ja/ Mermaid.js　https://mermaidjs.github.io/ Typora　https://typora.io/ 今回は、手軽に使えて、拡張性もありそうなMermaid.jsを試してみます。 Mermaid.jsとは？ Visual Studio CodeでMermaid.jsを使う方法 Markdown Preview Enhancedの使い方 図の出力 見た目のカスタマイズ 参考 Mermaid.jsとは？ Mermaid.jsは、JavaScriptでグラフやチャート図を描くためのライブラリーです。 （英語の「mermaid」は、日本語で「人魚」という意味） （公式サイト） https:

Markdown Preview Mermaid Support Adds Mermaid diagram and flowchart support to VS Code's builtin Markdown preview and to Markdown cells in notebooks. Currently supports Mermaid version 10.4.0. Usage Create diagrams in markdown using mermaid fenced code blocks: ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` You can also use ::: blocks: ::: mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ::: Con

普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ

去年に引き続きクリスマスイブになんか作ったシリーズです。 下記のような感じで、ガントチャートを雑に作れるVSCodeの拡張機能を作りました。 テキストを編集してもいいし、プレビューを操作してもいいというのがこのツールの売りです。 変更内容は相互に同期します。 VSCodeなので、当然ながらコピペやマルチカーソル、置換なんかも普通に使えます。 VSCodeの編集機能で、GUI部分の貧弱さを補おうというコンセプトです。 実用性や自由度は低めですが、文法や操作方法を覚える必要も最低限になっているんじゃないかなと思います。 あと、ただのテキストなんで、Git管理もできますね。 ２週間程度の短期予定を立てる用途を想定しています（自分はその程度の予定しか立てません）。 要望に答える可能性は低いですが、プルリクを頂ければ割と軽率にマージすると思います。 かんたんな導入方法 まずVSCodeを開き、おもむ

命名規則を一瞬で変更 - change-case https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case 様々な単語の命名規則を変更できる拡張機能です。 例えば、ベースの文字をfoo_barとすると、以下のように変更できます。 キャメルケース：fooBar ハイフンケース：foo-bar 大文字：FOO_BAR 区切り無し：foo bar この他にも10以上の変換方法が用意されています。 おすすめ設定 拡張機能をインストール後、キーボードショートカットを開きます。 extension.changeCase.commandsで検索をして、好きなキーバインド（ショートカットキー）を登録します。私はCommand + _にしています。 これで、単語を選択した状態で先程登録したキーバインドを実行すると、変換候補

0. はじめに Microsoft社がオープンソースで開発している高機能エディタVisual Studio Code。 Visual Studioよりも軽く、他のエディタと比較してもプラグインが豊富、かつ、導入が便利であるため重宝しています。そしてSublime Textなどと同じで複数のプラットフォームで稼働させることができます。 この記事では、HTML（JavaScript、CSSを含む）を編集するにあたり必要となる機能をセットアップする方法をまとめてようと思います。対象のVisual Studio Codeのバージョンは 1.62.0(Octover 2021) です。 1. セットアップ 用意する機能は大きく分けて次の3種類。 1. エディタとしての基本機能を改善 2. コードを書きやすくするプラグインの導入 3. 作成したHTMLのプレビュー表示 1-1. エディタとしての基本機

1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出ています。 6. Settings Sync どこでも同じ設定で使いたい人には便利。 ⇧ + ⌥ + U/D で設定をアップロ

ECサイト運営会社でWEBエンジニア＆マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。

Git を求めて次の場所を探しています: C:\Program Files (x86)\Git\cmd\git.exe Git を求めて次の場所を探しています: C:\Program Files\Git\cmd\git.exe Git を求めて次の場所を探しています: C:\Users\maggothand\AppData\Local\Programs\Git\cmd\git.exe Git installation not found. インストールされているはずですが、見つからないようです。［表示｜統合ターミナル］を表示して、Gitを確認してみます。 この記事は、GitのエディターがVisual Studio Codeに設定されている前提で書いているので、既定の編集アプリを別にしている場合には、外部ソフトで行ってください。 Gitのバージョン情報の確認方法 Visual Studio

なお、本稿の内容は基本的に、Windows版のVS Code（64ビット版）で動作確認し、必要に応じてmacOS版でも確認をしている。 VS CodeでPythonする理由 PythonをサポートするエディタやIDE（統合開発環境）は数多く存在する。例えば、JetBrainsのPyCharmは優れたIDEであり、恐らく、VS CodeでできることはPyCharmでもできるだろう。それでもなお、VS Codeを使う理由とは何だろう。筆者もちょっと考えてみた。 VS Codeは無償で使える、軽量なエディタである（上に挙げたPyCharmにも無償で利用できるCommunityエディションはあるし、オープンソースプロダクトとして無償で利用できるエディタも数多いが） Python拡張機能をインストールすることで、IntelliSenseを利用したコード補完が可能になる 同じくPython拡張機能によ

こんにちは。今回のテーマは「Ubuntu 18.10にVisual Studio Codeをインストールする」です。AtomやSublime Text等、近年はモダンで便利なエディタが色々と登場してきました。そんなエディタ界にMicrosoft社が送り込んできたのがVisual Studio Code。あのVisual Studioの名前を冠したエディタがなんとLinuxでも動作するソフトウェアとして登場したのには少々驚いたのを覚えています。独善的とも受け取れる姿勢で有名であったMicrosoftもモバイル分野での失速を機に他のプラットフォームと共存することの大切さを学んでいるようです。今回はそんなVisual Studio CodeをUbuntu 18.10にインストールしてみましょう。 【目次】 プログラマーに人気のモダンなエディタVisual Studio Code vscodeとV