Web開発者のワークフローをスピードアップするためのツールとアプローチ

公開: 2020-12-17

Web開発には、膨大な量のスタック、ツール、プログラミング言語などがバンドルされています。ここでのツール/ワークフローのいくつかは、場合によっては機能し、他の場合には機能します。これにさらにアプローチするには、この投稿をWordPressフロントエンド開発者の観点から書かれたものと考えてください。ただし、ツールは非常に幅広く、多くの場合に使用できます。

1 – tmux

ワークフローでの最大の変更の1つは、マシンにtmuxをセットアップしたときでした（macOSですが、もちろんLinuxでも機能します）。私はそれを真の可能性に利用していないかもしれませんが、それは素晴らしい仕事をし、プロジェクトを即座に切り替えることができるので、多くの時間を節約できます。

tmuxには、プロジェクトのGitHubリポジトリに書かれた長い「はじめに」ページがあります。また、有効にできるマウスサポートを備えた箱から出してすぐにキーボードで動作します。 tmuxは、システム間で共有できる構成ファイルを使用して、すぐにセットアップできます。

では、ワークフローはどのように変わりましたか？

tmuxを使用すると、キーを2回押すだけで、画面を分割してプロジェクト内を移動する簡単な方法が提供されます。したがって、あるビューで「gulp」を実行し、別のビューで実行するコマンド、3番目にサーバーへのSSH、4番目にいくつかの統計を実行できます。
「タブ」のような各プロジェクトのウィンドウを提供します。ここでは、2回のキー押下を使用して別のプロジェクトに切り替えることができます。私は常に約20以上のプロジェクトをタブで開いており、新しいプロジェクトで作業する必要があるときは、そこに切り替えるだけで、gulpはすでに実行されています。私は正しいディレクトリにいて、2秒以内に作業を開始できます。
セットアップ全体を常にオンに保ちます。あなたが仕事を始めるたびにそれをする必要はありません、それはいつもそこにあります。マシンの電源がオフになり、再度起動した場合は、（単純なプラグインを使用して）標準のセットアップに「復活」するだけで、約5秒で再び起動します。それを行うにはI7-9900Kで100％の使用が必要なのはおかしいです。
ウィンドウ内の各パネルは独自のインスタンスです。そのため、パネルごとに異なるノードバージョンを簡単に実行できます。

ソース

2 –アルフレッド（または代替）

AlfredはMac用の「生産性アプリ」であり、WindowsやLinuxにも同等のものがあります。アルフレッドが行うことのいくつかは次のとおりです。

数文字入力するだけで、開いているプログラムにすばやくアクセスできます
すばやくディレクトリに移動
ポップアップで直接必要なものが見つかるまで参照します
さまざまなプログラムでファイルを開く
統合されているWebやプログラムなどを検索します。

そのパワーパックには、作業を自動化できる他の多くの「ワークフロー」統合があります。

アルフレッドのホームページ

また、すばやくアクセスできる計算機としても機能し、OS全体でスニペットを管理し（アクセスする必要はなく、自動展開するだけです）、クリップボードの履歴を保存し（ライフセーバー）、端末と統合します。あなたはそれについてのすべてをアプリサイトで見つけることができます。

使い方：

もちろん、まずはアプリを開きます。アイコンのポインタをクリックするのではなく、文字を入力するだけです。
CSSを作成するときの計算機として使用します（EM値でよく発生します）。
クリップボードの履歴–クリップボードに5〜6個スタックして、必要に応じてコードエディタに貼り付けることがあります。または、数日前に戻って、メールやスニペットなど、あるプロジェクトで何かを実行し、別のプロジェクトで役立つ小さな関数を見つけます。コードの閲覧には10分以上かかるのではなく、2〜3秒かかります。
設計作業を行うときは作業ディレクトリに移動するか、ファインダーを参照せずにXDファイルに直接移動します。ファインダーでは1分程度であるのに対して2〜3秒かかります。
スニペット–結果のスクリーンショット、コミットリンクを追加する場所、次の開発者へのメッセージ、ステージング中かどうかのステータスなどを含む、Asana用の素敵な「コメント」スニペットを用意しました。これは、チームが簡単にフォローできるすべてのコメントにわたって一貫したメッセージです。スニペットを入力して展開するのに2秒もかかりません。

3 –ターミナルツール/プラグイン

