Vueを例として使用して開発の生産性を向上させる-パート1







毎日どれくらいの頻度で同じ仕事をしていますか? 私はあなたが思っている以上にそれを賭けます。 プロパティ、ウォッチャー、または新しいメソッドの作成などの単純なアクションは、アプリケーションの作成時に何度も実行されます。







これらの一見小さなアクションは、長い期間を形成します。 私たちの目標は、可能な限り少ないアクションで可能な限り多くのことを行うことです。







コードエディター



効率はツールボックスから始まります。 安っぽいツールを使用している場合、単純なことを行うのは難しくなります。 私たちが持っているツールを振り払う必要がある場合もあれば、何か新しいことを試す必要がある場合もあります。 覚えて、もっと賢く、もっともっと。







Visual Studio Code- ダウンロード



多くのコードエディターを使用できますが、Microsoft VS Codeのエディターの機能の使用に焦点を当てます。 ネイティブのTypescriptサポートと、非常に大規模な拡張MODコミュニティがあります。 ダウンロードリンクを使用して、オペレーティングシステムを選択します。







画像







インストールが完了したら、vscodeを実行します。 これで、拡張機能のインストールを続行する準備ができました。







拡張機能/プラグイン



以下は推奨される拡張機能のリストです。 彼らの目標は、vscodeで開発時間を改善することです。インストールも簡単で、拡張ページで[ インストール ] クリックするだけです。







拡張機能のインストール







VS Codeインターフェースから、上部ペインの[ 表示]> [拡張機能 ]をクリックして、これを行うこともできます。 拡張パネルが開きます。













設定の同期- インストール



この拡張機能を使用すると、ローカル設定の同期コピーを保持したり、他の設定をインポートしたりできます。 これは、特に複数のコンピューターから開発し、(できれば)1回だけ実行する場合に非常に便利です!







Vetur- インストール



Vueで作業する場合、プラグインできる便利な拡張機能が不足することはありません。 すべての拡張機能のうち、veturは必須です。 構文の強調表示、スニペット、インテリセンス、デバッグなどを支援します。







自動終了タグ- インストール



Visual Studio IDEまたはSublime Textのように、終了HTML / XMLタグを自動的に追加します。







自動インポート- インストール



使用可能なすべてのインポートについて、コードの実行と完了を自動的に検出、分析、および強制します。 TypescriptおよびTSXで動作します。







タグの自動名前変更- インストール



Visual Studio IDEのように、ペアになったHTML / XMLタグの名前を自動的に変更します。







ブラケットペアカラーライザー- インストール



この拡張により、色を使用して対応するブラケットを識別できます。 ユーザーは、一致する文字と使用する色を決定できます。







ESLint- インストール



ESLintをVS Codeに統合します。 ESLintに慣れていない場合は、 ドキュメントを読むことができます







GitLens- インストール



GitLensは、Visual Studio Codeに組み込まれているGitの機能を拡張します。 Git-blameアノテーションを使用してコードのオーサーシップを簡単に視覚化し、Gitリポジトリーを簡単にナビゲートおよび探索し、強力な比較コマンドで貴重な情報を取得するなどの手助けをします。







VS Live Share- インストール



リモートで作業したことがある場合、他の開発者とのデバッグがどれほど複雑であるかを理解できます。 Visual Studio Live Shareを使用すると、他のユーザーとリアルタイムで共同編集およびデバッグできます。







テーマ



これは主観的なサプリメントであり、最適なものを常に選択する必要があります。







マテリアルテーマ- インストール



マテリアルデザインで毎日働くことで、広く人気のあるマテリアルテーマに無関心になりました。 それは柔らかい色をしており、目が何時間も連続してコードを見て流れません。 8つのテーマのバリエーションと大きなオプションオプションが付属しています。













テーマアイコンテーマ- インストール



Material Themeにはフォルダアイコンをカスタマイズする機能がありますが、Material Icon Themeには、新しいvue-cli-3 vue.config.jsなど、多くの新しいファイルタイプ用のオプションとカスタムオプションがあります。













フォント



開発のもう1つの重要な側面は、エディターフォントです。







FiraCode- インストール



非常によくできたオープンソースのモノフォントで無料です!













FiraFlott- インストール



FiraCodeのMonoフォント(太字の太字フォントも含む)を組み合わせたフォント。イタリックフォントとしてFlottFlottを使用したFont-Ligaturesも含まれます。







OperatorMono- インストール



推奨される唯一の有料フォントの1つ。 イタリック体が非常にきれいです。







フォントを変更するには、 [ファイル]> [設定]> [設定]に移動し、検索バーにフォントを入力します。













追加のヒント



veturなどのプラグインにはscaffoldのような便利なスニペットが既に含まれていますが、まだ改善の余地があります。







スニペット- インストール



反復タスクをスニペットに変換して、タスクの数を減らします。 datacomputeなどのVueプロパティを短縮したい













コミット- インストール



semverに従う場合、これを配置する必要があります。commitizenはコミットメッセージの書き込みを想定し、リリースに関するコメントの書き込みなどを自動化できるようにします。













Gitエイリアス- インストール



グラフィカルインターフェイスとVSCODEの組み込みサポートを使用してgitを操作するための多くの優れたオプションがあるという事実にもかかわらず、私は今でも多くの場合cliを使用します。













おわりに



この記事では、効果的なワークフローを作成するための基本条件について説明しました。 これらのヒントは、プロセスとそれを改善する方法について考えるためのものです。







次の記事では、新しいツールの使用方法と、コーディング標準、継続的統合、テストなどを使用してそれらを使用する方法をお教えします。








All Articles