フロントエンド環境を一から構成し、必要なソフトウェアとプラグインをインストールする

序文

フロントエンド開発は急速に発展している分野であり、フロントエンド開発者はさまざまなテクノロジーとツールを習得する必要があります。初めてジョブに参加するときは、フロントエンド開発を開始する前に、必要なソフトウェアやプラグインのインストールなど、フロントエンド開発環境を構成する必要があります。この記事では、フロントエンド環境を一から構築し、必要なソフトウェアとそのプラグインをインストールする方法を紹介します。

1.Node.jsをインストールする

Node.jsこれは、サーバー側でコードChrome V8を実行できるエンジンベースの JavaScript 実行環境です。JavaScriptフロントエンド開発で一般的に使用されるビルドツールとパッケージマネージャー ( やなど) はnpmすべてwebpackNode.js に依存する必要があります。Node.js 公式 Web サイト ( https://nodejs.org/en/ ) から、対応するバージョンのインストールパッケージをダウンロードしてインストールします。LTSより安定しており信頼性が高い (長期サポート) バージョンを選択することをお勧めします。

インストールプロセス中に、必要に応じてインストールパスとその他のオプションを選択できます。インストールが完了したら、コマンドラインにとコマンドをnode -v入力して Node.js と npm のバージョン番号を確認し、インストールが成功したことを確認できます。npm -v

2.エディタをインストールする

エディターはフロントエンド開発者が最も一般的に使用するツールの 1 つであり、開発効率とコードの品質を向上させることができます。一般的なエディタにはVisual Studio Code、、、Sublime TextなどAtomがあります。この記事では、強力な機能と豊富なプラグインライブラリを備えた、現在最も人気のあるフロントエンド開発ツールの 1 つであるため、Visual Studio Code例。

VS Code 公式 Web サイト ( https://code.visualstudio.com/ ) から、対応するバージョンのインストールパッケージをダウンロードします。
ダウンロードが完了したら、インストールパッケージをダブルクリックし、指示に従ってインストールを完了します。必要に応じて、インストールパスやその他のオプションを選択できます。
インストールが完了したら、VS Code を開くと、シンプルなエディターインターフェイスが表示されます。

3. バージョン管理ツールをインストールします。

バージョン管理ツールは、コードの変更の管理と追跡に役立ちます。一般的に使用されるバージョン管理ツールはですGit。Git にインストールする手順は次のとおりです。

ブラウザで「 Git 」を検索し、公式 Web サイトhttps://git-scm.com/にアクセスします。
ダウンロードボタンをクリックし、オペレーティングシステムに応じて対応するインストールパッケージを選択します。
ダウンロードが完了したら、インストールパッケージをダブルクリックし、指示に従ってインストールを完了します。
コマンドラインツールを開き、実行してgit --versionGit バージョン番号を表示し、インストールが成功し、対応するバージョン番号が表示されていることを確認します。
Git を使用する前に、ユーザー名や電子メールアドレスの設定など、いくつかの基本的な構成を実行する必要があります。これは、次のコマンドを使用して構成できます。

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

4. ブラウザをインストールする

Web アプリケーションのデバッグとテストには、最新のブラウザを選択してください。一般的な選択肢にはGoogle Chrome、、、Mozilla FirefoxおよびがありますMicrosoft Edge。この記事では、をGoogle Chrome例。

Chrome 浏览器Vue.js Devtoolsこれは、フロントエンド開発で最も一般的に使用されるブラウザの 1 つであり、などReact Developer Toolsの一般的に使用される開発者ツールプラグインをインストールできます。Google Chrome にインストールする手順は次のとおりです。

ブラウザで「Google Chrome」を検索し、公式サイト（https://www.google.com/chrome/）にアクセスします。
ダウンロードボタンをクリックし、オペレーティングシステムに応じて対応するインストールパッケージを選択します。
ダウンロードが完了したら、インストールパッケージをダブルクリックし、指示に従ってインストールを完了します。インストールプロセス中に、必要に応じてインストールパスやその他のオプションを選択できます。
インストールが完了したら、Chrome ブラウザを開くと、シンプルなブラウザインターフェイスが表示されます。

Chrome DevTools開発中に、コードのデバッグやパフォーマンスの分析に使用できます。

5. インストールパッケージ管理ツール

パッケージ管理ツールは、オープンソースライブラリとフレームワークをインストールおよび管理するために、フロントエンド開発でよく使用されます。一般的な選択肢にはnpmとがありますYarn。Node.js をインストールすると、npm が自動的にインストールされます。コマンドラインツールを開いて、npm -vインストールが成功し、対応するバージョン番号が表示されることを確認します。

を使用して、npmプロジェクトが依存するパッケージやモジュール ( React、Vue.jsなどjQuery)をインストールできます。コマンドラインでプロジェクトディレクトリを入力し、npm install 包名コマンドを入力して対応するパッケージをインストールします。

実際の開発では、などの他のパッケージ管理ツールを使用する必要がある場合がありますYarn。コマンドラインにコマンドを入力してnpm install -g yarnYarn をインストールできます。インストールが完了したら、yarn installコマンドを使用して、プロジェクトが依存するパッケージとモジュールをインストールできます。

6. 必要な VS Code プラグインをインストールします

VS Codeさまざまな言語やフレームワークの開発をサポートする強力なエディタです。VS Code では、さまざまなプラグインをインストールして機能を拡張できます。一般的に使用される VS Code プラグインをいくつか示します。

1. 必須のプラグイン

ESLint:開発者が文法エラーをチェックし、コードスタイルを標準化し、修復提案を提供するのに役立つコードチェックツール。、、などの複数の仕様をサポートします。VS Code で ESLint プラグインを使用すると、リアルタイムのコード検査とエラープロンプトを実装でき、コードの品質が向上します。JavaScriptAirbnbGoogleStandard
Prettier:コードフォーマットツール。コードを自動的にフォーマットし、コードスタイルを統一するために使用されます。
Bracket Pair Colorizer:ブラケットマッチングプラグイン。コード構造を見やすくするためにブラケットに色を追加するために使用されます。
Auto Rename Tag: HTML タグの名前変更プラグイン。HTML手動による変更を避けるためにタグの名前を自動的に変更するために使用されます。
Live Server:ローカルサーバープラグイン。ローカルサーバーを起動し、リアルタイムで Web ページをプレビューするために使用されます。
GitLens: Git コードベースプラグインGit。コードベース、Gitコード内の履歴、コメントの詳細情報を表示し、バージョン管理を容易にするために使用されます。
Path Intellisense:ファイルパス自動補完プラグイン。開発者がファイルパスを迅速に入力し、開発効率を向上させるのに役立ちます。
Material Icon Theme:ファイルアイコンテーマプラグイン。開発者がファイルタイプをより明確に表示できるようにファイルアイコンを追加するために使用されます。フォルダー、ファイル、写真、オーディオ、ビデオなど、さまざまな種類のファイルにさまざまなアイコンを追加できます。
Debugger for Chrome:のコードVisual Studio Codeのデバッグに使用されますJavaScript。

上記は一般的に使用される VS Code プラグインの一部です。特定のプロジェクトのニーズに応じて他のプラグインをインストールできます。VS Code では、ショートカットキーを押してCtrl+Shift+Xプラグインパネルを開き、インストールする必要があるプラグインを検索し、クリックしてインストールできます。

2.Vue.jsプラグイン

Vetur: これは、開発者が Vue コンポーネントをより適切に作成できるようにする Vue.js 開発プラグインです。语法高亮、自动补全、などの関数を提供し、開発者错误检查が代码格式化Vue コードをより迅速に作成できるようにします。
Vue 3 Snippets: は、開発者が Vue 3 コードをより速く書くのに役立つVue.js 3コードスニペットプラグインです。Vue 3 组件、指令、などの一般的なコードスニペットが提供される生命周期ため、開発者は Vue 3 コードをより迅速に作成できます。
Vue Peek: これは、開発者がVue コンポーネントの定義をより迅速に表示できるようにする Vue.js 開発プラグインです。テンプレート内のコンポーネント定義にすばやくジャンプできるため、開発者はコンポーネントの構造とプロパティをより迅速に理解できます。

3. 反応プラグイン

ES7 React/Redux/GraphQL/React-Native snippets: これは、開発者が React コードをより速く作成できるようにする React 開発プラグインです。React 组件、生命周期、などの一般的なコードスニペットが提供される状态管理ため、開発者は React コードをより迅速に作成できます。
Reactjs code snippets: これは、開発者が React コードをより速く作成できるようにする React 開発プラグインです。React 组件、生命周期、 ** 状态管理** などの一般的なコードスニペットが提供されているため、開発者は React コードをより迅速に作成できます。
React-Native/React/Redux snippets for es6/es7: これは、開発者がコードをより速く書くのに役立つ React Native 開発プラグインですReact Native。React Native 组件、生命周期、 ** 状态管理** などの一般的なコードスニペットが提供されているため、開発者は React Native コードをより迅速に作成できます。

要約する

フロントエンド環境を最初から構成するには、、、、、などの必要なソフトウェアとプラグインをインストールするNode.js必要があります编辑器。この記事では、これらのツールとプラグインをインストールする方法について説明し、一般的に使用される VS Code プラグインをいくつか紹介します。実際の開発では、特定のプロジェクトのニーズに応じて他のツールやプラグインをインストールして、開発効率とコードの品質を向上させることもできます。GitChrome 浏览器包管理工具VS Code 插件