Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

VS Code Arrow function snippets for JS and TS

License

NotificationsYou must be signed in to change notification settings

deinsoftware/vscode-arrow-snippets

Repository files navigation

VersionInstallsRatingslicenseOpen in VS Code

Arrow

The quick and easy way to create and useArrow Functions withVS Code.

We alsorecommend installing his complement extensionsConst & Props Snippets andDebug

Menu

Installation

Quick Launch

Open the quick launch withctrl+shift+P (Win/Linux) orcmd+shift+P (macOS).

Paste the following command and pressEnter:

ext install deinsoftware.arrow-function-snippets

Extension Manager

Open the extension manager withctrl+shift+X (Win/Linux) orcmd+shift+X (macOS), search forArrow Function Snippets and click on[Install] button.

Marketplace

Arrow Function Snippets

⇧Back to menu

Supported Languages

LanguageExtension
JavaScript.js
TypeScript.ts
JavaScript React.jsx
TypeScript React.tsx
Vue.vue

⇧Back to menu

Regular VS Arrow Functions

Syntax

The arrow function allows to accomplish the same result with fewer lines of code and approximately half the typing.Curly brackets aren't required if only one expression is present.

Arguments binding

Arrow functions do not have an arguments binding. But the same functionality can be achieved using rest parameters.

constmyFunction=(...args)=>{console.log(args);};myFunction(1,2,3);// Output: [1, 2, 3]

Use of this keyword

Unlike regular functions, arrow functions do not have their ownthis. The value ofthis inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value ofthis in the closest non-arrow parent function.

Using new keyword

Regular functions created using function declarations or expressions are constructible and callable. Since regular functions are constructible, they can be called using thenew keyword. However, the arrow functions are only callable and not constructible, so arrow functions can never be used as constructor functions. Hence, they can never be invoked with thenew keyword.

No duplicate named parameters

Arrow functions can never have duplicate named parameters, whether in strict or non-strict mode.

⇧Back to menu

Snippets

Below is a list of all available snippets and the triggers of each one. The░ means theTAB jump position and█ the final cursor position.

Arrow Function

TriggerDescriptionResult JS/TS
af→implicit return without arg(s)() => █
afa→implicit return with arg(s)(░arg) => █
afad→implicit return with arg destructuring({░prop, ░prop}) => █
afo→implicit return object() => ({░prop: value█})
afoa→implicit return object with arg(s)(░arg) => ({░prop: value█})
afe→explicit return() => {
  ░return █
}
afea→explicit return with arg(s)(░arg) => {
  ░return █
}
afead→explicit return with arg destructuring({░prop, ░prop}) => {
  ░return █
}
afee→explicit empty() => {
  █
}
afeea→explicit empty with arg(s)(░arg) => {
  █
}
afp→explicit with parentheses() => {
  (█)
}
afpa→explicit with parentheses and arg(s)(░arg) => {
  (█)
}
afii→immediately invoque(() => █)()
iiaf→immediately invoque(() => █)()

Async Arrow Functions

TriggerDescriptionResult JS/TS
aaf→implicit return without arg(s)async () => █
aafa→implicit return with arg(s)async (░arg) => █
aafad→implicit with arg destructuringasync ({ ░prop }) => █
aafe→explicit returnasync () => {
  ░return █
}
aafea→explicit return with arg(s)async (░arg) => {
  ░return █
}
aafead→explicit return with arg destructuringasync ({░prop, ░prop}) => {
  ░return █
}
aafee→explicit emptyasync () => {
  █
}
aafeea→explicit empty with arg(s)async (░arg) => {
  █
}
aaafea→explicit with args and awaitasync (░arg) => {
  const ░name = await █
}
aafii→immediately invoked(async () => █)()
iiaaf→immediately invoked(async () => █)()

Promises

TriggerDescriptionResult JS/TS
afpr→promise implicit returns░promise
  .then((░response) => {░})
  .catch((░error) => {░})
  .finally(() => {░})█
}
afr→implicit return response(░response) => █
afrj→implicit return response json(░response) => ░response.json()█
afrd→implicit return response data(░response) => ░response.data█
afer→explicit return response(░response) => {
  ░return █
}
aferj→explicit return response json(░response) => {
  return ░response.json()
}█
aferd→explicit return response data(░response) => {
  return ░response.data
}█

