Visual Studio CodeでVue.jsの開発を行うためにインストールしているプラグイン
本記事では、Visual Studio Codeを使用してVue.jsを用いた開発を行うために
インストールしているプラグインについて紹介していきます。
本記事の内容です。
vetur
Vue.jsのコードスニペットです。入力補完などを行ってくれるのですが、触ってみたところ、
JavaScriptファイルにしか対応していないようです。
VueHelper
veturと同じく、Vue.jsのコードスニペットです、こちらは、HTMLファイルやJavaScriptファイルの入力補完も行ってくれます。
正直、こちらだけインストールしておけばいい様な気がするのですが、
veturと競合して変な動作等をしないようなので、両方インストールしています。
Visual Studio CodeでHTML+CSS+JavaScriptの開発を行うためにインストールしているプラグイン
本記事では、Visual Studio Codeを使用して
HTML + CSS + JavaScriptを用いた開発を行うために
インストールしているプラグインについて紹介していきます。
本記事の内容です。
HTML関係
HTML Snippets
HTML5に対応したスニペットです。HTML Hint
HTMLの静的解析ツールです。CSS関係
IntelliSense for CSS class names in HTML
CSSクラスの入力補完プラグインです。JavaScript関係
ES Lint
JavaScriptの静的検証ツールです。その他
Open in browser
HTMLファイルを右クリックすると、デフォルトブラウザで開くかその他のブラウザで開くかを問われるメニューが追加されます。
Windows10(Build1803)でGoogle Chromeが正常に動作しない件
2018/11/08追記
本記事の解決策が見つかりましたので、記事にしました。
j-levia.hatenablog.jp
新しくPCを購入し、Windows10をBuild1803にアップグレードした結果、
Google ChromeとVivaldiが正常に動作しなくなったため、メモがてら書いておきます。
結論から言ってしまうと、本記事には起こった出来事が書かれているだけで、
解決策は記載していません。
皆さん、Windows10のアップグレードにはご注意を。
本記事の内容です。
何が起こったのか?
Windows10を2018/04あたりの時期に降ってきたBuild1803にアップグレードした結果、Google Chromeと
Vivaldiが正常に動作しなくなりました。
具体的には、Webサイトへアクセスしても、
応答時間が長すぎる関係で「このサイトへはアクセスできません。」と
表示されるようになりました。
下記の情報からすると、どうやら証明書周りが正常に動作していないらしく、
2018/05のWindows Updateで直るようなのですが、私の環境は直りませんでした。
https://productforums.google.com/forum/#!topic/chrome-ja/QGwBg1f74vI;context-place=topicsearchin/chrome-ja/1803
https://productforums.google.com/forum/#!topic/chrome-ja/K3DdvG87870;context-place=topicsearchin/chrome-ja/1803
どうしたらいいのか?
諦めて、今年の秋ごろに降ってくるであろう大型アップデートを待ちましょう。もしくは、IE11やEdgeといったMicrosoft製のブラウザを使用しましょう。
迂闊にアップグレードした結果、こういうことになるとは。
Microsoftには、こういった時のために、サポート期間中は大型アップデート過去分の
OSイメージ(ISO)を公式サイトで公開および配布していただきたいですね。
webpackで本番用と開発用にビルド方法を切り替える
本記事では、webpackで本番用と開発用にビルド方法を
切替える方法を紹介していきます。
本記事の内容です。
本番用ビルド設定
webpack.config.jsに、mode行を追加します。内容は、下記の通りです。
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: `./js/index.js`, // 下記の1行を追加する。値は'production'。 mode: 'production', // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/dist`, // 出力ファイル名 filename: 'main.js' }, };
上記の設定でビルドを行うと最適化された状態でjsファイルの出力が行われます。
また、mode行を省略した時も、上記と同じ設定でビルドされるようです。
開発用ビルド設定
webpack.config.jsに、mode行およびdevtool行を追加します。内容は、下記の通りです。
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: `./js/index.js`, // 下記の1行を追加する。値は'development'。 mode: 'development', // 下記の1行を追加する。値はお好みで。 devtool: 'cheap-module-eval-source-map', // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/dist`, // 出力ファイル名 filename: 'main.js' }, };
上記の設定でビルドを行うと、ブラウザの開発者ツール上でデバッグ可能な形で
jsファイルが出力されます。
ブラウザ上でソースコードを確認、デバッグ実行を行う際は、
webpack://
という場所にファイルが出力されますので、注意してください。(Chromeで確認。)
IE11の場合は、jsファイルを列挙した際にそのまま表示されるようです。
開発用ビルド設定のdevtoolについて
上記で説明したdevtoolの値には、下記サイトで説明されている値を設定することができます。Devtool
特に好みが無ければ、上記と同じ
cheap-module-eval-source-map
で良いと思います。
webpackを使用してjsファイルをまとめる方法
本記事では、webpackを使用してjsファイルを
まとめる方法を紹介していきます。
本記事の内容です。
webpackって何?
簡単に説明しますと、複数のリソースファイル(jsファイル、cssファイル、画像ファイル等)をまとめた配布物を生成するビルドツールです。
これを使用すると、複数のファイルを配布する必要が無くなり、
また、ブラウザでファイルを読み込む時に複数のファイルを読み込む必要が
無くなるため、パフォーマンス向上を図れます。
また、公式サイトは下記になります。
webpack.js.org
webpackを使用する準備
コマンドプロンプトを開き、webpackを使用する対象のソースコードが存在するフォルダへ移動します。
その後、下記のコマンドを実行して、package.jsonを生成します。
npm init -y
webpackのインストール
package.jsonの生成が終わったら、次は、下記のコマンドを実行してwebpackを使用するためにwebpack本体のインストールを行います。
npm i -D webpack webpack-cli
webpackの設定ファイル作成
webpackのインストールが終わったら、package.jsonが存在するフォルダにwebpackの設定ファイル(webpack.config.js)を作成します。
下記の内容は、index.jsをメインにdistフォルダへ、
main.jsという名前で複数のjsファイルをまとめた結果を出力するようになっています。
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: `./js/index.js`, // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: `${__dirname}/dist`, // 出力ファイル名 filename: 'main.js' }, };
JavaScriptソースコードの準備
今回は、index.jsとindex2.jsという2つのファイルを用意し、1つにまとめてみます。それぞれのファイルの内容は、下記の通りです。
index.js
import * as hogeFile from './index2'; $(function() { hogeFile.hoge(); hogeFile.fuga(); });
index2.js
export function hoge() { alert('hoge'); } export function fuga() { alert('fuga'); }
ビルド
下記のコマンドを実行し、ビルドを行います。npx webpack
以上で、複数のjsファイルをまとめることができます。
jsファイルをまとめた結果
最後に、参考までに今回jsファイルをまとめた結果を下記に記載しておきます。!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),$(function(){alert("hoge"),alert("fuga")})}]);
JavaScriptの処理をブラウザ上で止めてデバッグする方法
本記事では、JavaScriptの処理をブラウザ上で止めて、
デバッグする方法について紹介していきます。
本記事の内容です。
JavaScriptのソースコードに一文加える
JavaScriptのソースコード内に、debugger;
という一文を加えます。
すると、後述するブラウザの開発者ツールを開いた状態で、
debugger; の所で処理を止めることができます。
(ブレークポイントを設定した時と同じ動きになります。)
$(function() { // 下記の debugger; という一文を加えると、 debugger; // 処理がここで止まる alert('debug!'); });
ブラウザの開発者ツールを開く
ブラウザを開き、F12を押し、開発者ツールを開きます。その後、該当するJavaScriptの処理を実行させると、
debugger; の所で処理が止まり、そこからステップ実行等行えるようになります。
後は状況に応じてF10でステップ実行するなり、
F11で関数内にステップインするなり、
F8で処理を実行するなり、ご自由にどうぞ。