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

Veröffentlicht am von

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

    If you have created .eslintrc.json file, Fügen Sie dann die folgenden Regeln hinzu, damit js-Erweiterungen reagieren können.


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

    }

    Fügen Sie Ihren VSC-Einstellungen Folgendes hinzu (Ctrl+, ➡ Klicken Sie auf das Symbol Einstellungen öffnen), um ESLint beim Speichern auszuführen, und setzen Sie VSC auf Endzeilen in lf, damit ESLint sich nicht beschwert.


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

  3. Schöner – Code-Formatierer

    Publisher: Schöner

    Formatiert Ihren Code so, dass er zum leichteren Lesen konsistent ist.

    Schöner kann JavaScript formatieren, Typoskript, JSX, HTML, CSS, GraphQL, Markdown und YAML.

    ESLint kann auch Ihren JavaScript- und React-Code formatieren. Deswegen, Ich empfehle, dass Sie ESLint für die Formatierung von JavaScript- und React-Dateien einrichten, Verwenden Sie dann Prettier zum Formatieren Ihres CSS, JSON, GraphQL und Markdown in React.

    Schöner erfordert, dass die Befehlszeile auf Ihrem Code ausgeführt wird. Diese VSC-Erweiterung formatiert Ihren Code, wenn die Codedatei gespeichert wird.

    Install this extension using Ctrl+P

    ext install esbenp.prettier-vscode

    Installieren Sie hübscher in Ihrem Projekt…

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

    Ein ... kreieren .prettierrc.json Datei in Ihrem React-Projektstamm, um benutzerdefinierte Formatierungsregeln zu erstellen.


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

    Gehe zu Prettier site for more config. Regeln.

    Fügen Sie Ihren VSC-Einstellungen Folgendes hinzu (Ctrl+, ➡ Klicken Sie auf das Symbol Einstellungen öffnen), 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