React開発用のVSCodeセットアップ

保存時にリンティングのヒントとフォーマットを使用して、優れたVSCodeセットアップを取得するための簡単な手順

この投稿では、取得するための簡単な手順について説明しますReact開発のための素晴らしいVSCodeセットアップ、とリンティングのヒントそして保存時のフォーマット。

ESLint

まず、ESLintをインストールします。 ESLintは、コードを小さくクリーンに保つのに役立つすばらしいツールです。

インストールESLintを使用してESLint拡張機能VS Code ExtensionsStoreで入手できます。

次に、ターミナルからそれらを実行します糸コマンド（Yarnをまだインストールしていない場合は、チュートリアルへのリンクをたどって短いガイドを見つけてください）：

yarn add babel-eslint
yarn add eslint-config-airbnb
yarn add eslint-plugin-jsx-a11y
yarn add eslint-plugin-react
Now, create a .eslintrc.json file in the root of your project, and add the following lines to have a basis ESLint configuration that works for React development, with JSX support:


{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"]
}


Prettier


The next step I suggest is to install Prettier. Prettier is a JavaScript opinionated formatter. It’s a great tool because it helps you standardize your codebase, and it’s useful even if you code alone. In a team, it’s super useful as it avoids differences in code styling. Use what Prettier suggests.


You can install the Prettier VS Code extension with npm:


npm install -g prettier-eslint --save-dev
Next we’re going to add a few rules to the VS Code configuration, to apply Prettier on every save, and integrate it with ESLint. Press cmd+, (on Mac) and the VS Code configuration should show up. Enter this at the end:


"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true

  

  
Download my free React Handbook

  




More react tutorials:

Tech Wiki Online！