検索

ホームページ >ウェブフロントエンド >jsチュートリアル >React開発のために対コードを設定する方法

React開発のために対コードを設定する方法

Lisa Kudrow
Lisa Kudrowオリジナル
2025-02-10 15:59:10994ブラウズ

How to Set Up VS Code for React Development

vs効率的な反応開発のためのコード構成ガイド：コーディング効率を改善

React開発者には、Reactコードを効率的に記述できるコードエディターが必要です。開発ワークフローを改善するのに役立つVSコードの市場には、数千の無料拡張機能があります。この記事では、Reactエンコード効率をプロのレベルにするいくつかの拡張機能と設定に焦点を当てます。

記事にリストされている拡張機能の一部は反応固有ではありませんが、効率とエンコーディング速度を改善することができます。実際、毎日のコーディングに本当に役立つ拡張機能はわずかです。

この記事にリストされているツールとテクノロジーは、開発作業の時間を節約する可能性があります。これは、多くの小さなが重要な問題を解決することで無駄になっていたでしょう。また、コーディングエラーを減らすのにも役立ちます。生産性を向上させる鍵は、できるだけ多くのタスクを自動化することです。次の拡張と設定は、この目標を達成するのに役立ちます。

キーポイント

    VSコードのJavaScript言語拡張機能のインストール：IntelliSense、コードスニペット、自動インポートなどの機能を提供することにより、React開発効率を改善します。
  • 大規模プロジェクトにタイプスクリプトを使用する：タイプの安全性を提供し、複雑な反応アプリケーションにとって重要なエラーを減らすエラーを減らします。 vsコードには、node.jsを介してグローバルにインストールしてください。
    • JSXのEmmetを構成：VSコードが.jsファイルをReactファイルとして認識するか、Emmetサポートを改善するために.jsxに変更して、HTMLコード効率を改善します。
    • editorConfigを使用した一貫したフォーマット：コードフォーマットを自動化して、Reactコードベースを一貫性に保ちます。これは、共同プロジェクトに重要です。
    • ESLINTでのコード品質チェック：VSコードと統合して、エンコードエラーをリアルタイムで強調表示および修正し、ベストプラクティスとクリーンコードベースを促進します。
    • 反応固有の拡張機能を使用：ES7 React/Redux/GraphQL/React-Nativeスニペットなどの拡張は、インスタントコードスニペットを提供することにより、エンコーディング速度を改善します。
  • 言語サポート

最初にVSコードをインストールすると、JavaScript Syntaxの強調表示とTypeScriptおよびJSXコードのサポートなど、すぐに使用できる多くの機能が提供されます。

以下は、ウェルカムタブのスナップショットです。ヘルプメニューの下でいつでも見つけることができます。

ここで最初のセットアップを行う必要があります。私たちの焦点はReactであるため、JavaScript言語拡張機能をセットアップすることから始めます。これにより、コーディング効率ワークフローに不可欠な追加機能が提供されます。 How to Set Up VS Code for React Development

javaScript言語拡張

[ツールと言語]ウェルカムタブのセクションで、[JavaScriptリンク]をクリックしてインストールします。リロードプロンプトが表示され、それをクリックして新しい機能を有効にする必要があります。

JavaScript言語拡張機能は、次のようなさまざまな機能を提供します。

    intellisense
    • コードスニペット
    • jsdocサポート
    • hoom情報
    • 自動インポート
これらの機能の完全なリストとドキュメントは、VSコードドキュメントに記載されています。開発ワークフローでそれらを使用する方法を理解するために、各機能を読むことを強くお勧めします。

次の図は、IntelliSenseと自動インポートの実際の操作の例です。

How to Set Up VS Code for React Development

タブキーが押されると、ヘッダーコンポーネントが上部にインポートされます。エンディングシンボルを入力する必要があり、コードは次のように自動的に完了します。

JavaScript言語機能をインストールした後、VSコードは、プロジェクトのルートディレクトリにjsconfig.jsonファイルを提供するように求められる場合があります。これは必須ではありませんが、このファイルを設定すると、Intellisenseがより正確なヒントを提供するのに役立ちます。サンプル構成は次のとおりです

上記の構成は、JavaScript言語サーバーに、どのファイルがソースコードに属し、どのファイルが属していないかを指示します。これにより、言語サービスがソースコードのみを分析することが保証されるため、パフォーマンスが高速になります。完全な構成はここに文書化されており、jsconfig.jsで使用できるすべての可能な値を説明しています。 
<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

タイプスクリプトサポート

大規模で複雑な反応プロジェクトを構築する予定がある場合は、TypeScriptを使用することを強くお勧めします。これは、タイプスクリプトがタイプの安全性を提供し、フロントエンドアプリケーションでエラーコードを配信する可能性を減らすためです。 vsコードは、多くの機能を提供することにより、型に合わせてタイプスクリプト言語サポートを箱から出して提供します（例：:::

