VSCode常用插件

通用插件：

1、live Server

它会帮使用者自动开启一个服务器，保存的时候便自动刷新浏览器页面

2、Easy LESS

将less编译成css

3、ESLint (推荐)

js语法纠错，可以自定义配置

4、GitLens(使用git的必备)

git日志查看插件

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码作者身份，还能通过强大的比较命令获得有价值的见解等等

5、HTML CSS Support (必备)

智能提示CSS类名以及id 

6、Auto Rename Tag (必备)

自动完成另一侧标签的同步修改

7、HTML Snippets (必备)

智能提示HTML标签，以及标签含义

8、JavaScript(ES6) code snippets (必备)

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

9、ES7 React/Redux/GraphQL/React-Native snippets

快速生成React代码块（注意版本兼容性）：

• 编写代码rcc 就可以生成有状态的组件代码块
• 编写代码rfc 就可以生成无状态的组件代码块

10、React/Redux/react-router Snippets (推荐)(react必备)

React/Redux/react-router语法智能提示

11、Vetur (推荐)(vue必备)

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

12、Prettier - Code formatter

格式化vue。

13、vscode-icons

在vscode显示文件图标

14、Open in Browser

在vscode中打开浏览器访问

开发react常用插件

在VSCode中开发React时，有许多实用的插件可以帮助提高开发效率。以下是一些常用的插件，按照功能分类进行归纳：

1. 代码片段和生成

• Simple React Snippets: 提供了一系列的React代码片段，可以快速生成React组件结构。例如，输入imr会自动扩展为import React from 'react'。
• React/Redux/react-router Snippets: 提供React、Redux和react-router的语法智能提示和代码片段。

2. 文件路径和模块导入

• Path Intellisense: 自动完成文件路径，使导入文件或模块变得更加快捷。
• npm Intellisense: 在import语句中自动填充npm模块。

3. 代码质量和规范

• ESLint: 提供JavaScript和React的语法检查，帮助遵守一定的代码规范，减少错误和不一致的代码风格。
• Prettier - Code formatter: 自动格式化代码，确保代码风格的一致性。

4. 开发辅助和调试

• React Developer Tools: 虽然这不是一个VSCode插件，而是一个浏览器扩展，但它对于React开发至关重要，可以在开发者工具中查看React组件的状态和props等。
• GitLens: 增强了VSCode内置的Git功能，提供了更多关于代码历史和变更的信息。

5. 编辑和自动化

• Auto Rename Tag: 在编辑HTML/JSX时，自动帮你更改匹配的开始/结束标签。
• Auto Close Tag: 自动闭合HTML/XML标签。

6. 样式和视图

• Vetur: Vue多功能集成插件，但对于React开发也提供一些基础的支持，如语法高亮、错误检查等。
• Beautify css/sass/scss/less: 格式化样式代码。

7. 其他实用插件

• open in browser: 支持快捷键与鼠标右键快速在浏览器中打开html文件。
• Material Icon Theme: 提供丰富的图标主题，增强VSCode的视觉效果。
• Project Manager: 在多个项目之间快速切换的工具。
• fileheader: 为文件顶部添加注释模板，包括作者、时间等信息。

8. AI插件

• ChatGPT GPT-4 - 海鲸AI: 包含了多个AI模型，可以实现代码优化、代码解读、代码bug修复等功能。

这些插件涵盖了React开发的各个方面，从代码生成、编辑到调试和版本控制等。选择适合自己开发需求的插件，可以大大提高开发效率。

项目中快速生成react+typescript代码的方法

在VSCode中，快速生成React+TypeScript代码的快捷键并不是内置的，但你可以通过安装插件和配置代码片段来实现类似的功能。以下是一些建议的步骤和快捷键配置方法：

1、安装必要插件

首先，确保你已经安装了支持React和TypeScript的插件，如“Simple React Snippets”或“React/Redux/react-router Snippets”。这些插件可以提供React和TypeScript的代码片段，从而加速代码编写过程。

2、配置自定义代码片段

VSCode允许用户自定义代码片段，你可以通过以下步骤来配置：

• 打开VSCode，点击左上角的文件(File) -> 首选项(Preferences) -> 用户代码片段(User Snippets)；
• 在弹出的搜索框中输入“typescriptreact”并选择它；
• 在打开的代码片段文件中，你可以定义自己的快捷键和对应的代码模板。例如：

{  
    "Create React Functional Component": {  
        "prefix": "cfc",  
        "body": [  
            "import React from 'react';",  
            "",  
            "interface ${1:ComponentName}Props {",  
            "  // Props go here",  
            "}",  
            "",  
            "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = (props) => {",  
            "  return (",  
            "    <div>",  
            "      {/* Component content goes here */}",  
            "    </div>",  
            "  );",  
            "};",  
            "",  
            "export default ${1:ComponentName};"  
        ],  
        "description": "Create a React functional component with TypeScript"  
    }  
}

项目中快速生成vue3+typescript代码的方法

第一步：vscode中File->Preferences->Configure User Snippets

第二步：在点击用户代码片段后的弹窗中输入你想要的便捷语言（vue3）然后回车（enter）

第三步：在回车后的页面输入你想要的代码：

{
	"Print to console": {
		"prefix": "vue3",
		"body": [
			"<template>",
			"",
			"</template>",
			"<script setup>",
			"import { ref, reactive } from 'vue'",
			"",
			"</script>",
			"",
			"",
			"<style lang='scss' scoped>",
			"",
			"</style>",
		],
		"description": "Log output to console"
	}
}

第四步：保存文件，并在VSCode中打开一个 .vue 文件，输入 vue3 然后回车，你将会看到代码片段生成的模板。