Developing React with Sublime Text is feasible, but requires manual configuration of key features. First, install the Babel package to achieve JSX syntax highlighting, install "Babel - JavaScript, JSX, ES6" through Package Control, and set the file syntax type to Babel JS; secondly, configure ESLint for code checking, you need to install eslint and eslint-plugin-react in the project, create .eslintrc files, and realize real-time error prompts through SublimeLinter and SublimeLinter-eslint plug-ins; finally, you can optionally use code snippets and Emmet support, such as using "rfc Tab" to quickly generate component templates after installing Emmet, or add custom snippets, DocBlockr and AlignTab to improve efficiency. These steps give Sublime Text basic React development support.

Using Sublime Text with React is totally doable, even if it's not as plug-and-play as more modern editors like VS Code. The key is knowing how to set it up right and what features you might be missing compared to heavier IDEs.

Install Babel for JSX Support

By default, Sublime doesn't highlight JSX syntax properly. That's where the Babel package comes in. It gives you proper syntax highlighting for React files.

• Install Package Control (if you haven't already)
• Open Command Palette ( Ctrl Shift P )
• Search for “Install Package Control”
• Then search for and install “Babel - JavaScript, JSX, ES6”

Once installed, open any .jsx or .js file inside your React project and change the syntax to Babel JS using the bottom-right dropdown in the status bar.

This won't fix everything, but it makes reading and writing React code a lot easier.

Set Up ESLint for Linting

Sublime can support ESLint just fine, which helps catch common React errors and enforces good style.

• Make sure you have eslint installed in your React project:

   npm install eslint eslint-plugin-react --save-dev

• Create an .eslintrc file at the root of your project with something like:

   {
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "parserOptions": {
      "ecmaVersion": 2020,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "browser": true,
      "es2021": true
    }
  }

• Install the SublimeLinter and SublimeLinter-eslint packages via Package Control

After that, ESLint should show warnings and errors directly in the editor — helpful for catching small mistakes before running the app.

Snippets and Emmet (Optional But Handy)

React development often involves repetitive boilerplate. You can save time by adding snippets or using Emmet-style expansions.

• Install Emmet via Package Control
• Try typing rfc and pressing Tab — if you've got the right setup, it should expand into a basic functional component template

If that doesn't work out of the box, look into installing custom snippets for React. There are community ones available, or you can make your own tailored to your team's style.

Also consider installing DocBlockr for quick comment blocks, and maybe AlignTab for formatting props neatly.

It's not going to feel exactly like working in VS Code with all the React extensions, but with a few tweaks, Sublime Text handles React just fine. Mostly, it comes down to syntax highlighting, linting, and some productivity tools — and those are all doable.

The above is the detailed content of How do I use Sublime Text with React?. For more information, please follow other related articles on the PHP Chinese website!