この記事では VS Code を日本語化するための手順と、いくつかの便利な設定について紹介していきます。 VS Codeの日本語化 VS Code を日本語化するための手順を解説します（なお、VS Codeのバージョンによって表記が多少違う場合があります）。 ↑ VS Codeを起動します。 ↑ サイドバーにあるExtensionsのアイコンをクリックします。 ↑ このような画面になります。 ↑ 検索窓でJapaneseと検索し、『Japanese Language Pack 日本語』をクリックしてください。 ↑ 『Install』をクリックします。 ↑  『Change Language and Restart』をクリックし、VS Code を再起動します。 ↑ 表記が日本語表示になっていれば成功です！ Emmetの設定 VS Codeのemmetで『!』を入力すると出てくるコードですが

Visual Studio Codeの使い方・基礎基本 – Microsoft製のコードエディタ –という記事でVisual Studio Codeのインストール・設定方法についてはご紹介させていただいていますので、もしVisual Studio Codeをご使用でない方・導入してみたいという方は、ぜひご参照ください！ プラグインの導入方法は上記画像の通りに行っていただければOKです！ SFTPプラグインを探して、インストールボタンを押すだけという、いたってシンプルな手順となっています！ プラグインのインストールができたら、Visual Studio Codeの再読み込みを実行しておいてくださいね！ SFTPプラグインの設定 続いて、SFTPプラグインの設定を行います。まずは、Visual Studio Codeの画面でCommand + Shift + Pを実行します。 （Windows

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. This is the pre-release edition of Live Preview for early feedback and testing. It works best with VS Code Insiders. Live Preview - VS Code Extension 📡 ⚠️ WARNING: This extension is still under development! ⚠️ An extension that hosts a local server for you to preview your web projects on! This extension is most usef

Featured Partner Articles Cloud cost optimization best practices Read moreHow to choose a cloud provider Read moreDigitalOcean vs. AWS Lightsail: Which Cloud Platform is Right for You? Read more

npm startして正常なのに、vscode上でエラー出ていたり、挙動がおかしいときに下記のコマンドで、一旦npmをクリアすると治ったりする

Stylelintとは CSSのコードをチェックするツール。 例えばCSSを書く際は企業によってインデントの仕方がタブだったり半角スペースだったりするが、目視確認だと見落としやすい。 Stylelintがインストールされていればターミナルでのコマンド実行時やVS Codeでのコーディング中にエラーを検出できるので、確認漏れが発生しにくくなる。 Stylelintのインストール方法 npmを使用するので、例としてターミナルで以下のコマンドを実行してファイルを必要な作成する。 mkdir css-sample; cd css-sample; touch index.css .stylelintrc.json; npm init -y; 関連ファイルを作成したらStylelintとルール(stylelint-config-standard)をインストールする。 npm i -D stylelin

VSCodeはビルドインの設定や拡張機能が豊富なおかげで、カスタマイズしていくとどの自動整形が働いているのか分かりづらくなってくると思います。 ゆえに「なんとなくそれっぽく整形が効いているけど、カスタマイズのやり方はわからない」という状態だったりするのではないでしょうか。筆者もそれっぽく整形が効けばいいかな程度だったこともありました。 今回手元のプロジェクトでStylelintにおける特定のルールの有効・無効をしっかりカスタマイズする必要がでたので、改めて設定にチャレンジしてみました。 ※執筆中にStylelint14.0.0と拡張v1.0.3がリリースされ、一部の仕様が変更になりましたので、要所要所にて加筆しています。お試しになる際にはお気をつけてください。 Stylelintとは List of rules | Stylelint stylelintのルール簡単説明（v5.4.0） 「

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。 拡張機能は下記の分野に分けて紹介していきます。 VSCodeを使う全員向け Web制作関連 HTML&CSS関連 WordPress関連 フロント向け JavaScript React Vue サーバーサイド向け PHP Ruby その他 拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。 この記事の対象者 プログラミング初心者の人 分野別におすすめの拡張機能を知りたい人 開発の生産性をより上げたい人 VSC

[outline] まず最初に用意するもの ・Visual studio code（以下VSコード） ・Live server（VSコードのプラグイン） ・実機 Live serverとは？ VSコードのプラグインです。 拡張機能からインストールしておきましょう。 PCとSP、同じWi-Fiに接続する 必ず同じWi-Fiに接続してください。同じWi-Fiにつながないと表示されません。 ワークスペースに作業フォルダを追加する 左のワークスペースに右クリックにて作業するフォルダを追加しておきましょう。 Live serverの設定を変更 IPアドレスのをたたく際に毎回アドレスを確認するのが大変なのでIPアドレスを固定するための設定を行います。 また、これをすることによりIPアドレスを勝手に吐き出してくれるので調べずに簡単にブラウザで見れます。 1.VSコードの左下にある歯車マークの管理をクリッ

こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 ITカレッジの大賀です。 今回は、これからプログラミングを始める方に向けて、Microsoftがリリースしている、開発業界では知らない人がいないと言っても過言ではない程メジャーなソースコードエディタ、「Visual Studio Code」をより便利に、そしてよりスタイリッシュに使えるテーマ/フォントと拡張機能をお伝えします。コーディングを始める前に、ぜひ試してみてください。 Visual Studio Code(以下、VSCode)には、ソフトウェアのシンタックスハイライト(ソースコードを構文に合わせて色付けしてくれる機能)やレイアウトの部分の配色を、テーマをインストールすることで、自由に変更できます。 VSCodeには白基調のライトテーマと黒基調のダークテーマがあり、私は目に優

HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね！ 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズできます。 Blockman -GitHub Blockmanの特徴 Blockmanのインストール Blockmanの使い方 Blockmanの特徴 Blockmanは、コードのネストされたブロックを強調表示するためのVS Code拡張機能です。 サポートしている言語は、JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, Ruby, PHP, R, Go (Golang), Dart, Rust, Swift,

【意外と知らない？！】コーディングを速くするために知っておきたいテクニック集 更新日：2020/09/09 突然ですが、みなさん。 コーディング（HTML,CSS）得意ですか？ 筆者は、「得意です！」と自信をもって言えるほどではありません。汗 「どうやって再現したらいいんだ…」と、頭を悩ませ時間が溶けていくことが多いです。 しかし、コーディングでは「スピード」が求められますよね。 １ページ作成するのに何日もかかっていてはとても仕事になりません。。 ではどうしたらいいのでしょうか。 色々ありますが、最もすぐに効果が見込める方法は、コーディング（HTML,CSS）をする際に「必ず行う操作」の部分で効率化を図るということです。 「必ず行う操作」というのは、例えば以下です。 ※これから、いくつかVsCodeのプラグインや、エディタのショートカットを紹介しますが他のエディタだと違うこともあります。そ

Webコーダーのわたしが普段利用しているVSCodeでの「設定」と「ショートカット」、「拡張機能」についてまとめました。 使ってないものがあれば積極的に取り入れていきましょう！ 画面レイアウトの基本 個人的に基本としている画面レイアウトがこちらです。 左側にワークスペース（ファイル群）一番大きくコーディングするためのスペース下部にターミナル（たまに問題のタブを見る） より集中したいときは、左側のワークスペースは閉じることもあります。 ※ ワークスペースはCtrl + B で 閉じたり開いたりできます。 VSCodeを導入したら設定しておきたいこと VSCodeを導入したら設定しておきたい項目をまとめました。 エディター周りの基本設定 わたしがVSCodeのベースとして設定しているのは以下の項目です。 ファイル → 基本設定 → 設定 から設定していきます。右側のユーザー設定に記載して上書き

先日AtCoderの大会前にVisual Studio Code（以下VScode）でC++のコードがコンパイルできなくなってしまい、色々試した結果上手くいきませんでした。 こういう時は最初から設定をし直す方法がよくあると思いますが、VScodeは本体のアンインストールだけしても設定ファイルが残っています。この設定ファイルを消さなければVScodeをインストールし直しても設定が戻ります（良くも悪くも）。 設定ファイルの場所 C:/Users/(ユーザー名)/.vscode このファイルを削除するとVScodeの設定が初期化されました。今回はVScode自体はアンインストールせず設定ファイルだけを削除しました。VScodeを立ち上げ直すとインストールした時の状態になっていました。ちなみにVScode本体を削除したい場合は普通のアプリケーションを削除するようにコントロールパネルからアンインスト

VSCodeを使いこなすには、まずはよく使用する操作のショートカットを覚えることです。コードを書くときに便利なショートカットとどのように機能するか視覚的に分かるチートシートを紹介します。 ショートカットはmacOS, Windows, Linux対応で、視覚的にどうなるか分かるので、記憶に残りやすいと思います。

Shibajukuさんの以下記事を参考にしました。 しかしながら、肝心のスマホでアクセスしてもサーバーへの接続でタイムアウトしてしまいます。 Visual Studio Code のLive Serverを使って実機（iPhoneなど）でプレビューする方法。 ざっくり以下の手順で進めます。 手順4でつまづきました。 Live Serverの設定を変更し、ローカルIPでサーバーを立ち上げるようにする Go Liveでサーバーを立ち上げる PCでつなげているネットワークと同じものにスマホをつなぐ スマホで2のアドレスにアクセス 記事内に、おそらくつながらない理由に関してのヒントが載っています。 自分はまさしくこの部分で引っかかり、スマホでアクセスできませんでした。 あ、もしWindowsなどでセキュリティーソフトを入れている場合、ファイアウォールでアクセスを拒否されて表示されないケースもあるか

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を深く掘り下げいて、いくつか興味深い発見がありました。人気のある機能拡張の