AWS構成図おすすめツール - Qiita
AWSの構成図を作成する際に便利なツールを紹介します。 vscodeの拡張プラグイン「Draw.io Integration」です。 インストール方法 vscodeの左サイドにあるExtensionsをクリックし、検索窓にdrawと入力するとDraw.io Integrationが表示される。そして、Installボタンをクリックするとインストールされる。 作画ツールの表示 インストール後に新規ファイル作成ボタンを押し、 拡張子を.drawioにすると自動的にvscode上でdrawioの作画ツールが表示される。 これを使って簡単なAWSの構成図を描いていきます。 VPCを作成して、その中にパブリックサブネット、EC2インスタンス、インターネットゲートウェイを作成する。 使い方 AWSアイコンの追加 下部の+More Shapesを押すと、アイコンのセットが表示される。 ここからAWS 1
コードを書くのが楽になる！知っておくと便利なVS Codeの機能・設定のまとめ
VS Codeは毎月のようにアップデートされ、便利な機能がどんどん追加されています。最近追加された機能をはじめ、Web制作で役立つ便利な機能を紹介します。 特に人気が高い機能拡張と同じレベルの仕事が、VS Codeの基本機能・設定だけで利用できるので、便利です。 VS Code: You don't need that extension by Rob O'Leary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. タグの自動名前変更と終了タグ補完 2. 設定の同期 3. モジュールの自動インポート 4. HTMLとCSSのスニペット管理 5. ダミーテキスト 6. 末尾のスペースを自動的に削除 終わりに はじめに 私は最近、VS Codeを深く掘り下げいて、いくつか興味深い発見がありました。人気のある機能拡張の
「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 の Markdown で数式を表示して PDF 化する - Qiita
インストール 以下の拡張機能をインストールします。 Markdown+Math Markdown のプレビューで数式を表示できるようにする Markdown PDF Markdown を PDF で出力できるようにする 数式をPDFで出力できるようにする Markdown PDF では数式を出力することができません。 今回は Markdown PDF のテンプレートファイルを書き換えて対応しました。 Markdown+Math が数式の表示に KaTeX を使っているため、Markdown PDF でも KaTeX を使うようにします。 コマンドパレットで > Extensions: Open Extensions Folder すると拡張機能フォルダを開くことができます。 <!DOCTYPE html> <html> <head> <title>{{{title}}}</title> <
afnf.net
afnf.net AliExpress で初めての Failed pickup AliExpress ePacket 2023/01/14 19:24 comments (1) eplusでMB1202Eエラー（解決済み） eplus クレカ 2020/07/30 22:05 comments (2) VSCode Jupyter Notebookでのペースト重複（解決済み） VSCode Python 2020/07/11 15:03 comments (1) Lubuntu18.04でPluma等の背景が透過してしまう（解決済み） Linux Lubuntu 2018/06/02 16:35 Spring Boot 2.0 M7 リリースノート和訳 Spring Boot Java 2018/01/09 01:14 Webフレームワーク品評会でLTしました slideshare Spr
Markdown で ページ内リンク付き の 目次 を 作成 する 方法 - Qiita
目的 Markdownでのリンクが有る目次の描き方を知る ※本投稿で紹介する内容はMarkdown記法だけではなく、HTMLの記法も活用します。 ※おそらく本記載方法はQiitaのMarkdown では使えないと思います。。。すいません。。。 押さえるポイント この作成法はHTML記法のリンク作成タグの<a>を使用したものである リンクをクリックして飛ぶ先をidで指定する。 idを用いて飛ぶ先の識別子を定義する。 idで識別子を定義するときは下記のルールに従う。 識別子は重複不可能。 使用できる文字は半角英数字、ハイフン、アンダーバー、コロン、ピリオド。 数字や記号で始められない。 大文字小文字の区別がある。 ※リンク先の関係など理解しにくい部分もあると思うので書き方の例に記載された内容をそのままテンプレートとしてお使いください。 書き方の例 下記にMarkdownファイルのリンク付き目次
これがなくては生きていけないVS Codeエクステンション10選 - Qiita
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は私のお気に入りのエディタです。 存在するコードエディタの
VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
追記 versionによっては設定を変えないとエクスポートができないようです。 エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。 現状バージョン0.4ではこちらの設定が必要となります。 VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処 2020/10/18追記 現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。 その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。 はじめに VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、 導入方法と使い方を備忘として残していきます。
Prettierの導入方法 - フロントエンド開発で必須のコード整形ツール - ICS MEDIA
Prettierとは、Node.js上で動作するコードフォーマッターです。本記事ではPrettierの利点と使い方を紹介します。 コードフォーマッターの必要性 複数人で開発を行っている場合、各々が自由にコードを書いてしまうと、さまざまな書き方が混在し統一性のない読みづらいコードとなってしまいます。統一されていないコードは、可読性が低くメンテナンス性が悪くなり、ミスが発生する原因となることもあります。 コードフォーマッターを利用すると、自動的に決められたコードスタイルに整形してくれるため、開発者はコードスタイルを意識することなくコーディングに集中でき、可読性の高いコードを作成できます。 Prettierを導入する利点 コードフォーマッターは、WebStormやVisual Studio Codeなどのウェブ制作のエディターにも付属していますが、これらはユーザー環境に依存します。つまり、開発者
Visual Studio Code で UML を描こう！ - Qiita
この記事では、Windows 環境に Visual Studio Code と PlantUML をセットアップする手順を説明します。 PlantUML とは PlantUML は、以下のような図をテキストで素早く描くためのオープンソースプロジェクトです。 シーケンス図 / Sequence diagram ユースケース図 / Usecase diagram クラス図 / Class diagram アクティビティ図 / Activity diagram コンポーネント図 / Component diagram 状態遷移図 / State diagram オブジェクト図 / Object diagram 環境 下記の環境で動作確認しました。 Windows 10 Pro (64bit) Visual Studio Code 1.11 Java SE Runtime Environment
HTML,CSSコーディング時に便利なVScodeの設定とプラグイン | ずくろぐ
こんにちは！ちづみ(＠098ra0209)です。現在フリーランスでwebデザイナーとして活動しています。 コーディング時にはVScodeというを使っているのですが、今回はhtml,cssコーディングが捗るおすすめのプラグインと設定を紹介していきます。 プラグインの入れ方 VScodeにはプラグインという、VScodeの機能を拡張したりパワーアップできる機能があります。 入れ方は左側にあるブロックのようなものをクリック→検索窓にプラグイン名を打ち込むとそのプラグインが出てくるのでそれをインストールします。 初めに知っておく、やっておくべきこと 日本語対応にする XScodeは基本英語表記のUIなので、使いづらい場合はまず日本語表記に変えましょう。 変え方はプラグインのJapanese Language Pack for Visual Studio Codeを使います。 Japanese La
Visual Studio CodeでGitを利用する
本特集の第1回「Visual Studio Codeの使い方、基本の『キ』」ではVisual Studio Code（以下、VS Code）の基本的な使い方を紹介しているが、今回はVS CodeからGitを使う方法について見てみることにしよう。なお、本稿はVS Code 1.23をベースとしている。また、基本的にはWindows版／64ビットのVS Codeで動作を確認している（macOS版でもざっくりとした確認はしている）。 VS CodeでGitを活用する：［ソース管理］ビュー VS Codeは標準の状態でGitソース管理マネジャー（Git SCM）拡張機能を含んでいる。ただし、事前にGitをインストールしていることが前提となる。インストールしていない場合には、次の画面のようなメッセージが表示されるので、Gitのインストール／設定を行っておこう。
React/TypeScript & Railsアプリの構築 (2) コード記述の効率化設定 - Qiita
はじめに 前回記事の続きです。 今回は、Lint、formatter、precommitといった コード記述を効率化する設定 を説明します。 リポジトリ 以下に今回の記事の内容のリポジトリとして残しています。 https://github.com/Ushinji/ts_react_rails 記事まとめ バックエンドとフロントエンドの連携 React/TypeScript & Railsアプリの構築（2） コード記述の効率化設定 <-now アプリ全体構成 React/RailsのSPAアプリケーション on Docker フロントエンド React：16.8.6 TypeScript：3.4.2 バックエンド Ruby：2.6.2 Rails：5.2.3 インフラ Docker Linter typescript-eslint 今回はTypeScriptを使っていますが、LinterはE
【今日から携わる】はじめてのVisual Studio Code入門（オススメの設定・プラグイン・使い方） - Qiita
はじめに Visual Studio Codeを使っているので、オススメの使い方やプラグイン、設定などを紹介します。 環境 Mac macOSHighSierra 10.13.4 Visual Studio Codeをインストール おすすめの設定 日本語化 その他の設定 「Code -> 基本設定 -> 設定」または「Cmd + ,」 ▼setting.json { "editor.renderIndentGuides": true, // インデントのガイドの表示 "editor.renderLineHighlight": "all", // 選択行のハイライト "editor.renderWhitespace": "all", // 半角スペースの表示 "editor.snippetSuggestions": "top", // スニペット候補の表示（Emmet） "editor.ta
マルチカーソルで、VSCodeのスニペットをもっと便利に。 - Qiita
ある日の弊社 社長「お〜い、やめ太郎」 ワイ「なんでっか、社長？」 社長「今度作るショッピングサイトの件なんやけど」 社長「ドラッグ＆ドロップ機能を実装することになったから」 社長「それをやめ太郎にお願いしたいんや」 社長「やめ太郎、やったことあるか？」 ワイ「どどどドラッグ！？」 ワイ「あるわけないやないですか・・・！」 ワイ「そんなもの販売して万が一・・・」 ハスケル子「やめ太郎さん、違いますよ」 ハスケル子「ドラッグ＆ドロップでしょ」 ハスケル子「マウスで掴んで移動させるやつです」 ワイ「ああ、そっちか」 社長「やめ太郎、できるか？」 ワイ「もちろんですわ」 ワイ「前職でもドラッグやってましたから、余裕ですわ」 社長「よ、よろしく頼むわ」 レッツJavaScript ワイ「確かドラッグ＆ドロップを実装するときは」 ワイ「マウスを動かしたときにマウスポインタの座標を取得できるようにして
僕がおすすめするVSCodeのプラグインまとめ｜TAK / Web Creator.
Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。 おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.14 追記)当記事が「はてなブックマーク」テクノロジーカテゴリーの人気エントリーに掲載されました。ありがとうございます。 昨日投稿した「僕がおすすめするVSCodeのプラグインまとめ」がはてなブックマークのテクノロジーの人気エントリーに掲載されました。ありがとうございました。うれぴまる。#notehttps://t.co/w1pg7J3gfDhttps://t.co/LzHQfdYReZ — TAK (@tak_
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Jupyter-contrib/jupyter_nbextensions_configurator: A jupyter notebook serverextension providing config interfaces for nbextensions.
Markdown記法についてまとめてみた
GitHub - ipython-contrib/jupyter_contrib_nbextensions: A collection of various notebook extensions for Jupyter
ターミナルを900％高速化するWebGLレンダラーを実験投入 ～「Visual Studio Code」v1.41／長いパスをコンパクトに表示する“コンパクト フォルダー”、HTMLタグのミラーカーソルも魅力
