Linux 上で Visual Studio Code を使用したフロントエンド開発の推奨構成-Linuxの運用と保守-php.cn

Linux 上で Visual Studio Code を使用したフロントエンド開発の推奨構成

王林

リリース： 2023-07-04 09:27:06

オリジナル

2684 人が閲覧しました

Linux でのフロントエンド開発に Visual Studio Code を使用する場合の推奨構成

はじめに:
フロントエンド開発の急速な発展に伴い、Visual Studio Code (VS Code for Linux) を選択する開発者が増えています。 short) ) を主要なコードエディターとして使用します。 VS Code は、豊富な拡張プラグインのセットをサポートし、フロントエンド開発のさまざまなニーズを満たすことができる、無料のオープンソースの軽量エディターです。
この記事では、Linux でのフロントエンド開発に VS Code を使用する場合の推奨構成 (インストールと構成の手順を含む) を示し、いくつかのコード例を添付します。

1. VS Code のインストール
次の手順に従って、VS Code を Linux にインストールします:

ターミナルを開いて、VS Code の公式 Web サイトにアクセスします: https://code.ビジュアルスタジオ.com/.
[Linux 用ダウンロード] ボタンをクリックして、VS Code の Debian パッケージをダウンロードします。
ターミナルに次のコマンドを入力して、VS Code をインストールします。
```
sudo dpkg -i <vscode-package>.deb
sudo apt-get install -f
```
ログイン後にコピー
インストールが完了したら、「code」コマンドを入力して VS Code を起動します。

2. 一般的に使用される拡張プラグインをインストールします
VS Code の拡張プラグインは、その機能を大幅に強化します。一般的に使用されるいくつかの拡張プラグインを次に示します。

インストール方法: VS Code で「ESLint」を検索し、クリックしてインストールします。
インストール方法: VS Code で「Prettier - Code formatter」を検索し、クリックしてインストールします。
インストール方法: VS Code で「Live Server」を検索し、クリックしてインストールします。

上記のプラグインを導入することで、開発プロセスが大幅に簡略化され、コーディング効率が向上しました。

3. ESLint の設定

フロントエンド開発では、標準化されたクリーンなコードを記述することが重要です。 ESLint は、コードの一貫性を維持するのに役立つ優れたコード仕様チェックツールです。
ESLint を構成する手順は次のとおりです:

ESLint をプロジェクトのルートディレクトリにインストールします:
```
npm install eslint --save-dev
```
ログイン後にコピー
次のコマンドを実行します。ターミナルで ESLint 設定ファイルを生成します:
```
npx eslint --init
```
ログイン後にコピー
プロンプトに従って、設定ファイルのルールを選択します。Airbnb や Google などのプリセットルールを使用することも、独自のルールを定義することもできます。
VS Code の設定に次の構成を追加します:
```
"editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
}
```
ログイン後にコピー
このようにして、ファイルが保存されるたびに、VS Code は自動的に ESLint を呼び出して、コードの仕様を変更して、間違いを修正してください。

4. Prettier の設定

Prettier は、一貫したスタイルを維持するためにコードを自動的にフォーマットできるコードフォーマットツールです。
Prettier を構成する手順は次のとおりです:

Prettier をプロジェクトのルートディレクトリにインストールします:
```
npm install prettier --save-dev
```
ログイン後にコピー
Prettier の設定を追加します。 VS Code 次の構成:
```
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
 "editor.formatOnSave": true
}
```
ログイン後にコピー
このようにして、JavaScript ファイルが保存されるたびに、VS Code はコードのフォーマットのために Prettier を自動的に呼び出します。

5. Live Server を使用する

Live Server は、ローカル開発サーバーを提供し、HTML、CSS、JavaScript ファイルへの変更をリアルタイムでレンダリングする非常に便利な拡張プラグインです。 Live Server を使用する手順は次のとおりです:

6. コード例

簡単な HTML ページのコード例を次に示します:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

上記のコードでは、style.css と script.js がそれぞれスタイルです。スクリプトファイルは、ライブサーバーを通じてリアルタイムでページの変更をレンダリングできます。

結論:

上記の構成と手順により、Linux 上で Visual Studio Code を使用して効率的なフロントエンド開発を行うことができます。よく使用される拡張プラグインをインストールし、コード仕様チェックおよびコード整形ツールを構成し、Live Server が提供するローカル開発サーバーと組み合わせることで、開発効率とコード品質が大幅に向上します。読者の皆様がご自身のニーズやプロジェクトの特性に応じてさらに拡張および構成して、フロントエンド開発にさらなる利便性と楽しさをもたらしていただければ幸いです。

以上がLinux 上で Visual Studio Code を使用したフロントエンド開発の推奨構成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。