VSCode的ES7+ React/Redux/React-Native snippets插件

14次阅读

vscodereact/Redux代码片段失效需安装并配置ES7+插件:安装官方插件→验证rfc等前缀→手动设语言模式为javaScript React→补充rconst等用户片段→禁用冲突插件。

如果您在vscode中编写react或redux相关代码时无法快速生成常用代码片段,则可能是由于es7+ react/redux/react-native snippets插件未正确安装或未生效。以下是启用并验证该插件功能的具体操作步骤:

本文运行环境:macBook air,macOS Sequoia。

一、安装ES7+ React/Redux/React-Native snippets插件

该插件提供大量预定义的javascriptjsX代码片段,通过简短前缀触发完整结构,提升开发效率。需确保从VSCode官方扩展市场获取正版插件。

1、打开VSCode,点击左侧活动栏中的扩展图标(四个方块组成的图标)。

2、在扩展搜索框中输入ES7+ React/Redux/React-Native snippets

3、在搜索结果中找到作者为dsznajder的插件,确认其图标为蓝色背景加白色“R”字母。

4、点击“安装”按钮,等待安装完成提示出现。

二、验证代码片段是否可用

插件安装后需在支持的语言模式下触发,VSCode会根据文件后缀自动识别语言模式,但有时需手动设置以确保JSX语法被识别。

1、新建一个文件,保存为app.jsindex.jsx

2、在编辑器中输入rfc,观察是否弹出函数组件代码片段建议。

3、按下Tab键或回车键,确认是否自动生成包含import React from ‘react’及函数声明的完整结构。

三、手动配置语言模式以启用片段

当文件未被识别为JavaScript React类型时,代码片段将无法触发。需强制指定语言模式,使VSCode加载对应语法支持。

1、打开目标文件(如Component.jsx)。

2、点击VSCode窗口右下角显示的语言标识(例如“Plain Text”或“JavaScript”)。

3、在弹出菜单中选择JavaScript React

4、重新输入cc,检查是否出现类组件模板。

四、修改用户代码片段补充缺失前缀

部分常用缩写(如rconst用于构造函数)可能因版本更新被移除,可通过自定义用户代码片段恢复。

1、按下Cmd+Shift+P(Mac)调出命令面板,输入并选择Preferences: Configure User Snippets

2、在弹出菜单中选择javascript.json(若不存在则创建)。

3、在右侧大括号内添加如下内容:

“rconst”: {

“prefix”: “rconst”,

“body”: [“constructor(props) {“, ” super(props);”, ” $0″, “}”]

}

五、禁用冲突插件避免覆盖行为

其他代码片段类插件(如reactjs code snippets)可能与ES7+插件注册相同前缀,导致触发失败或内容错乱。

1、在扩展视图中搜索已安装的插件,查找名称含Reactjs code snippetsReact Preview的条目。

2、对疑似冲突插件点击右侧齿轮图标,选择Disable

3、重启VSCode,再次测试impt(导入PropTypes)是否正常展开。

text=ZqhQzanResources