この記事は「BEMA Lab Advent Calendar 2024」の10日目の記事です。 はじめに こんにちは！ この記事は「BEMA Advent Calendar2024」の10日目の記事として、Astroを使った開発に役立つVSCode拡張機能をご紹介します。 普段はフロントエンドエンジニア兼ディレクターとしてWebサイトの構築や運用の開発に携わっています。近年はJasmtack構成の開発に参画しており、この記事ではAstroを使った開発で実際に使っているVSCodeの拡張機能15選をご紹介します。 この記事が少しでも参考になれば嬉しいです。 結論ご紹介する拡張機能は以下の通りです。 Astro Prettier - Code formatter ESLint EditorConfig for VS Code Code Spell Checker Pretty TypeScri

Visual Studio Code、Web標準の「Baseline」チェックに対応。コード内のHTMLやCSSにカーソルを合わせれば説明表示 Visual Studio Code 1.100もしくはそれ以後のバージョンでは、標準でコード内のHTMLやCSSがWeb標準のBaselineに対応しているかどうかをチェックする機能が搭載されていることが、web.devブログで紹介されています。 これにより、HTMLやCSSが主要なWebブラウザで問題なく表示されるかどうかが、Visual Studio Codeで簡単にチェックできるようになりました。 Baselineは安心して使えるWeb標準 Baselineとは最新のWeb標準のサブセットです。Baselineに含まれているHTMLやCSSの機能であれば主要なWebブラウザで実装済みであるため、Webアプリケーション開発者が安心して使える機

初めに こんにちは株式会社BFT名古屋支店新人エンジニアのないとうです。 最近Markdownを使って記述する機会がにわかに増えています。 しかし、メモ帳等の通常のテキストエディタで表示した場合、Markdownで記述した内容がそのまま表示されてしまいます。 ですのでMarkdownに対応しているエディタやブラウザで設定を行って内容を確認する必要があります。 自分で見る分にはそれで十分ですが、他の方に見てほしい場合は設定やエディタのインストールがなくても見られる形式にした方が良いと思われます。 そこで今回はMarkdownで記載したファイルをHTMLで出力する方法を紹介したいと思います。 目次 初めに 目次 MarkdownのファイルをHTMLで出力する方法 Visual Studio Codeを使う方法 Markdown All in Oneの追加 HTMLで出力する 変換されたことを確

粟飯原 匠 |CEO ベンチャーやスタートアップにて新規事業のマーケティング・セールスを担当し年商5億円までのグロースを経験。PENGIN Inc.を創業し、現在は上場企業やレガシー産業のマーケティング戦略の立案〜実行支援までを担当。 今回はVSCodeで使っている拡張機能を紹介します。 他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。 基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！

マルチカーソルとは その名の通りカーソルがマルチ(複数)になったもの。 通常はカーソルは1つだが例えばlistのようなテキストを選択してCommand+Dで文字選択を複数実行すればカーソルが複数表示される(マルチカーソル)。 マルチカーソルの状態で例えば1を入力すればマルチカーソルの分だけ入力される。 マルチカーソルはVSCode, Atom, Sublime Textなどの多くの高機能エディタで使用可能だ。 コーディングを行っていると複数のテキストに連番を付けたいことがある。 例えば下記のようにlistの語尾に1, 2, 3と連番を付けるなどだ。 list1 list2 list3 しかし、ほとんどのエディタにはマルチカーソルで連番を入力する機能は含まれていない。 そのためマルチカーソルで連番を入力するには拡張機能をインストールする必要がある。 VSCodeの拡張機能 VSCodeでマル

最近VSCodeを触る機会が多く、本格的にショートカットを覚えたり、拡張機能を増やしたりしようかと思っているところです。今回は連番などを入力するのに便利な拡張機能「Insert Numbers」を紹介します。 何ができる？Asuka様が制作された「Insert Numbers」。できることはとても単純明快ですが、for文を使用できないシチュエーションで大変役に立ちます。 例えば、１０個の"test"という文字列の後に1〜10の数字をくっつけるなど、数字を続けて扱うのに特化した機能を持っています。書式はsprintfと同じ雰囲気で指定できます。3桁で001,002,...としたい場合は %03d:1:1 と指定します。「sprintfの書式:初期値:ステップ」の形式で入力する仕様となっています。ステップを1にすれば、連番となりますね。 使い方まずは、VSCodeの機能である「マルチカーソル」

「Visual Studio Code」をエディタとして採用してから早4カ月。あまりの使いやすさに他のエディタには戻れなくなってしまいました。 今日も「Visual Studio Code」でコーディングしていたら、ふと「連番って手入力じゃなきゃダメ？」と思い浮かんだので調べてみました。 結論からいうと、デフォルトではできないとのこと。 それでも、一回設定するだけでとても簡単に連番を入力できる方法をご紹介します。 どんな設定が必要なの？ 拡張機能をインストールします。 私は「vscode-input-sequence」をインストールしました。 インストール方法は？ step 1拡張機能のアイコンをクリックする step 2現れた検索ボックスに「vscode-input-sequence」と入力する step 3緑色のインストールボタンを押す インストールが終わると、右側に拡張機能の説明が出

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

こんにちは！CX事業本部の片岡です。 エディタ戦争が終息して5年たった今、無血革命と呼ばれたVisual Studio Codeをご存知でしょうか？皆様ご愛用のことと存じます。 そんなVisual Studio Codeの便利なショートカットと拡張機能を紹介します！ よく使うショートカットの紹介 拡張機能「Sublime Text Keymap and Settings Importer」をインストール前提の話です。 https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings 編集時によく使うショートカット 文字選択 Command + D ：文字を選択（入力するたび選択中の文字を複数選択できます） Command + U ：文字選択のUndo（選択前に一つ戻ります） Command +

言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。 Tipsは**ここ**から。 拡張機能 24 選 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も出

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。