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アプリケーション開発者が安心して使える機

Visual Studio Code のエディターでファイルを開いた場合、デフォルトの設定では折り返しは行われずに必要に応じて横スクロールバーが表示されます。ここではエディターでテキストを表示する場合の折り返しに関する設定を行う方法について解説します。 テキストの折り返しの設定 Visual Studio Code でファイルを開いた場合、エディターはデフォルトでは折り返し表示を行いません。横幅に入りきらない場合は横スクロールバーが表示されます。 エディターの折り返しに関する設定するには「ファイル」メニューの中にある「ユーザー設定」をクリックし、さらに表示されたサブメニューの中から「設定」をクリックしてください。 Visual Studio Code の設定画面が表示されます。 画面上部の検索ボックスに「wordwrap」と入力してください。いくつか設定項目が表示されますが、「Editor

VSCodeに新機能「Copilot Vision」プレビュー版が登場。モックアップ画像を読み込ませてHTML/CSSを作成、エラーのスクリーンショットから分析を依頼など マイクロソフトはコードエディタVisual Studio Code（以下VSCode）の新機能として、Copilotでモックアップ画像の読み込みなどが可能になる「Copilot Vision」プレビュー版などの搭載を発表しました。 また、ターミナルにおいてbashやzsh、PowerShellなどの入力補完をしてくれるIntelliSenseの改善なども追加されています。 これらの新機能は3月6日付けで公開されたVSCode 1.98（February Update）に搭載されています。 Version 1.98 of @code is out now with drag and drop peek references

まーーーたstylelintが止まった。ちょうどいいから設定など見直しました。 あと！！！！！！ 検索すると！！！！！！ まーーーーーーだcssの並べ替えをcsscombにやらせよう、という記事がたくさん出てきて「そんな長らく開発されてねえもんを使うな！ VScodeのプラグインも使うなって書いとる！」と憤ってしまった*1。cssの並び替えをしたい人はcsscombではなく、Postcssやstylelintにやらせましょう。 自分はVScodeでscssをcssにコンパイルしていますが、live sass compilerがベンダープレフィックスやらコンパイルやらはやってくれるので、scssとcssの可読性をよくしてくれるだけでいい。だからstylelintを使っています。ちなみにcssを並べ替えるだけなら、postcss sortingとかでもできますが、どちらにせよnode.jsは必

VSCodeには、プログラミングの補助ツールなど、様々な拡張機能が用意されています。 サイドバーメニューから「拡張機能」を選択またはショートカットキー[SHIFT]+[CTRL]+[x]で拡張機能」を表示することができます。 VSCodeをインストールする 際に日本語化したのも拡張機能「Japanese Language Pack for Visual Studio Code」によるものです。 おすすめ拡張機能ここではプログラミングの補助となる４つの拡張機能を紹介します。 このほかにも便利な拡張機能がたくさんありますので、必要に応じて都度紹介させていただきます。 PHP Intelephense 「WordPress のテーマはPHPで作る」と言うのは、これまで紹介してきた通りです。 PHP Intelephense は、PHPのコーディングをサポートするツールで、命令文の補完や文法チェッ

VS Codeでコーディングを行っていて、自動整形（フォーマット）機能は欠かせない拡張機能だと思うのですが、HTMLとPHPを同時にフォーマットしてくれる拡張アプリが見つからず困っていました。 HTMLだけのフォーマッッターやPHPだけのフォーマッターというのはあるんですが、HTMLとPHPが混在した途端に機能しなくなってしまう。 ネット上でいいものは無いかと探して観たのですが、何やら小難しい設定が書かれているページばかりでした。 色々試している中で、保存した時に自動整形がかかる、しかも、HTMLとPHPのコードが混在していてもキレイに整えられる方法を発見したので、ご紹介したいと思います。 アプリを入れて、２箇所設定を変えるだけなので、とっても簡単です。 では、早速いってみましょう！