構文とセマンティックハイライト

    intellisense
    • コードスニペット
    • js docサポート
    • hoom情報と署名ヘルプ
    • フォーマット
    • jsxおよびauto-closedタグ
  • 完全なリストはここに記載されています。 TypeScriptを使用する場合、JSXコードは.TSXファイル拡張子で記述されます。コンパイル後、出力は拡張機能.JSXを使用してファイルを生成します。
VSコードはTypeScriptコンパイラを提供していないことに注意してください。グローバルnode.js環境に次のようにインストールする必要があります。

または、TypeScriptやその他の多くの言語にコンパイラを提供するCompile Hero Pro Extensionをインストールできます。

少ない
<code>npm install -g typescript</code>

sass、scss

    stylus
    • jade
    • パグ
  • 拡張機能は、タイプスクリプトとスタイルコードをいつコンパイルするかに関して、より構成可能なオプションを提供します。 ReactとTypeScriptのセットアップについて詳しく知りたい場合は、詳細な説明については、他の記事「TypeScript：Best Practices」をチェックすることをお勧めします。
  • flow
Flowは、FacebookのTypeScriptに代わるものです。同じ機能を提供しますが、Reactプロジェクトでのみ機能し、あまり人気がありません。 VSコードはネイティブにサポートしていませんが、インテリセンスや名前変更などの限られた数の機能を提供するフロー言語サポート拡張機能をインストールできます。

（次の部分は元のテキストに似ていますが、言葉遣いと文の構造は、擬似オリジナリ性の目的を達成するために調整されています。）

キーマッピング設定

別のコードエディターからVSコードに移行している場合、すでに慣れているのと同じキーボードショートカットを使用できることを喜んで知っています。コードエディターに慣れていない場合は、このセクションをスキップしてください。ただし、以前にコードエディターを使用したことがある場合は、筋肉の記憶の再訓練が非効率的で、調整に時間がかかることがわかる場合があります。

Welcome The The The Welcome Tabの「設定とキーバインディング」セクションでは、VIM、Sublime、Atom、その他のキーボードショートカットをインストールするためのリンクが表示されます。 「その他」のリンクをクリックすると、インストールできるキーマップの完全なリストが表示されます。

How to Set Up VS Code for React Development

私はVSコードに切り替える前にAtomユーザーでした。 VSコードでAtomのキーマッピングを設定することは、Atomリンクをクリックするのと同じくらい簡単です。これにより、Atom KeyMap拡張機能がインストールされます。 settings.jsonで次の構成が必要です。vsコードを「atom」のようにする：

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

キーボードショートカット拡張機能が提供する指示をお読みください。ショートカットキーを設定する方法を学びましょう。ドキュメントは、拡張バーのキーマップ拡張機能をクリックするだけで見つけることができます。

emmet jsxサポート

Emmetは、HTMLコードをより効率的に記述できるWeb開発ツールキットです。エメットに慣れていない場合は、デモをチェックして、どのように機能するかを確認してください。

vsコードにはエメットが組み込まれており、既にJSX構文をサポートしています。残念ながら、ほとんどのReactスタータープロジェクトは.JS拡張機能を使用しています。問題は、VSコードがReactコードなどのファイルを認識していないため、JSX機能がアクティブになっていないことです。 2つの解決策があります：

  1. JSXコードを含むすべてのファイルを.jsx拡張機能に変更します（推奨）
  2. すべての.jsファイルをReactファイルとして認識するようにコードを構成します。 settings.jsonを次のように更新してください：
<code>npm install -g typescript</code>
[コマンドパネル]をクリックします。 「設定」を入力し、[設定：[設定]を開く（json）]オプションを選択します。または、ctrl p を押し、「settings.json」を入力してファイルをすばやく開くことができます。また、ショートカットキーを使用して、ctrl 、を使用して、新しいタブでSET UIバージョンを開きます。最初の右上隅のアイコンボタンをクリックすると、settings.jsonを開きます。 2番目のオプションが最も簡単な方法のようです。残念ながら、これにより、eslint-config-airbnb

などの他のJavaScript開発ツールに問題が発生します。このルールを後で無効にすると、他の問題を引き起こす可能性があります。

公式Reactチームは、Reactコードに.JS拡張機能を使用することをお勧めします。私の個人的な経験では、Reactコードを含むすべてのファイルを.jsxに変更し、純粋なJavaScriptコードを含むファイルに.JS拡張機能を使用することをお勧めします。これにより、すべての開発ツールをより簡単に使用できます。

フォーマット

