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

đăng lên bởi

  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, sau đó thêm các quy tắc sau để cho phép các phần mở rộng js trong phản ứng.


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

    }

    Thêm phần sau vào cài đặt VSC của bạn (Ctrl+, ➡ Nhấn vào biểu tượng Mở Cài đặt), để chạy ESLint khi tiết kiệm, và đặt VSC thành các dòng kết thúc trong lf để ESLint không phàn nàn.


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

  3. Đẹp hơn – Bộ định dạng mã

    Publisher: Đẹp hơn

    Định dạng mã của bạn nhất quán để dễ đọc hơn.

    Prettier có thể định dạng JavaScript, TypeScript, JSX, HTML, CSS, GraphQL, Markdown và YAML.

    ESLint cũng có thể định dạng mã JavaScript và React của bạn. vì thế, Tôi khuyên bạn nên thiết lập ESLint để định dạng các tệp JavaScript và React, sau đó sử dụng Prettier để định dạng CSS của bạn, JSON, GraphQL và Markdown trong React.

    Prettier yêu cầu dòng lệnh chạy trên mã của bạn. Phần mở rộng VSC này sẽ định dạng mã của bạn khi tệp mã được lưu.

    Install this extension using Ctrl+P

    ext install esbenp.prettier-vscode

    Cài đặt đẹp hơn vào dự án của bạn…

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

    Tạo một .prettierrc.json tệp vào thư mục gốc của dự án React của bạn để tạo các quy tắc định dạng tùy chỉnh.


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

    Đi đến Prettier site for more config. quy tắc.

    Thêm phần sau vào cài đặt VSC của bạn (Ctrl+, ➡ Nhấn vào biểu tượng Mở Cài đặt), 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