VSCodeは、皆さんご存じの通り、無料で使えるWebサイト制作にはもってこいの開発ツールです！
そんなVSCodeには印刷機能があります！
プログラミング学習中やWeb制作の勉強をしていると、
と思うことがあります。
この記事では、VSCodeでコードを印刷する方法を紹介します！
VSCodeでコードを印刷する方法
VSCodeには標準の印刷機能がありません。
そのため、拡張機能「Print」を利用します。
Print拡張機能をインストールする
VSCodeの拡張機能検索で
「Print」
と検索してインストールします。
インストール後は、エディタ右上に印刷アイコンが表示されます。
印刷したいファイルを開いた状態で印刷アイコンをクリックすると、印刷画面が表示されます。
私がコードを印刷する理由
私はコードを実際にノートへまとめながら勉強するタイプです。
手書きでHTMLやCSSを書くと、
という問題があります。
そのため、VSCodeで作成したコードを印刷してノートへ貼り付けています！
HTMLとCSS•JSを1枚にまとめて印刷する方法
HTMLとCSS、HTMLとJavaScriptを同じページにコピーしたい場合がありますよね！
その際、HTMLファイルの中へCSSをそのまま貼り付けると、
というデメリットがあります。
そのような場合は、
sample.txt
のようなテキストファイルを作成し、
- HTML
- CSS
- JavaScript
をまとめて貼り付けて印刷すると見やすく整理できます。
印刷プレビューでコードが日本語に翻訳される場合
印刷プレビューを確認すると、コードの中が日本語で翻訳されてしまうことがあります。
これはブラウザの翻訳機能が影響している可能性があります。
その場合は、
- ブラウザの翻訳機能をOFF
- ページを再読み込み
を試してみてください。
おすすめ拡張機能
VScodeでは拡張機能の導入で作業効率がUPします！
おすすめの拡張機能についてまとめたのでご参照ください！
VSCode学習を効率化する関連記事
VSCodeを使いこなすと開発効率が大きく向上します。
PHPの設定
VScodeでPHPを使用したい時は設定が必要です。
設定方法をまとめているのでご参照ください！
VScodeでClaude Codeを使用したい場合
Claude Codeは有料会員のみ使用できるAIを活用しながら開発できるツールです。
とても便利で初心者でも簡単に開発することができる優秀なものです！
初心者の場合、コマンド操作に苦手意識がある方も多いかと思いますが、VScodeを使用すれば快適に活用することができます。
使用する方法は下記記事にまとめているのでご参照ください！
Claude Codeはモデルの使い分けが消費量を左右するので大切になってきます。
VScodeでモデルを確認する方法がわかりにくかったのでまとめてみました。
Claude Codeを拡張機能として利用している方は、モデルの確認方法も覚えておくと便利です。
まとめ
VSCodeでコードを印刷したい場合は、拡張機能「Print」を利用するのがおすすめです。
特にプログラミング学習中は、
というメリットがあります。
VSCodeには便利な拡張機能が多数あるので、自分に合った環境を構築して一緒に学習効率を高めていきましょう！
また、ご興味あれば、私の学習方法についても紹介しているので、ご覧いただけたらと思います！
