🔝 Top 4 Visual Studio Code Extensions for React Developers 👩‍💻

ポストする バイ

  1. ES7 React/Redux/GraphQL/React-Native snippets

    Publisher: dsznajder

    Use React snippets to speed up your React game!

    Install using Ctrlキー+P

    ext install dsznajder.es7-react-js-snippets

    Some useful snippets

    imp ➡ import moduleName from 'module'
    imd ➡ import { destructuredModule } from 'module'

    rfce

    ⬇

    import React from 'react'

    function ComponentName() {
      return (
        <div>

        </div>
      )
    }

    export default ComponentName

  2. ESLint

    Publisher: Dirk Baeumer

    ESLint finds and fixes problems in JavaScript code. ESLint requires to be run from the command. This VSC extension checks your code on the fly. ESLint can fix code when the file is saved.

    Install this extension using Ctrlキー+P

    ext install dbaeumer.vscode-eslint

    Install ESLint into your React project…

    npm install eslint --save-dev

    If you used npx create-react-app app-name to create your react app then you are good to go with the basic React ESLint configuration as the package.json file already has the ESlint configuration. 使用 npx eslint --init to create a .eslintrc file with alternate configurations.

    If you have created .eslintrc.json file, 次に、react で js 拡張機能を許可するために次のルールを追加します。.


    "rules": {
      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
      "react/react-in-jsx-scope": "off",
      "react/jsx-one-expression-per-line": [0, { "allow": "literal" }]   "no-unused-vars": [1, { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]

    }

    VSC 設定に以下を追加します (Ctrlキー+, ➡ 「設定を開く」アイコンを押します), 保存時に ESLint を実行するには, ESLint が文句を言わないように VSC を lf で行を終了するように設定します.


    "files.eol": "\n",
    "editor.codeActionsOnSave": {
      "source.fixAll": true
    }

  3. より美しく – コードフォーマッタ

    Publisher: より美しく

    読みやすいように一貫性のあるコードをフォーマットします。.

    Prettier は JavaScript をフォーマットできます, TypeScript, JSX, HTML, CSS, グラフQL, マークダウンとYAML.

    ESLint は JavaScript や React コードをフォーマットすることもできます. 従って, JavaScript ファイルと React ファイルをフォーマットするには ESLint をセットアップすることをお勧めします, 次に、Prettier を使用して CSS をフォーマットします, JSON, React の GraphQL とマークダウン.

    Prettier をコード上で実行するにはコマンド ラインが必要です. この VSC 拡張機能は、コード ファイルの保存時にコードをフォーマットします。.

    Install this extension using Ctrlキー+P

    ext install esbenp.prettier-vscode

    Prettyer をプロジェクトにインストールする…

    npm install --save-dev --save-exact prettier

    を作成します .prettierrc.json ファイルを React プロジェクトのルートにコピーして、カスタム書式設定ルールを作成します.


    {
      "trailingComma": "es5",
      "semi": true,
      "singleQuote": true,
      "jsxSingleQuote": true,
      "printWidth": 120
    }

    に行きます Prettier site for more config. ルール.

    VSC 設定に以下を追加します (Ctrlキー+, ➡ 「設定を開く」アイコンを押します), to format on save, disable on JavaScript and React code.


    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.disableLanguages": ["javascript", "javascriptreact"]

  4. Rainbow Brackets

    Publisher: 2gua

    Sets different colours to round, square and curly brackets. This allows you to easily visually match bracket pairs in your React code.

    Install this extension using Ctrlキー+P

    ext install 2gua.rainbow-brackets