「Vue.js」初心者がコードを書くのにオススメなエディターとプラグインは「Visual Studio Code」+「Vetur」です。
この記事では、「VS Code」を使用する上でオススメのパッケージを紹介します。
Vue.jsのオススメな学習法は、以下の記事を参考にして下さい。
【初心者向け】Vue.js学習に超オススメなUdemy講座【知識ゼロから100時間でマスター】
オススメパッケージ
「Visual Studio Code」に導入すべきオススメパッケージは以下の通りです。
- Vetur
- ES Lint & Prettier
- Copy Relative Path
- Integrated Terminal
VS Code以外のエディターを使う場合のオススメ
「VS Code」が一番のオススメですが、「Atom」や「Sublime Text」などのエディターを利用する場合のオススメは、以下の「GitHub」リンクから見る事が出来ます。
1.Veturで出来ること
「Vue.js」のコードを書くのであれば、「Vetur」は必ず追加しておきましょう。
主に便利な機能は以下の通りです。
便利機能1：Syntax Highlighting（色付け）
Syntax Highlightingとは、テキストを分類毎に異なる色やフォントで表示する事です。
初期設定では、コードは全て「灰色表示」になっていると思います。
グループ毎に色付けされる事で、コードが大分見やすくなるのが分かりますでしょうか？
便利機能2：Snippets
Snippets（スニペット）とは、「切れ端」、「断片」という意味があります。
プログラミングでは、簡単に切り貼りして再利用出来るコードを指します。
例えば、「scaffold(足場の意味)」とタイプしてEnterを押してみましょう。すると、以下の様にテンプレートが一気に表示されるはずです。
２.Emmet（省略記法）
Emmetとは、独自の省略記法でHTML・CSSのコーディングを効率化してくれます。
こちらは、「Visual Studio Code」の基本機能として提供されています。
要素＋「Tab」が基本
Emmetでは、要素＋「Tab」が基本になります。
例えば、「!」と入力して「Tab」をタイピングすると、HTMLの基本型を生成してくれます。
要素＞要素で階層構造
「div>ul>li」とタイプしてみましょう。
すると、以下の様に階層構造を簡単に生成する事が出来ます。
要素＊数字で繰り返し
それでは、「#box>ul>li*3>a」とタイプした場合はどうでしょうか？何か呪文みたいですね。
ちなみに、「＃（シャープ）」はid属性を、「.（ドット）」はクラス属性を付与します。
連番は＄で、テキストの中身は{}を使用
.container>.box.box$*9{$}と記述してみましょう。
.box.box$と2つのクラスを繋げる事で、「box」と「box1-9」の2つのクラスを付与する事が出来ます。$で連番を振れます。
また、{}を使って、テキストの中身を記述する事が出来ます。
どうですか、圧倒的に早くコーディング出来ると思いませんか？
とりあえず、これ位を覚えて、徐々に使える様にしていけばOKです。
Emmnetの記法の更なる使い方については、こちらのページをご覧下さい。
3.ES Lint & Prettier
- ES Lint ：コードの構文チェック
- Prettier ：コード整形
3-1：ES Lint(コードの構文チェック)
ES Lintは、JavaScript のための静的検証ツールです。コードの構文チェックに使います。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一するのに役立ちます。
ES Lintの検証例
/*これはエラー*/
for (var i = 0; i < 10; i--) {
}
/*これもエラー*/
for (var i = 10; i >= 0; i++) {
}
/*これはOK*/
for (var i = 0; i < 10; i++) {
}
例えば、繰り返し処理で、上記の例では、いつまでたっても終わらないループに入ってしまいますよね。
ES Lintは、この様なエラー例を見つけてくれます。
ES Lintのルール一覧
ES Lintがどの様なルールで検証をするかは、以下のページに
3-2：Prettier
Prettierは、「コードフォーマッター（ソースコードを整形してくれるツール）」です。
PrettierをEs Lintと併用する理由
ES Lintでもコード整形は出来ますが、Prettierのコード整形の方が優れているので、ES Lintと併用して導入します。
- Prettierの方がES Lintより整形可能なカバー範囲が広い
- Prettierにはデフォルト設定があるので、設定が楽
ESLint, Prettier & Airbnb Setup
AirbnbにおけるES Lint、Prettierのセットアップの仕方は、eslint-config-airbnbとVSCode – ESLint, Prettier & Airbnb Setup参考にして下さい。
4.Copy Relative Path
Copy Relative Pathは、相対パスを簡単にコピー出来るプラグインです。
使い方は右クリックした後に、「Copy Relative Path」を選択するだけです。
5.Integrated Terminal
Integrated Terminalは、その名の通りVS Codeでターミナルを使用するための、プラグインです。
Terminalは、「ctrl + `（バックスラッシュ）」で開く事が出来ます。
6.Visual Studio CODEの便利な機能
VS CODEの便利なショートカット機能についても覚えておきましょう。
クイックファイル（Command + P）
「Command ＋ P」で実行が可能です。
表示されたウィンドウに検索したいファイル名の一部を入力すると、条件に一致したファイルが絞り込まれます。
ファイルを選択すると、そのファイルが表示されます。
コマンドパレット（Command + Shift + P）
「Command ＋ Shift + P」で実行が可能です。
実行すると、実行可能なコマンド一覧が表示され、ウィンドウに打ち込む事で絞り込んで表示させる事が可能です。
Git関連の操作を呼び出すために使う事が多いです。
ショートカット一覧
Visual Studio CODEをマテリアルデザインに変更する方法
標準のDarkモードで使用しても全く問題無いですが、折角なので「マテリアルデザインに変更して見やすくしてみます。
１.Material Themeをインストール
マテリアルデザインに変更するには、Material Themeをインストールします。
2.設定からMaterial Themeへ変更
設定の「Color Theme」からマテリアルデザインのテーマを選択すれば変更は完了です。
個人的なオススメは、「Material Theme High Contrast」です。
3.Material Icon Themeをインストール
次に、アイコンもマテリアルデザインに変更してみましょう。
方法は、「Material Icon Theme」をインストールするだけです。
アイコンが変更されているのを確認したら完了です。
おすすめ学習法
Vue.jsのオススメな学習法は、以下の記事を参考にして下さい。