الاختصارات المنبثقة ل react في vscode

Rayden Storm · 6 أبريل 2021

لدي extension في vscode تمكنني من كتابة اختصارات ثم الضغط على زر tab فتنبثق الشيفرة مثلا عند كتابة rfc والضغط على زر tab تنبثق شيفرة مكون الدالة

import React from 'react'

export default function test() {
    return (
        <div>
            
        </div>
    )
}

هل يمكنني برمجة اختصارات خاصة بي بحيث مثلا أصنع اختصارات ل redux toolkit بحيث عند كتابة rrslice ينبثق المثال حول ال slice لأشرع في التعديل عليه مباشرة

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Mohammed Saber6 · 6 أبريل 2021

يمكنك عمل هذا

قم بالدخول على
```
File --> Preferences --> User Snippets
```
قم باختيار اللغة التي تريدها

قم بكتابة الآتي

{
	"Redux kit shortcut": { //snippetوصف ال 
		"prefix": "rdxkit", // هذا هو الإختصار 
		"body": [
			// الكود يتم كتابته هنا 
          	// كل سطر بين علامتي التنصيص
          	// إذا أردت عمل إزاحة لسطر معين قم بعملها داخل علامة التنصيص ولا تقم بإزاحة السطر كله
			"import { createSlice } from '@reduxjs/toolkit';"
			""
			"export const counterSlice = createSlice({"
				"	name: 'counter',"
				"	initialState: {"
				"		value: 0,"
				"	},"

				"	reducers: {"
				"		increment: state => {"
				"			// Redux Toolkit allows us to write 'mutating' logic in reducers. It"
				"			// doesn't actually mutate the state because it uses the Immer library,"
				"			// which detects changes to a 'draft state' and produces a brand new"
				"			// immutable state based off those changes"
				"			state.value += 1;"
				"		},"
				""
				"		decrement: state => {"
				"			state.value -= 1;"
				"		},"
				""
				"		incrementByAmount: (state, action) => {"
				"			state.value += action.payload;"
				"		},"
				"	},"
				"});"
				""
				"// Action creators are generated for each case reducer function"
				"export const { increment, decrement, incrementByAmount } = counterSlice.actions;"
				""
				"export default counterSlice.reducer;"
		],
		"description": "Redux Kit"
	}
}

قم بكتابة rdx سيقوم المحرر بإظهارها لك
قم بالضغط على enter وسيتم تحميل الكود

الاختصارات المنبثقة ل react في vscode

السؤال

Rayden Storm

رابط هذا التعليق

شارك على الشبكات الإجتماعية

1 جواب على هذا السؤال

Recommended Posts

Mohammed Saber6

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية