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

    If you have created .eslintrc.json file, จากนั้นเพิ่มกฎต่อไปนี้เพื่ออนุญาตส่วนขยาย 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 ในการบันทึก, และตั้งค่า VSC ให้สิ้นสุดบรรทัดใน lf ดังนั้น ESLint จะไม่บ่น.


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

  3. สวยกว่า – ตัวจัดรูปแบบรหัส

    Publisher: สวยกว่า

    จัดรูปแบบรหัสของคุณให้สอดคล้องกันเพื่อการอ่านที่ง่ายขึ้น.

    สวยกว่าสามารถจัดรูปแบบ JavaScript, TypeScript, เจเอสเอ็กซ์, HTML, ซีเอสเอส, GraphQL, Markdown และ YAML.

    ESLint ยังสามารถจัดรูปแบบ JavaScript และโค้ด React ของคุณได้อีกด้วย. ดังนั้น, ฉันแนะนำให้คุณตั้งค่า ESLint เพื่อจัดรูปแบบไฟล์ JavaScript และ React, จากนั้นใช้ Prettier เพื่อจัดรูปแบบ CSS ของคุณ, เจสัน, GraphQL และ Markdown ในการตอบสนอง.

    Prettier ต้องการบรรทัดคำสั่งเพื่อเรียกใช้โค้ดของคุณ. ส่วนขยาย VSC นี้จะจัดรูปแบบรหัสของคุณเมื่อบันทึกไฟล์รหัส.

    Install this extension using Ctrl+P

    ext install esbenp.prettier-vscode

    ติดตั้งสวยกว่าในโครงการของคุณ…

    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