高品質のコードを書くには、Conding コードを記述する必要があります。開発者として、私たちは人間であり、私たちが自分自身のために設定した基準を忘れがちです。このセクションでは、一貫したコードを自動的に作成するのに役立ついくつかの重要なツールについて学びます。

editorConfig

EditorConfigは、フォーマットルールのみを含むシンプルな構成ファイルです。 VSコードにこれらのルールを読み取り、独自のルールを上書きするには、拡張機能をインストールする必要があります。以下の手順に従ってセットアップしてください。

    vsコードのeditorconfig拡張子をインストールします。これにより、.editorConfigファイルにある設定を使用して、ユーザー/ワークスペースの設定をオーバーライドすることに注意してください。
    2. プロジェクトのルートディレクトリに.EditorConfigファイルを作成し、このサンプル構成をコピーします。
VSコードは、これらのルールに従ってコードをフォーマットします。 NewLinesについてすぐに話し合いましょう。 WindowsはCRLFを使用して行の終了を示し、UNIXベースのシステムはLFを使用します。ミックスラインブレークのファイルを使用した場合、ファイルを送信する際に多くの問題が発生します。 GitがNewLinesを処理する方法を構成できます。 
<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

私の好みの方法は、すべてのプロジェクトファイルに任意のプラットフォームでLF Newlinesを使用させることです。 EditorConfigは、既存のファイルにラインブレークを変換しないことに注意してください。新しいファイルのLFのみを設定します。既存のすべてのファイルを変換するには、2つのオプションがあります。

手動で行います（ステータスバーのテキストCRLFをクリックして切り替えます）

すべてのファイルをきれいな
    でフォーマットします
    • 次に、きれいなことを見てみましょう。
    • prettier

Prettierは、JavaScriptコード用にセットアップする最も簡単なコードフォーマッタです。 JavaScript、TypeScript、JSX、CSS、SCSS、LESS、GRAPHQLをサポートしています。セットアップするには、次の手順に従います

きれいなコードフォーマタイザー拡張機能をインストールします。

vsコードがデフォルトのフォーマッタとしてきれいなものを使用することを確認してください。 settings.jsonを次のように更新します：

  2. プロジェクトの開発依存関係としてプレシティをインストールする：npmインストール - save -dev preattierまたはyarn add -d prettier。
.prettierrcを作成し、次の例をコピーします 
<code>npm install -g typescript</code>
  1. このコマンドをスクリプトに追加して、
    2. Package.jsonを更新します。
ステップ3〜5の場合、よりきれいにサポートするプロジェクトごとにこれを行う必要があります。以下のスクリーンショットに示すように、VSコードのNPMスクリプトパネルの[フォーマット]コマンドをクリックできます。 
<code>// 控制提示是否显示
"atomKeymap.promptV3Features": true,

// 更改多光标鼠标绑定
"editor.multiCursorModifier": "ctrlCmd",

// 在新窗口中打开文件夹（项目），而不会替换当前窗口
"window.openFoldersInNewWindow": "on",</code>
または、Command npm run形式を実行して、よりきれいに実行できます。 
<code>    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    }</code>
これにより、Prettierのデフォルトルールと.prettierrcおよび.editorConfigファイルでオーバーライドするルールに従って、すべてのファイルが正しくかつ一貫して再フォーマットされます。ラインブレークも一貫性があります。

コードのフォーマットが3つの異なる場所にあることに気付いたかもしれません。私たちが矛盾するルールがあったらどうなるか疑問に思うかもしれません。きれいなもののアクティブ化の後、次の優先順位に従ってこれらのルールを処理します。

きれいな構成ファイル
  1. .editorconfig
  2. vsコード設定（他の構成が存在する場合は無視されます）
    4. 競合が発生した場合、きれいな構成が推奨されます。

htmlからjsx

実際の開発者は、インターネット上のどこかからHTMLコードをコピーしてReactコードに貼り付けることが一般的であることを知っています。これには通常、HTML属性を有効なJSX構文に変換する必要があります。幸いなことに、JSXへのHTMLと呼ばれる拡張機能があり、これがあなたのために変換を実行します。インストール後、簡単にできます：

既存のHTMLコードをjsx
    に変換します
  • 貼り付けたときにhtmlコードを有効なjsx構文に変換します
    • これは、クラスなどのプロパティがクラス名に変換されることを意味します。これは非常に良い時間節約方法です。

（コンテンツの残りの部分は元のテキストに似ていますが、文言と文の構造は擬似オリジナリティの目的を達成するために調整されます。画像形式を変更せずに保ちます。

以上がReact開発のために対コードを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript typescript graphql json css less stylus scss html npm sass yarn for format class JS git windows vim ui 自动化 unix atom
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：21 node.jsソリューションでのインタビューの質問次の記事：21 node.jsソリューションでのインタビューの質問

関連記事

続きを見る