vscode で JavaScript を構成する方法-フロントエンドQ&A-php.cn

vscode で JavaScript を構成する方法

WBOY

リリース： 2023-05-29 12:17:38

オリジナル

2931 人が閲覧しました

JavaScript の人気が高まるにつれ、Visual Studio Code (略して VSCode) を使用して独自の JavaScript コードを作成する開発者が増えています。 VSCode は、JavaScript を含む多くのプログラミング言語とフレームワークをサポートする、Microsoft によって開発された軽量のコードエディターです。 VSCode を使用して JavaScript を作成している場合、この記事では、開発効率を向上させるために VSCode を構成する方法を説明します。

VSCode のインストール

まず、公式 Web サイト: https://code.visualstudio.com/ から VSCode をダウンロードしてインストールする必要があります。インストールが完了したら、VSCode を起動し、JavaScript プロジェクトフォルダーを開きます。

エディタ設定の調整

VSCode のトップメニューで、[ファイル] > [環境設定] > [設定] を選択します。これにより、エディターの設定を変更できる JSON ファイルが開きます。

以下は、必要に応じて調整できるいくつかの一般的な設定です:

"editor.tabSize": タブのインデントのスペースの数を設定します。

"editor.autoIndent": Enter キーを押したときにエディターが自動的にインデントされるかどうか。

"editor.formatOnSave": ファイルを保存するときにコードを自動的にフォーマットするかどうか。

必要な拡張機能をインストールする

VSCode では、拡張機能はエディタの機能を拡張するために使用できるインストール可能なプラグインです。ここでは、JavaScript 開発の効率化に役立ついくつかの重要な拡張機能を紹介します。

ESLint

ESLint は、潜在的なコードの問題を発見し、最適化の提案を提供するのに役立つコード検査ツールです。 ESLint をインストールするには、VSCode で「Ctrl Shift X」(Windows/Linux) または「Cmd Shift X」(Mac) を押して拡張パネルを開き、「ESLint」を検索して「インストール」をクリックします。

Prettier

Prettier は、さまざまなチームメンバー間でコードを一貫した形式に保つコード書式設定ツールです。 Prettier をインストールするには、VSCode で「Ctrl Shift X」(Windows/Linux) または「Cmd Shift X」(Mac) を押して拡張機能パネルを開き、「Prettier」を検索して「インストール」をクリックします。

Chrome 用デバッガー

デバッグは、開発プロセスにおけるプログラマーにとって最も重要なスキルの 1 つです。 Debugger for Chrome は VSCode エディターを Chrome ブラウザーと統合するので、コードの実行中に簡単にデバッグできます。 Chrome 用デバッガーをインストールするには、VSCode で「Ctrl Shift X」(Windows/Linux) または「Cmd Shift X」(Mac) を押して拡張機能パネルを開き、「Debugger for Chrome」を検索して「インストール」をクリックします。

デバッグ構成の作成

次に、JavaScript 開発に VSCode を使用するときにデバッガーを使用するためのデバッグ構成を作成する必要があります。デバッグ構成を作成するには、VSCode の [デバッガー] タブを使用し、 [起動構成の作成] を選択します。 Node.js を使用している場合は、「Node.js」構成を選択する必要があります。

以下は JavaScript デバッグ構成のサンプルです:

{

"version": "0.2.0",
"configurations": [
    {
        "name": "Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
    },
    {
        "name": "Node.js",
        "type": "node",
        "request": "launch",
        "program": "${workspaceFolder}/index.js"
    }
]

ログイン後にコピー

}

実際の構成はプロジェクトによって異なる場合があることに注意してください。デバッグ構成は通常、特定の JavaScript フレームワークまたはライブラリを使用して構成する必要があります。

デバッガーを使用したデバッグ

デバッグ構成を作成した後、デバッガーを使用して JavaScript コードをデバッグできます。デバッグを開始するには、「F5」キーを押します。これにより、指定したデバッガー (Chrome や Node.js など) が起動します。デバッガーを起動すると、それを使用してコード内のブレークポイントをデバッグしたり、変数値を表示したり、JavaScript の他の特定の問題をデバッグしたりできます。

概要

この記事を通じて、VSCode で JavaScript 開発環境を構成する方法をすでに理解しているはずです。これらの方法には、次のものが含まれます。