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

    If you have created .eslintrc.json file, 然後添加以下規則以允許 js 擴展在 react.


    "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: 更漂亮

    將您的代碼格式化為一致以便於閱讀.

    Prettier 可以格式化 JavaScript, 打字稿, JSX, HTML, CSS, GraphQL, Markdown 和 YAML.

    ESLint 還可以格式化你的 JavaScript 和 React 代碼. 因此, 我建議你設置 ESLint 來格式化 JavaScript 和 React 文件, 然後使用 Prettier 來格式化你的 CSS, JSON, React 中的 GraphQL 和 Markdown.

    Prettier 需要命令行才能在您的代碼上運行. 保存代碼文件時，此 VSC 擴展將格式化您的代碼.

    Install this extension using 按Ctrl+P

    ext install esbenp.prettier-vscode

    將 prettier 安裝到您的項目中…

    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