VSCode を使用して反応開発環境を構成する手順の詳細な例

vscode のデフォルト設定は React の JSX 構文に適していません。これは、自動フォーマットまたは貼り付けを使用した後のデフォルトのインデント エラーに反映されます。このエラーは言語モードを変更することで緩和できますが、言語モードを変更した後のフォーマットは依然として残ります。理想的ではありません。この記事では、VSCode で React 開発環境を構築する手順を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ESLint と Prettier プラグインを一緒に使用することで、vscode での JSX 構文の完全なサポートを実現できます。

エディタのインストールプラグイン

vscodeに次のプラグインをインストールする必要があります:

1. ESLint

2. Prettier

プロジェクト内の設定

ESLint を構成する

基本構成

プロジェクトに babel-eslint、eslint-plugin-jsx-a11y、eslint-plugin-react をインストールします。 依存関係:

npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

推奨される ESLint 構成は次のとおりです (.eslintrc を変更します)

{
 // Use the AirBnB JS styleguide - https://github.com/airbnb/javascript
 "extends": "airbnb",

 // We use 'babel-eslint' mainly for React Native Classes
 "parser": "babel-eslint",
 "ecmaFeatures": {
  "classes": true,
 },

 // jsx相关插件
 "plugins": ["react", "jsx-a11y", "import"]

 // We can add/overwrite custom rules here
 "rules": {
  // React Native has JSX in JS files
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

  // React Native includes images via require("../images/example.png")
  "global-require": 0
 }
}

注意すべき点がいくつかあります ポイント:

1. yarn インストールを使用する場合は、.eslintrc ファイルを手動で作成する必要があります

2. eslint が使用中にエラーを報告し、依存関係の欠落を促す場合は、関連する依存関係をインストールするだけです

発生する可能性のある問題

プロジェクト内のファイル名のサフィックスが .jsx ではなく .js である場合、次のエラーが発生する可能性があります:

コードをコピーします コードは次のとおりです:

[eslint] 拡張子「.js」を持つファイルでは JSX は許可されません (react/jsx-filename-extension)

.js および .jsx 接尾辞を許可する新しいルールを .eslintrc に追加します:

"rules": {
 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}

react-native 0.49 以降のバージョンは推奨されなくなりました。jsx はサフィックスです。このディスカッションを参照してください。No.jsx extension?

props 検証エラー

[eslint] 'navigation' is missing in props validation (react/prop-types)

props のタイプを検出すると役立ちます。再利用可能なコンポーネントを作成するには、このリマインダーをオフにしないことをお勧めします。必ずオフにして、次のルールを追加してください。 ESLint ルールに従ってファイルを保存するときに JSX コードをフォーマットします。 手順は次のとおりです:

プロジェクトに prettier-eslint をインストールします

"rules": {
 "react/prop-types": 0
}

vscode ワークスペースを設定します

vscode ワークスペース ユーザーに次のコードを追加しますカスタマイズセクション:

npm install prettier-eslint --save-dev

関連する推奨事項:

詳細な vue-c li vscode の例、eslint の構成

VSCode でマークダウンをプレビューし、プレビュー スタイルを変更する

VsCode プラグインの概要と整理

以上がVSCode を使用して反応開発環境を構成する手順の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。