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

Vloženo na od

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

    If you have created .eslintrc.json file, poté přidejte následující pravidla, abyste umožnili rozšíření js reagovat.


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

    }

    Přidejte následující do nastavení VSC (Ctrl+, ➡ Klepněte na ikonu Otevřít nastavení), spustit ESLint při uložení, a nastavte VSC na konec řádků v lf, takže ESLint si nestěžuje.


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

  3. Hezčí – Formátovač kódu

    Publisher: Hezčí

    Naformátuje váš kód tak, aby byl konzistentní pro snadnější čtení.

    Prettier umí formátovat JavaScript, TypeScript, JSX, HTML, CSS, GraphQL, Markdown a YAML.

    ESLint může také formátovat váš JavaScript a React kód. Proto, Doporučuji nastavit ESLint pro formátování souborů JavaScript a React, pak pro formátování CSS použijte Prettier, JSON, GraphQL a Markdown v Reactu.

    Prettier vyžaduje spuštění příkazového řádku na vašem kódu. Toto rozšíření VSC zformátuje váš kód při uložení souboru kódu.

    Install this extension using Ctrl+P

    ext install esbenp.prettier-vscode

    Nainstalujte do svého projektu hezčí…

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

    Vytvořit .prettierrc.json do kořenového adresáře projektu React a vytvořte vlastní pravidla formátování.


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

    Jít do Prettier site for more config. pravidla.

    Přidejte následující do nastavení VSC (Ctrl+, ➡ Klepněte na ikonu Otevřít nastavení), 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