「検証ツールでSPサイズは確認してるけど、実際にスマホで見てみたいな...」 こんな経験はありませんか？ それを叶えるのが、「プライベートIPアドレス」 を用いた接続です。 本記事は、そんなプライベートIPアドレスとはなんなのか、そして 「実際にどのようにスマホ実機に表示させるのか？」 という疑問を解決する記事としてお届けします。 本記事で解説すること 技術を予習する プライベートIPアドレスとは？ 手順 Live ServerでプライベートIPアドレスを使う設定 Go Live QRコードでスマホに表示 技術を予習する プライベートIPアドレスとは？ ひとことで言ってしまえば、「特定のネットワーク（家庭、オフィス、学校など各空間）内にある端末でのみ、使用できるIPアドレス」のこと。 これだけではなんのことか分からないと思いますので、順番に確認していきましょう。 普段、ローカル環境で開発し

本記事で紹介する方法は、PHP Intelephenseの拡張機能を使用しています。 初期設定など行なっていない人は、こちらの記事をご参考ください。 WordPressでオリジナルテーマ(クラシックテーマ)を作成する際、かなり多くのWordPress独自関数を使用します。 Visual Studio Codeのデフォルト設定では、WordPressの関数は認識されていないため存在しない関数としてエラーが表示されたり補完が効かないため使い勝手が悪いです。 そこで、本記事ではVisual Studio CodeでWordPress関数の自動補完&エラーを表示させない方法について解説しています。 PHP Intelephenseの設定変更 PHP IntelephenseにWordPress関数を認識させるための設定を行います。 インストール済みの拡張機能の中から、PHP Intelephens

「PHP Intelephense」って何？ Visual Studio Code（VSCode）でPHPを扱う際に非常に便利な拡張機能です。 フォーマッターやコード補完などの機能が豊富で、私も長い間使用しております。 気付いたきっかけ そんな便利機能ですが、たまに思った通りに動いてくれないことがありました。 実行すると正しく動作するのに、プログラム上では問題が発生していると表示されるのです。 そこで、改めて拡張機能の概要が記載されているページを見直してみることにしました。 間違っていた内容 「PHP Intelephense」の概要を確認してみると、Quick Start に以下の内容が記載されていました。 Disable the built-in VSCode PHP Language Features. Go to Extensions. Search for @builtin ph

環境 MacBook Pro（Catalina 10.15.7） VSCode（1.63.2） PHP（8.0） Docker Desktop（4.3.1） はじめに 普段はフロントエンドメインの開発を行なってますが、Laravel で API 周りの実装もしないといけなくなったので、使い慣れてる VSCode にいくつか PHP の Extension を入れてみました。 その中で、ハイライト、コード補完、構文チェックなどなど、開発にあたり一通りの機能が揃ってて、評価の良い PHP Intelephense も導入しました。 機能としては申し分なく期待通りだったんですが、なぜか、PHP8.0 から導入されたであろう名前付き引数で、変数名が補完されるにも関わらず構文エラーが発生。 また、複数の戻り値の型を指定すると同じくエラー。 当初は、ツールの問題だろうと思い disable/enabl

