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

Muab lo rau los ntawm

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

    Publisher: dsznajder

    Use React snippets to speed up your React game!

    Install using crtl+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 crtl+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. Use npx eslint --init to create a .eslintrc file with alternate configurations.

    If you have created .eslintrc.json file, then add the following rules to allow js extensions in react.


    "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 }]

    }

    Add the following to your VSC settings (crtl+, ➡ Hit Open Settings icon), to run ESLint on save, and set VSC to end lines in lf so ESLint does not complain.


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

  3. Prettier – Code formatter

    Publisher: Prettier

    Formats your code to be consistent for easier reading.

    Prettier can format JavaScript, TypeScript, JSX, HTML, CSS, GraphQL, Markdown and YAML.

    ESLint can also format your JavaScript and React code. Therefore, I recommend that you setup ESLint for formatting JavaScript and React files, then use Prettier for formatting your CSS, JSON, GraphQL and Markdown in React.

    Prettier requires the command line to run on your code. This VSC extension will format your code when the code file is saved.

    Install this extension using crtl+P

    ext install esbenp.prettier-vscode

    Install prettier into your project…

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

    Create a .prettierrc.json file to your React project root to create custom formatting rules.


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

    Go to Prettier site for more config. rules.

    Add the following to your VSC settings (crtl+, ➡ Hit Open Settings icon), 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 crtl+P

    ext install 2gua.rainbow-brackets