Arrays

TriggerDescriptionResult JS/TS
arfeq→filter equalconst ░newArray = ░array.filter((░element) => ░element === ░value)█
arfne→filter not equalconst ░newArray = ░array.filter((░element) => ░element !== ░value)█
arfoeq→filter object equalconst ░newArray = ░array.filter((░element) => ░element.░prop === ░value)█
arfone→filter object not equalconst ░newArray = ░array.filter((░element) => ░element.░prop !== ░value)█
arssa→sort string ascending░array.░sort((a, z) => a.localeCompare(z))█
arssd→sort string descending░array.░sort((a, z) => z.localeCompare(a))█
arsna→sort number ascending░array.░sort((a, z) => a - z)█
arsnd→sort number descending░array.░sort((a, z) => z - a)█
arsba→sort boolean ascending░array.░sort((a, z) => Boolean(a) - Boolean(z))█
arsbd→sort boolean descending░array.░sort((a, z) => Boolean(z) - Boolean(a))█
arsda→sort date ascending░array.░sort((a, z) => new Date(a) - new Date(z))█
arsdd→sort date descending░array.░sort((a, z) => new Date(z) - new Date(a))█
arso→sort object by properties░array.░sort((a, z) => {
  const sort = {
    ░propString: a.░propString.localeCompare(z.░propString),
    ░propNumber: a.░propNumber - z.░propNumber,
    ░propBoolean: Boolean(a.░propBoolean) - Boolean(z.░propBoolean),
    ░propDate: new Date(a.░propDate) - new Date(z.░propDate),
  }

  return sort.░propString || -sort.░propNumber || sort.░propBoolean || sort.░propDate
})█
arus→unsort / shuffle░array.░sort(() => Math.random() - 0.5)█
aruv→unique valuesconst ░newArray = ░array.filter((░current, ░index, ░arr) => ░arr.indexOf(░current) == ░index)█

Functions

TriggerDescriptionResult JSResult TS
edaf→export default anonymous arrow functionexport default (░) => {
  █
}		export default (░) => {
  █
}
edaaf→export default async anonymous arrow functionexport default async (░) => {
  █
}		export default async (░) => {
  █
}
caf→const arrow function implicit returnconst ░name = (░) => █const ░name = (░) => █
cafe→const arrow function explicit returnconst ░name = (░) => {
  ░return █
}		const ░name = (░) => {
  ░return █
}
ecaf→export const arrow functionexport const ░name = (░) => {
  █
}		export const ░name = (░) => {
  █
}
caaf→const async arrow functionconst ░name = async (░) => {
  █
}		const ░name = async (░) => {
  █
}
ecaaf→export const async arrow functionexport const ░name = async (░) => {
  █
}		export const ░name = async (░) => {
  █
}
caft→const arrow function with typeconst ░name = (░) : ░type => {
  █
}
ecaft→export const arrow function with typeexport const ░name = (░) : ░type => {
  █
}
caaft→const async arrow function with typeconst ░name = async (░) : ░type => {
  █
}
ecaaft→export const async arrow function with typeexport const ░name = async (░) : ░type => {
  █
}

⇧Back to menu

Examples

Create a response forfetch promise withafrj andafrd

Promise

⇧Back to menu

Keyboard

Remember to complement the snippets with these keyboard shortcuts that can be used without needing to move the cursor to the start or to the end.

ActionWin/LinuxmacOS
Insert line abovectrl+shift+entercmd+shift+enter
Insert line belowctrl+entercmd+enter

⇧Back to menu

Settings

Theeditor.snippetSuggestions setting in vscodesettings.json will show snippets on top of the suggestion list.

"editor.snippetSuggestions":"top"

⇧Back to menu

About

Built With

  • VS Code - Code editing redefined.
  • Figma - The collaborative interface design tool.
  • SWPM - One Package Manager to command them all.

Contributing

Please readCONTRIBUTING for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We useSemVer for versioning. For the versions available, see theArrow Function Snippets on GitHub.

Authors

See also the list ofcontributors who participated in this project.

Sponsors

If this project helps you, consider buying me a cup of coffee.

GitHub Sponsorspaypal

License

This project is licensed under the MIT License - see theLICENSE file for details.

⇧Back to menu

Sponsor this project

  •  

Contributors2

  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp