|
|
<Number>: [000002AB]
<Date>: 2023/11/13 18:55:50
<Title>:
<Name>: amanojaku@管理人
|
|
|
「Visual Studio Code」に「フロントエンド」開発環境を構築する(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、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)、HTML SCSS Support、SCSS Formatter、ESLint、JavaScript (ES6) code snippets、jshint、Debugger for Chrome、」あたりのプラグインを導入すると良いでしょう(それらのプラグインはネットでオススメされているモノを適当に入れてるだけなので、詳細はご自分でググって下さい)。
同名のプラグインが複数ある場合は星の数より、ダウンロード量を重要視したほうが良いようです(良く分からない場合は1番上に表示されているプラグインが良いようです)。
「indent-rainbow」は虹色のように7色では無く、デフルトでは4色のようです。
なお良くVisual Studio Codeは便利で使いやすいなどと言われますが、それは「プラグインの導入、設定」などをした場合の話しで、「プラグインの導入、設定」などをして無いと余り使いやすくは無いです。
参考
VSCodeで拡張機能・プラグインをインストール追加する方法
https://webst8.com/blog/vscode-plugin-insttall/
【注意点、インデント整形、設定パネル、ターミナル操作、文字ザイズ変更】
※下記の注意点は必ず お読み下さい。
【備忘録】VisualStudio Code／「注意点、インデント整形、設定パネル、ターミナル操作、文字ザイズ変更」
http:../utf8/smt.cgi?r+sara/&bid+000002FD&tsn+000002FD&bts+2020/03/01%2018%3A51%3A35&
基本的に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:../utf8/smt.cgi?r+sara/&bid+00000539&tsn+00000565.&
【クロス･ブラウザ対応法】
※(フロントエンド(プロ)を目指す場合)「HTML、CSS」のみの案件と言えど、Internet Explorerバグ対応のためのPolyfillなどが必要になる場合が有ります、(Polyfillでは無く)CSSで対応しなければならないバグもあります。
最近はInternet Explorer未対応OKと言う案件もあるようですが、古いモバイル端末対応は必須なので「ベンダー･プレフィックス、ES5コード」対応は必須になります。
CSSを古いモバイル端末やInternet Explorer 11に対応(クロス･ブラウザ)する場合には、CSSのベンダー･プレフィックスが必要になる場合があります。
(恐らく)CSS3を使ってる場合にはベンダー･プレフィックスが必要になると思われます(CSS3は使わずにCSS2だけしか使わないならベンダー･プレフィックスは不要かも)。
(普通にベンダー･プレフィックスを付ければ良いだけでしょ、と勘違いしている人も多いでしょうが)CSSプロパティのvalue名や書式が違う場合も有り、人力では無理なので、ベンダー･プレフィックス用のツールが必須になります。
(ベンダー･プレフィックスを付けたとしても)古すぎるモバイル端末では高度なCSSが効かない場合も有ります。
「Live Sass Compiler」はSass対応だけで無く、(設定は必須ですが)ベンダー･プレフィックスも自動的に付与可能な優れモノで、Sassを使わなかったとしても、ベンダー･プレフィックスに対応したいなら必須と言って良いでしょう。
※勿論、ベンダー･プレフィックスに対応するのに「Live Sass Compiler」以外のツールでも良いですが、それでも結局は設定が必要になるので、下記の記事が理解できないようなら、「Live Sass Compiler」以外のツールでも無理と思って良いでしょう。
Visual Studio Codeフロントエンド開発環境／「Live Sass Compiler」導入
http:../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:../utf8/smt.cgi?r+sara/&bid+000005AC&tsn+000005AC&bts+2022/02/28%2004%3A39%3A10&
蛇足ですが、Internet Explorer 11にはバグが有るようです。
(Polyfillは新機能に対応するためのライブラリですが)Internet Explorer 11の「object-fit、position:sticky、css-variables」のバグを補正してくれるPolyfillも有るらしいです。
なおInternet Explorer 11においてCSS Gridで-ms-grid-rows(grid-template-rows)は必須(省略できない)そうです。
備忘録：Internet Explorer 11におけるバグ対応「object-fit編」
http:../utf8/smt.cgi?r+sara/&bid+0000068A&tsn+0000068A&bts+2022/07/28%2001%3A54%3A29&
【「ビルトインJavaScriptデバッガー+DevTools」使用法】
Visual Studio Codeフロントエンド開発環境／「ビルトインJavaScriptデバッガー+DevTools」使用法
http:../utf8/smt.cgi?r+sara/&bid+0000061D&tsn+0000061D&bts+2022/04/19%2018%3A51%3A55&
【Emmet記法】
【備忘録】VisualStudio Code／スニペット：『オリジナル･テンプレートの「登録、呼び出し」方法』
http:../utf8/smt.cgi?r+sara/&bid+00000649&tsn+00000649&bts+2022/05/23%2023%3A15%3A40&
タグ名を入力して[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」フォルダを開く。
参考
備忘録【入門】：Visual Studio Code／(フロントエンド開発環境)「Live Preview」導入
http:../utf8/smt.cgi?r+sara/&bid+00000758&tsn+00000758&bts+2023/08/26%2019%3A04%3A33&
|
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。
