如何拥有 JSX TellerSense VSCode - JavaScript

对于使用 JSX 的 JavaScript 开发人员来说，拥有 JSX TellerSense 对编写代码和调试非常重要。本文将为您介绍如何在 VSCode 中拥有 JSX TellerSense。

步骤

1. 安装 VSCode

如果您尚未安装 VSCode，请先 下载并安装。

2. 安装 JavaScript 插件

在 VSCode 中，打开插件侧边栏（快捷键 Ctrl+Shift+X 或 Cmd+Shift+X），搜索并安装 JavaScript 插件。

3. 安装 Babel 插件

打开插件侧边栏，搜索并安装 Babel JavaScript 插件。

4. 配置用户设置

点击左上角的菜单图标，选择 Preferences: Open User Settings。

在用户设置窗口中，搜索并编辑以下设置：

"javascript.validate.enable": false,
"javascript.implicitProjectConfig.experimentalDecorators": true,

这些设置禁用了 VSCode 的默认 JavaScript 检查器，并启用了 experimentalDecorators，这是 JSX 的一项实验性功能。

5. 安装 ESLint 插件

在插件侧边栏中，搜索并安装 ESLint 插件。如果您的项目中使用了 ESLint，则这是必需的。

6. 配置 ESLint

在项目根目录下，创建一个 .eslintrc 文件，并添加以下配置：

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "impliedStrict": true,
      "jsx": true
    }
  },
  "rules": {
    "no-console": "off",
    "react/prop-types": "off"
  }
}

这些配置启用了 React 插件，并禁用了一些常见的 ESLint 规则。如果您需要自定义它们，请修改此文件。

7. 安装 React 插件

在插件侧边栏中，搜索并安装 Reactjs code snippets 插件。这将为您提供一些有用的代码片段。

8. 完成！

您现在已经拥有了 JSX TellerSense 和其他工具来编写和调试您的 JavaScript 代码。

结论

通过安装和配置一些必要的插件和工具，您可以在 VSCode 中享受到 JSX TellerSense 的好处，提高编写和调试 JavaScript 代码的效率。