対象読者 VSCodeを使ってPHPを書いているが、設定とかプラグインは何を入れれば良いとかあんまりわかっていない昔の自分のような人 プラグインのインストール 汎用的なやつ Japanese Language Pack for Visual Studio Code(エディターメニューの日本語化) zenkaku(全角スペースを見やすく) indent-rainbow(コードインデントを見やすく) EditorConfig for VS Code(プロジェクト単位でエディタの設定ができるように) PHP用 PHP Intelephense(コード補完や定義元ジャンプ、クラスインポートなど) ※名前の似ているPHP IntelliSenseと間違えないように PHP Debug(VSCodeでXDebugが動かせる) PHP DocBlocker(関数定義後にPHPDocの作成をサポートしてく

株式会社ゆめみの 23 卒 Advent Calendar 2023の4日目の内容です。 2022年のはじめに自分の開発環境を紹介する記事を投稿したのですが、思いのほか読んでいただいているので2023年度版を作成しました。 今回は拡張機能編です。キーバインドなどは後日公開します。 今年1年間で JetBrains 製品や、neovim を使ってみたりしましたが、紆余曲折あり現在は VSCode に落ち着いたのでいつかその辺りも紹介出来ればと思います。 VSCode 関連記事 下記にキーバインドや設定周りの記事リンクを追加していきます 汎用的な拡張機能 BracketLens 右括弧の左側にスコープの情報が表示されるようになる。 ChangeCase 選択範囲のテキストの case を変更することが出来る CodeSpellChecker スペルチェッカー EditorConfig .edi

Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：

この拡張には現在 (2023/07/30 9.19.0 時点) はまだPrettier v2が同梱されている。同梱をv3に変更するPRはまだマージされていない（と書いてたらさっきマージされた）。 ただ、この拡張は対象ワークスペースのプロジェクトのローカルにprettierがインストールされていればそっちを使ってくれるので、この拡張の変更のリリースを待たずとも、単にプロジェクトでprettierをアップデートすればVS Codeでもv3が使われて期待通り動くはず。 が、結果は予想に反して、v3で動いているはずなのにtrailingCommaがallではなく、v2相当のes5で動いてしまってた。あれ？ 原因は、この拡張は拡張側でPrettierのデフォルト設定を独自に持ってしまっていて、プロジェクトに設定ファイルprettierrcが無い場合は拡張側のデフォルト設定が使われるから。Pretti

以前こちらの記事でエンジニアのためのFigmaの使い方を紹介しました。 こちらの記事の後にFigmaのプラグインがリリースされ、VSCodeとの連携が可能になりとてもエンジニアにとって使いやすくなったので今回はその使い方を紹介します。 Figma for VS Codeで何ができるのか Figma for VS CodeはFigmaのプラグインで、VSCode上でFigmaのデザインをみたり、CSSのコードを取得したりすることができます。 FigmaのデザインをVSCode上で確認 以下はFigmaのデザインをVSCode上で見た例です。 ご覧いただいてわかる通り、要素間のの距離やサイズなどコーディングに必要な情報を一通り把握することができます。 コードの補完 Figmaのデザインをコーディングする際に、Figmaのデザインを元にCSSのサジェストをしてくれます。タブを打つだけでサジェスト

VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応 昨年（2022年）、Adobeによる買収が発表され話題となったWebデザインツールを提供するFigmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Bring Figma to VS Code Our new extension for VS Code eliminates context switching and helps you move faster with code suggestions based on your designs. Install to... → Inspect Fig

ただし、settings.jsonとかkeybindings.jsonをいじり始めると平気で1日溶けます。私はよく現実逃避で始めたキーボード設定で時間を溶かします。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 みなさんはエディターは何を利用していますか？（火種） 私はnvimやVSCodeを使い分けています。チームで開発する時やペアプロをする時はVSCodeに便利な仕組みが揃っているからです。 今日はチーム開発の際にさっと導入できるわりに、不要な手間を省いてくれる.vscode/settings.jsonと.vscode/extensions.jsonについてお話しします。 何がうれしいのか .vscode/settings.jsonでは以下のようにファイル保存時のフォーマッタ適用や適用するフォーマッタの指定が可能です。 { "exte

はじめに コードスタイルを整えるためにprettierをよく使ってはいたのですが、 雰囲氣で使っていたところもあったので、設定できるオプションについてまとめてみました。 使用バージョン：prettier 2.7.1 動作確認はVSCodeにて行なっています。 Vueでの実装について確認していますので、JSX関係はほぼ公式の内容となっています。 さらに詳細を知りたい場合は公式サイトをご確認ください。 Prettier オプション 個人的おすすめ設定 以上！ 折り返しの幅だけは、ちょっと広めにしたいです。 他のオプションについては、調べてみると意外とデフォルトの設定であることが多く、 設定上記載しなくても私的には十分なものでした。 バージョンアップによって、デフォルト値が変わるものもあったりするので、明示的に定義しておくのも良いかと思います。 別な切り口として、チーム開発においては、スキルセッ

これは何 備忘録も兼ねて、PCのセットアップで自分のやることをまとめてみました。 随時更新していく予定です。 VS Code VS Codeの環境設定 setting.jsonに下記を追加します。 内容はコメントで書いているので、詳細は省きます。 { "editor.fontSize": 12, // フォントサイズを変更 "editor.guides.bracketPairs": true, // 対応している括弧にガイドを表示する "editor.minimap.renderCharacters": false, // ミニマップに実際の文字を表示しない "editor.renderControlCharacters": true, // 制御文字を表示する "editor.renderLineHighlight": "all", // 現在の選択行をハイライトする "editor.r