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

Posté sur par

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

    If you have created .eslintrc.json file, puis ajoutez les règles suivantes pour autoriser les extensions js en réaction.


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

    }

    Ajoutez les éléments suivants à vos paramètres VSC (Ctrl+, ➡ Appuyez sur l'icône Ouvrir les paramètres), pour exécuter ESLint lors de la sauvegarde, et réglez VSC pour terminer les lignes dans lf afin qu'ESLint ne se plaigne pas.


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

  3. Plus jolie – Formateur de code

    Publisher: Plus jolie

    Formate votre code pour qu'il soit cohérent pour une lecture plus facile.

    Prettier peut formater JavaScript, Manuscrit, JSX, HTML, CSS, GraphQL, Markdown et YAML.

    ESLint peut également formater votre code JavaScript et React. Donc, Je vous recommande de configurer ESLint pour formater les fichiers JavaScript et React, puis utilisez Prettier pour formater votre CSS, JSON, GraphQL et Markdown dans React.

    Prettier nécessite la ligne de commande pour s'exécuter sur votre code. Cette extension VSC formatera votre code lorsque le fichier de code sera enregistré.

    Install this extension using Ctrl+P

    ext install esbenp.prettier-vscode

    Installez plus joliment dans votre projet…

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

    Créer un .prettierrc.json fichier à la racine de votre projet React pour créer des règles de formatage personnalisées.


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

    Aller à Prettier site for more config. règles.

    Ajoutez les éléments suivants à vos paramètres VSC (Ctrl+, ➡ Appuyez sur l'icône Ouvrir les paramètres), 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