前端开发通过chatgpt获得的技术提升-加速开发效率篇

使用vscode加速开发效率

项目管理

在插件管理中找到Project Manager，安装了此插件后，在mac电脑可以使用command + ⬆️ + p找到命令

保存项目。 保存项目完成后使用使用列出项目以打开功能打开你的项目。 如果需要在新窗口打开，则使用command + ⬆️ + n

react自定义模板

使用command + ⬆️ + p 找到配置用户代码片段

然后选择typescriptreact.json进行react自定义模板配置。
以下是我配置的模板

{
	"React Component Template": {
	  "prefix": "rfc!", // 这里的 "rfc!" 将作为触发词
	  "body": [
		"import React from 'react';",
		"",
		"interface ${1:ComponentName}Props {",
		"}",
		"",
		"const $1: React.FC<$1Props> = (props) => {",
		"  return (",
		"    <$2></$2>",
		"  );",
		"};",
		"",
		"export default $1;"
	  ],
	  "description": "Creates a React functional component template"
	}
  }

创建了tsx文件后，输入rfc!然后按下tab，实现和html模板的!类似的模板填充功能。

css类名点击跳转

vscode中的CSS Modules插件