https://github.com/onurkerimov/decorations-vscode-extension

A VSCode extension to hide recurring JavaScript keywords and display symbols instead of them.
https://github.com/onurkerimov/decorations-vscode-extension

Last synced: 7 days ago
JSON representation

A VSCode extension to hide recurring JavaScript keywords and display symbols instead of them.

• Host: GitHub
• URL: https://github.com/onurkerimov/decorations-vscode-extension
• Owner: onurkerimov
• Created: 2022-02-13T14:42:34.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-02-14T15:27:18.000Z (about 3 years ago)
• Last Synced: 2024-12-20T20:44:39.058Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.67 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Decorations for JS / TS

This is a plugin to cognitively enhance JavaScript and TypeScript developing experience. 

It hides some keywords that are oftenly used, such as `const` and `return`. Instead, it displays single character decorations for them.



  



It doesn't replace the text. It relies on decorations feature of VSCode. To toggle it, use Cmd+K D, or "Decorations for JS / TS: Toggle" in command palette.

## Motivation

This plugin exists because of a frustration that there are too many `const`s everywhere. `const` is a pretty long name for a keyword that's used that often. 

It used to be fine when there was only `var` as the variable declarator. 

Even at those times, tools like CoffeeScript was being prefered to address some language discomforts. Next to addressing the unnecessity of `var`, CoffeScript also tried to solve other problems like unnecessity of curly braces, and used indentation instead. (Not something this extension does)

Nowadays, many things in frontend development is shaped and centered around TypeScript, so it's very difficult to get rid of it and start using other transpilers/languages. So I thought I could achieve the DX upgrade I wanted via an editor extension.

## Mapping

| Keyword | Symbol | Keyword | Symbol |

|-----|------|-----|------|

|`var` | `∅` |`type` and `interface` | `✣` |

|`let` | `○` |`import` | `❯` |

|`const` | `●` |`export` | `❮` |

|`return` | `⮑` |`export default` | `❮❮` |

> Since `var`, `let`, and `const` are similar, they're all circles. `type` is like a fancy cousin of them. There's literally a "return" symbol for `return`, and lastly there are module related ones. I decided not to do anything for the rest of the keywords. 

## Examples

### While coding



> 

| Before | After |

|---|---|

| ![before](./assets/before.png) | ![after](./assets/after.png) |