トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"沙羅"

★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク・ページの表示 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/ を ご利用 下さい。

Index Menu
(2)<FirstTitle>:Javaデモ/グラフィック「Figure」(1) オブジェクト指向プログラミング <LastTitle>:Javaデモ/Swingグラフィック「Thread、Figure」(2) オブジェクト指向プログラミング (1)<FirstTitle>:Javaデモ/CUI対戦デモ(10) オブジェクト指向プログラミング <FirstUser>:amanojaku@管理人 (4)<FirstTitle>:JavaScriptデモ/FieldRoll 011 オブジェクト指向プログラミング <LastTitle>:JavaScriptデモ/FieldRoll 016 オブジェクト指向プログラミング (1)<FirstTitle>:【備忘録】VisualStudio Code/「インデント整形、設定パネル、ターミナル操作、文字ザイズ変更」 <FirstUser>:amanojaku@管理人 (2)<FirstTitle>:Webページにおける基本的な留意点 <LastTitle>:Webページにおける基本的な注意点(3) (2)<FirstTitle>:Chromeモバイル・エミュレーターの操作法 <LastTitle>:モバイル・エミュレーター用のフォント・サイズ自動調整用「CSS、JavaScript」 (1)<FirstTitle>:SEO(Search Engine Optimization:検索エンジン最適化) <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [000002AB]  <Date>: 2022/05/10 19:39:21
<Title>: Visual Studio Codeでフロントエンド開発環境を構築する
<Name>: amanojaku@管理人

「Visual Studio Code」IDE(Integrated Development Environment:統合開発環境)に「フロントエンド」開発環境を構築する(Visual Studio Codeはインストール済みとする)。

参考

【図解たっぷり】VSCodeの使い方入門!
https://skillhub.jp/blogs/235

「Visual Studio Code」に「Japanese Language Pack for Visual Studio Code、Visual Studio IntelliCode、EvilInspector、indent-rainbow、Material Icon Theme、Clipboard Ring、JiShuTuan Prettier - Code formatter、Bracket Pair Colorizer 2、Color Highlight、Auto Rename Tag(Jun Han)、markdownlint、Auto Close Tag、Auto Complete Tag、Highlight Matching Tag、HTMLHint(Mike Kaufman)、htmltagwrap、CSS Formatter、HTML CSS Support、stylelint-plus、IntelliSense for CSS class names in HTML(Zignd)、CSS Peek、HTML SCSS Support、SCSS Formatter、ESLint、JavaScript (ES6) code snippets、jshint、Live Server、Debugger for Chrome、」あたりのプラグインを導入することを推奨します。
同名のプラグインが複数ある場合は星の数より、ダウンロード量を重要視したほうが良いようです。
「indent-rainbow」は虹色のように7色では無く、デフルトでは4色のようです。

「Visual Studio Code」が完全に起動しても、プラグインが全て起動するまでに遅延が発生するので、慣れないと使いづらいかもしれません。
また 「Visual Studio Code」の文字の変換機能にはバグがあるようなので、文字の変換は他のエディッタで変換すると良いでしょう。
[Ctrl]+[C]でコピーが効かない場合もあるので注意が必要です。

基本的にsettings.jsonで なんらかの設定をすることが強く推奨されます、設定しないと「Color Highlight」がウザイので、設定しないなら「Color Highlight」は導入しない方が良いでしょう。
下記『Visual Studio Code開発環境/settings.json(0)』を参考にして[ユーザー]タブ側のsettings.jsonに設定すると良いでしょう。
「設定、追加」方法は下記『Visual Studio Codeフロントエンド開発環境/「Live Sass Compiler」導入』を参考にして下さい。

Visual Studio Code開発環境/settings.json(0)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000539&tsn+00000565.&

【クロス・ブラウザ】

