启用 JSX 自动完成 - JavaScript

介绍

JSX 是 React 中常用的语法，允许在 JavaScript 中编写 XML 格式的代码，通过编译后得到 JavaScript。当我们在使用 JSX 时，我们可能会需要自动完成来加快编码的速度。本文将会介绍如何在各种编辑器中启用 JSX 自动完成。

在 VS Code 中启用 JSX 自动完成

VS Code 是一款非常优秀的代码编辑器，支持多种语言和框架的开发。下面是在 VS Code 中启用 JSX 自动完成的步骤：

1. 安装必要的扩展：

在 VS Code 中搜索并安装以下两个扩展：

• ESLint：用于代码的语法检查以及格式化，安装此扩展可以使我们更好地编写代码。可以通过终端或命令行安装。如果你的项目已经存在 eslint 配置文件，那么可以直接在 VS Code 安装此扩展。

• JavaScript (ES6) code snippets：该扩展提供了许多与 React 相关的代码段，包括自动完成 React 组件和其他有用的代码片段。可以通过市场搜索并安装。

2. 配置 .eslintrc.json 文件：

在项目根目录下创建 .eslintrc.json 文件，添加以下内容：

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "react"
  ],
  "rules": {}
}

3. 测试：

在你的 React 项目中添加一个 JSX 组件文件，然后像下面这样开始输入组件的名称：

<MyComponent>

此时，VS Code 应该会自动弹出自动完成列表，列出所有与 MyComponent 相关的组件。

在 Sublime Text 中启用 JSX 自动完成

Sublime Text 是另一款非常优秀的编辑器，也支持多种语言和框架的开发。下面是在 Sublime Text 中启用 JSX 自动完成的步骤：

1. 安装必要的插件：

打开 Sublime Text，在菜单中选择 Preferences -> Package Control -> Install Package，然后依次输入并安装以下插件：

• Babel

• ReactJS

2. 配置 Babel 插件：

在 Sublime Text 的菜单中选择 Preferences -> Package Settings -> Babel -> Settings - User，添加以下配置：

{
  "auto_complete": true,
  "auto_match_enabled": true,
  "extensions": ["js", "jsx"],
  "tab_size": 2,
  "use_tab_stops": true,
  "syntaxes": ["Packages/Babel/babel.sublime-syntax"],
  "ignored_packages": ["Vintage"]
}

3. 测试：

在你的 React 项目中添加一个 JSX 组件文件，然后像下面这样开始输入组件的名称：

<MyComponent>

此时，Sublime Text 应该会自动弹出自动完成列表，列出所有与 MyComponent 相关的组件。

结语

本文介绍了如何在 VS Code 和 Sublime Text 中启用 JSX 自动完成。无论你选择哪个编辑器，启用自动完成将会大大提高你的编码效率。