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

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

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

キーポイント

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

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

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

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

intellisense
コードスニペット
jsdocサポート
hoom情報
自動インポート

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

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

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

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

intellisense
コードスニペット
js docサポート
hoom情報と署名ヘルプ
フォーマット
jsxおよびauto-closedタグ
• 完全なリストはここに記載されています。 TypeScriptを使用する場合、JSXコードは.TSXファイル拡張子で記述されます。コンパイル後、出力は拡張機能.JSXを使用してファイルを生成します。

<code>npm install -g typescript</code>

sass、scss

stylus
jade
パグ
• 拡張機能は、タイプスクリプトとスタイルコードをいつコンパイルするかに関して、より構成可能なオプションを提供します。 ReactとTypeScriptのセットアップについて詳しく知りたい場合は、詳細な説明については、他の記事「TypeScript：Best Practices」をチェックすることをお勧めします。
• flow

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

キーマッピング設定

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

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

私は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>

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

<code>npm install -g typescript</code>

<code>// 控制提示是否顯示
"atomKeymap.promptV3Features": true,

// 更改多光標鼠標綁定
"editor.multiCursorModifier": "ctrlCmd",

// 在新窗口中打開文件夾（項目），而不會替換當前窗口
"window.openFoldersInNewWindow": "on",</code>

<code>    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    }</code>

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