Skip to content

Latest commit

 

History

History
143 lines (95 loc) · 6.88 KB

README-EN.md

File metadata and controls

143 lines (95 loc) · 6.88 KB

My Awesome Tools

awesome-list

This repository is made to document various tools that I use to support productivity in writing code.

Table of Contents

  1. Text Editor
  2. Plugins
  3. Font
  4. Browser
  5. Browser Extension
  6. Website Documentation

Text Editor

For text editors, I use Visual Studio Code or vscode. Here are some reasons why using visual studio code.

  • Free and open source!
  • There are many plugins that are always updated.
  • There are many themes and are very light!

Download here: https://code.visualstudio.com/ Github link: https://github.com/Microsoft/vscode

Microsoft Visual Studio Code

Plugins

I myself focus on web-based programming. Here are some cool plugins that I usually use.

Live Server

Ever made static templates only html and css? usually so that the road can be placed in the htdocs apache folder right? Now this Live Server plugins are used to run the html and css files through the project folder by creating a new local server. By default it will make the server on localhost:5050.

Install plugins:

ext install ritwickdey.LiveServer

Live Server

Material Icon Theme

Bored with the icon of the vscode project folder? try Material Icon Theme so that your file icon and folder become more colorful and nice!

Install plugins:

ext install PKief.material-icon-theme

Material Icon Theme

Material Color Theme

If the previous one changes the icon to make it more interesting, now this makes your editor more interesting and comfortable during the coding process. There are several themes that can be selected starting from the dark to the high. I really recommend it.

Install plugins:

ext install Equinusocio.vsc-material-theme

Material Icon Theme

GitLens

The role of git in the development process software is like rice with side dishes! it's really important to be more enjoyable: D Now if you use this GitLens plugins, the project versioning process becomes even easier and much more productive. My favorite feature is, the popup feature about information about who is committed? Which logs? When?

Install plugins:

ext install eamodio.gitlens

Gitlens

Code Snippets

In this modern and fast-paced era, various snippets for certain programming languages ​​are needed so that the coding process becomes faster and more efficient. So it's perfect for you to install code snippets in the text editor. Here are some of the snippets that I use.

  • ES7 React/Redux/GraphQL/React-Native => for user react => ext install dsznajder.es7-react-js-snippets
  • Vetur => for VueJS users => ext install octref.vetur
  • Javascript (ES6) Code Snippets => for JS users => ext install xabikos.JavaScriptSnippets

And so on, you can find yourself in the market place according to the programming language used.

Language Support

Language Support is almost similar to Code Snippets, usually one package. So some recent languages such as stylus, go, solidityit is not supported by default, it is necessary in order to install itself as well as syntax highlighting snippet can appear in a text editor.

Keybindings

If I used to use PHPStrorm and WebStorm and get used to the shortcuts on the product jet brains. Now, instead of learning more about the shortcuts in vscode, I just install the keybindings. So vscode feels like PHPStorm or WebStorm: D

Install plugins:

ext install k--kato.intellij-idea-keybindings

Font

For me, the selection of fonts in the code is very important, especially those who can support various things such as arrows and special characters. So that the fonts are cool, I recommend using Fira Code.

Fira Code

How to install it can be seen at https://github.com/tonsky/FiraCode

Browser

I recommend using Google Chrome or Mozilla Firefox Developer Edition. Because both browsers have Dev Tools that are very complete. Good debugging and so on.

Browser Extension

For browser extensions, I use some cool tools including:

  1. Wappalyzer => for what stack analysis is used by the opened website. => https://www.wappalyzer.com/
  2. JSON Viewer => to view formatted JSON data through a browser => https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh
  3. React Developer Tools => to see the state of the process when developing the web with the React framework => https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
  4. Redux Devtools => to see the managent state during the developent process using redux => https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
  5. Vue Devtools => vue programmer must have! => https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
  6. Google Translate => can translate directly when selecting text in the browser (don't have to open translate.google.com) https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb
  7. Google Calendar => Check schedules, events and so on directly from extension => https://chrome.google.com/webstore/detail/google-calendar/gmbgaklkmjakoegficnlkhebmhkjfich
  8. Adblock Plus => Block ads is not clear! => https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
  9. MetaMask => makes it easy to inject web3 for development Ethereum Network => https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn

Website Documentation

Contributors English Language