Giter Club home page Giter Club logo

vscode-arrow-snippets's Introduction

Arrow Function Snippets

Version Installs Ratings license Open in VS Code

Arrow

The quick and easy way to create and use Arrow Functions with VS Code.

We also recommend installing his complement extensions Const & Props Snippets and Debug

Menu

Installation

Quick Launch

Open the quick launch with ctrl+shift+P (Win/Linux) or cmd+shift+P (macOS).

Paste the following command and press Enter:

ext install deinsoftware.arrow-function-snippets

Extension Manager

Open the extension manager with ctrl+shift+X (Win/Linux) or cmd+shift+X (macOS), search for Arrow Function Snippets and click on [Install] button.

Marketplace

Arrow Function Snippets

⇧ Back to menu

Supported Languages

Language Extension
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.

const myFunction = (...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 own this. The value of this inside an arrow function remains the same throughout the lifecycle of the function and is always bound to the value of this 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 the new 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 the new 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 the TAB jump position and █ the final cursor position.

Arrow Function

Trigger Description Result 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

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

Promises

Trigger Description Result 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

Trigger Description Result JS/TS
arfeq→ filter equal const ░newArray = ░array.filter((░element) => ░element === ░value)█
arfne→ filter not equal const ░newArray = ░array.filter((░element) => ░element !== ░value)█
arfoeq→ filter object equal const ░newArray = ░array.filter((░element) => ░element.░prop === ░value)█
arfone→ filter object not equal const ░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 values const ░newArray = ░array.filter((░current, ░index, ░arr) => ░arr.indexOf(░current) == ░index)█

Functions

Trigger Description Result JS Result TS
edaf→ export default anonymous arrow function export default (░) => {
  █
}		 export default (░) => {
  █
}
edaaf→ export default async anonymous arrow function export default async (░) => {
  █
}		 export default async (░) => {
  █
}
caf→ const arrow function implicit return const ░name = (░) => █ const ░name = (░) => █
cafe→ const arrow function explicit return const ░name = (░) => {
  ░return █
}		 const ░name = (░) => {
  ░return █
}
ecaf→ export const arrow function export const ░name = (░) => {
  █
}		 export const ░name = (░) => {
  █
}
caaf→ const async arrow function const ░name = async (░) => {
  █
}		 const ░name = async (░) => {
  █
}
ecaaf→ export const async arrow function export const ░name = async (░) => {
  █
}		 export const ░name = async (░) => {
  █
}
caft→ const arrow function with type const ░name = (░) : ░type => {
  █
}
ecaft→ export const arrow function with type export const ░name = (░) : ░type => {
  █
}
caaft→ const async arrow function with type const ░name = async (░) : ░type => {
  █
}
ecaaft→ export const async arrow function with type export const ░name = async (░) : ░type => {
  █
}

⇧ Back to menu

Examples

Create a response for fetch promise with afrj and afrd

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.

Action Win/Linux macOS
Insert line above ctrl+shift+enter cmd+shift+enter
Insert line below ctrl+enter cmd+enter

⇧ Back to menu

Settings

The editor.snippetSuggestions setting in vscode settings.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 read CONTRIBUTING for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the Arrow Function Snippets on GitHub.

Authors

See also the list of contributors who participated in this project.

Sponsors

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

GitHub Sponsors paypal

License

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

⇧ Back to menu

vscode-arrow-snippets's People

Contributors

equiman avatar pranav-kural avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

onehoopyfrood pranav-kural ccnnde jdukleth

vscode-arrow-snippets's Issues

afc (with currly brackets)

Thanks for these awesome snipptes. The one I would need most, is missing.

That is really a minor issues, the same can be achieved with "afe" and deleting the return of course.

afc (with currly brackets);

() => {
    █
}

Request: Restore "afee" and "afeea" snippets

In the most recent release, these snippets were removed with the note that they could use the snippets with return, with the additional step of deleting the return if the return is not necessary. In practice, this has the unintended consequence of making intellisense unusable until the escape key or tab key is pressed in addition to the backspace key since the return keyword is highlighted as part of the snippet.

I fully realize that this is a minor inconvenience, but the "afee" template was one I used quite frequently, especially when writing unit tests. I have found myself tripping over this time and time again in the days since this template was removed.

Not working with react

image
As you can see here if i use it inside react return i don't get the suggestions but if i use it on the outside i did
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.