CSSをInternet Explorer 11や古いスマホに対応(クロス・ブラウザ)する場合には、ベンダー・プレフィックスが必要になる場合があります。
CSSプロパティのvalue名が違う場合も有り、人力では無理なので、ベンダー・プレフィックス用のツールが必要になります。
また スマホでは高度なCSSが効かない場合があるので注意が必用です。

「Live Sass Compiler」はSass対応だけで無く、ベンダー・プレフィックスも自動的に付与可能な優れモノで、Sassを使わなかったとしても、ベンダー・プレフィックスに対応したいなら必須と言って良いでしょう。

Visual Studio Codeフロントエンド開発環境/「Live Sass Compiler」導入
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000050E&tsn+0000050E&bts+2021/11/18%2011%3A36%3A45&

JavaScriptもES6コードで記述している場合に、Internet Explorer 11や古いスマホに対応(クロス・ブラウザ)させるには、BabelなどでES5コードでコンパイル(トランスパイル)しなければなりません。
つまり JavaScriptもES5コードで書けるなら、初めからES5コードで書いた方が良いでしょう(とは言うもののES6コードの方が便利では有りますが…)。

入門:Visual Studio Code/「Babel」開発環境を構築する
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000005AC&tsn+000005AC&bts+2022/02/28%2004%3A39%3A10&

【「ビルトインJavaScriptデバッガー+DevTools」使用法】

Visual Studio Codeフロントエンド開発環境/「ビルトインJavaScriptデバッガー+DevTools」使用法
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000061D&tsn+0000061D&bts+2022/04/19%2018%3A51%3A55&

【ターミナル操作、インデント設定・整形】

【備忘録】VisualStudio Code/「インデント整形、設定パネル、ターミナル操作、文字ザイズ変更」
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+000002FD&tsn+000002FD&bts+2020/03/01%2018%3A51%3A35&

【Emmet記法】

「!」を入力して[Tab]キーを押すと、超単純なHTMLテンプレートが自動入力される。

タグ名を入力して[Tab]キーを押すと、「開始タグ、終了タグ」が自動入力される。

タグに「id名、クラス名」の付与が可能。
「div#hoge.huga」を入力して[Tab]キーを押すと、下記のコードが自動入力される。

> <div id="hoge" class="huga"></div>

複数の同じタグを一気に自動入力が可能、「id名、クラス名」の付与、連番も可能。
「div#hoge$.huga{piyo$}*3」を入力して[Tab]キーを押すと、下記のコードが自動入力される。

> <div id="hoge1" class="huga">piyo1</div>
> <div id="hoge2" class="huga">piyo2</div>
> <div id="hoge3" class="huga">piyo3</div>

(基本的には それだけ覚えておけば充分)もっと詳細を知りたいなら下記参照。

【Visual Studio code】Emmetよく使うものまとめ
https://diy.ushaken.com/webs/html-css/882/

【プロジェクト用フォルダを作成】

とりあえず、マイドキュメントに「web000」フォルダを作成。

【Visual Studio Codeを起動】

【プロジェクト用フォルダを開く】

メニュー・バーから[ファイル]→[フォルダを開く]から「web000」フォルダを開く。

【「Live Server」ローカル・サーバーの使用方法】

「HTML」ファイルなどを作成したら、ウインドウ下部の「Go Live」(1番目の画像の赤く囲われた所)をクリックすると表示が「Port:5500」(2番目の画像の赤く囲われた所)に変化しWebページが表示されます。
※既に「Debugger for Chrome、Live Server」プラグインはインストール済みとする。
※「Live Server」は「HTML」ファイルなどがセーブされると、最新の状態がブラウザに反映されるハズですが、たまにセーブしても最新の状態が反映されない事も有るので、その場合はブラウザで『[Ctrl]+[F5]』(スーパー・リロード)すれば良いでしょう。
※ブラウザの起動に多少 時間が掛かるので、VisualStudio Codeを起動する前に、ブラウザを起動しておいた方が良い。

Block( Address 00000637 Identity 000002AB )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.