Oh My Zsh –端末を便利にする–ZSHは宝物です。選択できるプラグインは270以上あります。単純な設定ファイルを使用しており、古い設定から新しい設定に移行するのに数分しかかかりませんでした。 tmuxも同じことをするので、開発セットアップ全体は数分でした。選択できるプラグインの数が非常に多いため、ワークフローに役立つものがきっと見つかります。

私が利用しているZSHで最も頻繁に使用されるプラグインの1つは「Z」です。これは、物事にアクセスするために使用するパスを学習します。その後、いくつかのキー文字を使用して、どこにでも移動できます。

例： $z teは/folder/path/inner/more/content/testingジャンプし/folder/path/inner/more/content/testing -以前に行った場所へのショートカットです。ディレクトリ間のジャンプを簡単にします。

ああ私のzsh

exa –よりきれいなLS出力。あなたは彼らのウェブサイトでもっと見つけることができます。要するに、それはファイルとディレクトリの速くて素晴らしい出力も提供します。繰り返しますが、かなりです。

exaホームページ

ripgrep –超高速検索。数千行のコードで数千のファイルを検索する必要がある場合は、あまり待つ必要はありません。 Ripgrepはあなたを救うためにここにいます。そしてもちろん、他にもたくさんの便利な機能と意味のあるフラグが付属しています。また、結果を意味のあるものに保つために、.gitignoreファイルに従います。

ソース

git-open –Github上のPaulIrishによる小さなツールで、言うことを実行します–gitリポジトリを開きます。あなたが言うかもしれない大したことは何ですか？ 6か月ぶりに取り組んだそのプロジェクトの正確なURLを覚えていますか？そこに移動するのにどのくらい時間がかかりますか？このコマンドはあなたのためにそれを直接開きます。さらに、正しいブランチに移動します。

あなたのCLI！私の場合、私たちの仕事はWordPressを中心に展開しています。これは、WPインストールを操作できるCLIとして喜んで使用できます。簡単な新しいサイトのセットアップでは、mkdir（フォルダーの作成）、git clone（リポジトリのクローン作成）、wpコアのダウンロード、wp db create、wp db import（すべてWP-CLIから）などの基本的なコマンドを使用します。すべてを入力して簡単に設定すると、1分後に新しいセットアップが実行されます。

使用しているツールで機能する同様のCLIが他にあるかどうかを再確認してください。

ソース

4 –VSコードプラグイン

私が選んだコードエディター/ IDEはVSCodeです。以前は崇高でしたが、より強力なマシンを使用すると、大きなドキュメントを下にスクロールするときに以前に取得した3FPSなしでVSコードを適切に使用できるようになりました。

VSコード

以下のリストでは、ESLint、GitLense、テーマ/アイコンパックなどの非常に有名な拡張機能は、ほとんどすべての記事で十分にカバーされているため、使用しません。

自動終了タグ–毎回終了タグを書き込む必要がないようにします。 EmmetでクリーンなHTMLを実行する場合は役に立ちませんが、簡単な編集を行う必要がある場合は役立ちます
タグの名前変更の自動化–編集を行うときにも非常に役立ちます。そのうちの1つだけを編集すると、終了/開始タグが直接変更されます。
コードスペルチェッカー–タイプミスのあるものを書いたときに、PRに恥ずかしさを感じる必要がなくなりました。または、オープンソースプロジェクトのために物事を美しく保つためにそれを使用してください。
重複アクション–既存のファイルから新しいファイルを作成するのに非常に役立ちます。これは、Cmd + Pで実行するコマンドです。フロントエンドで新しいsass / jsファイルを作成するのに最適です。
Jumpy –素晴らしいツールです！定義したショートカットを押すだけで、各単語の横に小さな2つの文字ボックスが出力されます。それらを入力すると、カーソルがそれにジャンプします。マウスを使用せずにファイル内を移動する高速な方法。

そしてプロのヒント/リマインダー–VSコードで画像をプレビューできます。 UIを開発し、デザイナーからの画像をフォローするときは、それをビューポートにドラッグして、横から見ることができます。

要するに：

それはそこに素晴らしいツールと楽器でいっぱいです。繰り返し作業をしているのを見つけたり、「もっと簡単な方法はないのではないか」と思ったら、検索してください。おそらくもっと速い方法があります。 1年に数回それを行うと、非常に速いペースで作品を制作できる、きついワークフローになります。

可能であれば、いくつかの「安全な手段」も見つけてください。リンティングをセットアップし、ビルドセットアップを自動化し、使用する「スターターテンプレート」をビルドし、自分用に小さなCLIを作成することもできます。