#
# ES7 React/Redux/React-Native snippets
提供了一组代码片段和快捷方式，用于快速开发 React、Redux 和 React Native 应用。可以快速导入 React、Redux 相关的模块，自动生成组件的 PropTypes 类型检查等等。这些功能可以节省你在编辑器中的时间和精力，帮助你更专注于实际的开发任务。
# ESlint
校验代码语法，自动修复
# React Redux Toolkit RTK Query Snippets
redux-toolkit 代码片段合集
# 无法安装怎么办？
注意
注意！如 vscode 版本太低，会导致无法安装，需要自定义新建代码片段
- 【推荐】升级 vscode 版本
- 【无法升级版本】自定义 vscode 代码片段
1、打开 vscode 快捷键 ctrl shift p
2、新建代码片段
3、输入代码片段的文件名，名称自定义
4、输入名称后回车，自动生成一个.code-sinppets后缀名的文件，我们在此文件定义代码片段
如下是 redux-slice 代码片段，复制，粘贴替换到.code-sinppets后缀名的文件
{
"Redux Toolkit Slice": {
"prefix": "srtslice",
"body": [
"import { createSlice } from "@reduxjs/toolkit";",
"",
"const ${1:sliceName} = createSlice({",
" name: "${1:sliceName}",",
" initialState: {},",
" reducers: {",
" invalidate: (state, { payload }) => {",
" payload.forEach(item => {",
" state[item] = false;",
" });",
" },",
" },",
" extraReducers: builder => builder",
" .addCase(${2:actionName.pending}, (state, { payload }) => {",
" state.loading = true;",
" })",
" .addCase(${2:actionName.fulfilled}, (state, { payload }) => {",
" state.loading = false;",
" })",
" .addCase(${2:actionName.rejected}, (state, { payload }) => {",
" state.loading = false;",
" state.error = payload;",
" })",
"});",
"",
"export const { invalidate } = ${1:sliceName}.actions;",
"export default ${1:sliceName}.reducer;"
],
"description": "Redux Toolkit slice template"
}
}# ESLint Chinese Rules
eslint 中文规则提示插件
