반응형

[VSCODE] 확장프로그램- Peacock 

작업 공간의 작업 공간 색상을 미묘하게 변경하십시오. VS Code 인스턴스가 여러 개 있고 어떤 인스턴스인지 빠르게 식별하려는 경우에 이상적입니다.

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock 

 

Peacock - Visual Studio Marketplace

Extension for Visual Studio Code - Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.

marketplace.visualstudio.com

Quick Usage

Let's see Peacock in action!

  1. Create/Open a VSCode Workspace (Peacock only works in a Workspace)
  2. Press F1 to open the command palette
  3. Type Peacock
  4. Choose Peacock: Change to a favorite color
  5. Choose one of the pre-defined colors and see how it changes your editor

Now enjoy exploring the rest of the features explained in the docs, here!

 

반응형
반응형

[VSCODE] 12 Unusual VS Code Extensions You Definitely Need As a Developer

You could improve your workflow, boost your productivity, and simply make VSCode prettier with the help of these extensions!

 

https://javascript.plainenglish.io/12-unusual-vs-code-extensions-you-definitely-need-as-a-developer-71a7f745d5e

 

12 Unusual VS Code Extensions You Definitely Need As a Developer

You could improve your workflow, boost your productivity, and simply make VSCode prettier with the help of these extensions!

javascript.plainenglish.io

1. Project Dashboard

Before working on a new project, you surely need to organize your previous one and make everything structured. A Visual Studio Code extension called VSCode Project Dashboard enables you to organize your projects in any possible way. You can access frequently used files, folders, and SSH remotes quickly, and pin them to a dashboard.

Project Dashboard

2. Git Graph

If you’re constantly using GIT, then you definitely need to install this extension. With Git Graph, you can easily view your history, and all your commits and manipulate them all. As you can see in the example below, you can directly access every important aspect of your repository right inside of VSCode, which is pretty useful. Even if you haven’t used Git, you should start to. It’s the easiest and best way to work with your team, and it will improve your workflow exponentially!

Git Graph

3. Toggle Zen Mode

If I knew about this extension, I wouldn’t be so sloppy in my coding and could accomplish my tasks more quickly. Toggle Zen Mode adds a new button. When you press on this button, it will activate VSCode’s Zen mode feature and remove all unnecessary clutter from the screen. In other words, it helps you to be more focused on your code and fall into a flow statement, which will significantly increase your productivity and efficiency!

Toggle Zen Mode

4. Peacock

The next extension in our list is Peacock, which has over 1.9 million downloads; however, many developers still haven’t heard of it before. It simply changes the color of your Visual Studio Code workspace. Ideal for quickly identifying your editor when you have multiple instances of VS Code or use VS Code's Remote features.

Peacock

5. Truffle

The Web 3.0 sphere and all technologies related to it, such as crypto, NFT, DeFi, and many others, are booming right now. I wrote an article about the importance of Web 3.0 in the future and why you should pay attention to it. And many developers working in this sphere are struggling with writing smart contracts on Solidity, which is a programming language for Ethereum. Truffle for VS Code simplifies how you create, build, debug, and deploy smart contracts on Ethereum and all EVM-compatible blockchains and layer 2 scaling solutions. So if you're a blockchain developer, you surely need it!

Truffle

6. Remote — SSH

The Remote — SSH extension lets you use any remote machine with an SSH server as your development environment. This can greatly simplify development and troubleshooting in a wide variety of situations. You can either develop on the same operating system you deploy to or use larger, faster, or more specialized hardware than your local machine. Also, quickly swap between different, remote development environments and safely make updates without worrying about impacting your local machine.

Remote-SSH

7. Surround

It’s a simple and powerful extension to add wrapper snippets around your code blocks. By using Surround extensions, you can upgrade your code to another level. You can wrap already existing lines and turn them into a function, a loop, a try/catch method, and many other essential methods.

Surround

8. Rainbow CSV

I hate CSV files. There’s nothing structured, and I get really bored with constant searching for specific information that I need. If you’re also struggling with these types of problems and want to make your CSV file readable, then this extension is right for you! It highlights different types of data and shows them to you in a better way.

Rainbox CSV

9. Better Comments

Better Comments is a pretty popular extension; however, I still want to add it to this list. As you might guess from the title, it helps you write better comments for your code. If you’re always struggling with default gray comments and lose focus finding the important one, then this extension is right for you. It will make your comments look prettier and will help others understand your code much easier!

Better Comments

10. Random Everything

This extension was previously covered in one of my other lists. It’s definitely for you if you frequently work with databases or simply need some random information for the test, even though I think it’s really cool. Names, numbers, and even email addresses can all be generated at random using Random Everything. So, yeah, it’s pretty cool and essential for everybody!

Random Everything

11. Resource Monitor

One of the latest extensions on the list is Resouce Monitor. There’s nothing so difficult in this extension. It just shows you some information about your system and usage. It can display CPU frequency, usage, memory consumption, and battery percentage remaining within the VSCode status bar.

12. Shades of Purple

Everyone is tired of One Dark Pro, right? Me too. So, there’s probably a better alternative to make your VS Code even prettier. It’s called "shades of purple," and yeah, you guessed right, it’s a purple color scheme for your IDE. However, there are no toxic colors, and it looks pretty nice. I’ve switched to this theme myself and am happy with the results!

Shades of Purple
 
반응형
반응형

[VSCODE] 확장프로그램 - Project Dashboard

 

https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard 

 

Project Dashboard - Visual Studio Marketplace

Extension for Visual Studio Code - Organize your workspaces in a speed-dial manner.

marketplace.visualstudio.com

VSCode Project Dashboard

VSCode Project Dashboard is a Visual Studio Code extension that lets you organize your projects in a speed-dial like manner. Pin your frequently visited folders, files, and SSH remotes onto a dashboard to access them quickly.

 

 

반응형
반응형

20 Useful Chrome Extensions for Developers

 

Google chrome is one of the most popular, fastest and widely used browser amongst internet users. Google chrome not only enables users to browse web pages quickly but also provides rich user experience. Google chrome has something special for every type of users whether they are bloggers, developers or gamers. Chrome enhances its usability by providing outstanding extensions, plugins and add-ons. No doubt Firefox has more reliable and loyal users and completion is tough between these two internet giants but if you are still not ready to leave Firefox yet, make sure you give a chance to chrome with outstanding chrome extensions.

In this article I have gathered 20 Useful Chrome Extensions for Developers that are special hand-picked and definitely help developers for their development related tasks. I hope you will find the list handy and following chrome extensions would be helpful for you to handle complex projects. Enjoy.

1. BuiltWith

build-with
The BuiltWith Chrome Extension lets you find out what a website is built with by a simple click on the builtwith icon!
BuiltWith is a web site profiler tool. Upon looking up a page, BuiltWith returns all the technologies it can find on the page. BuiltWith’s goal is to help developers, researchers and designers find out what technologies pages are using which may help them to decide what technologies to implement themselves.

Source

2. Codenvy IDE

Codenvy IDE
Codenvy is a cloud IDE enables you to code, build, debug in the cloud, and deploy to your PaaS of choice. Teams can collaboratively build SDKs, APIs, Web apps and mobile apps with Codenvy. We support HTML5/JavaScript, Java, Node.JS, Android, Spring, PHP, Ruby and Python. Because you can deploy directly to a PaaS environment, migrating from development to staging and deployment takes just a few clicks. The environment is collaborative and workspaces can be screen shared like WebEx, collaborative like Google Docs, and forked like GitHub.

Source

3. Postman Rest Client

Postman-–-REST-Client
Postman helps you be more efficient while working with APIs. Postman is a scratch-your-own-itch project. The need for it arose while one of the developers was creating an API for his project. After looking around for a number of tools, nothing felt just right. The primary features added initially were a history of sent requests and collections.

Source

4. JSON Editor

json-editor
JSON Editor is a tool to view, edit, and format JSON. It shows your data in an editable treeview and in a code editor. It features view and edit JSON side by side in treeview and a code editor, Edit, add, move, remove, and duplicate fields and values, change type of values, sort arrays and objects, colorized values, color depends of the value type.

Source

5. Coding the Web

coding-the-web
Most of us learning HTML feel lazy to write code and save it and then run it. when it comes to CSS and JavaScript it becomes too tedious a task to handle..the solution is this application…Its made to make u even lazier by displaying a preview of your html code by the click of a button. just write your html,css and JavaScript code in the corresponding tabs on left side and see a preview of your code on right side by clicking Preview Button..

Source

6. Web Developer

web-developers
The Web Developer extension adds a toolbar button to the browser with various web developer tools.

Source

7. Firebug Lite

Firebug-Lite
Firebug Lite provides the rich visual representation we are used to see in Firebug when it comes to HTML elements, DOM elements, and Box Model shading. It provides also some cool features like inspecting HTML elements with your mouse, and live editing CSS properties.

Source

8. Clear Cache

Clear-Cache
Clear Cache lets you quickly clear your cache without any confirmation dialogs, pop-ups or other annoyances.
You can customize what and how much of your data you want to clear on the options page, including: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL.

Source

9. Handcraft

handcraft
Handcraft is a web-based prototyping tool for interaction designers and front-end developers. The design process doesn’t end with a wireframe or mockup. Bring your design into the browser and use HTML, CSS and Javascript to handcraft interactive prototypes that get sign off faster.

Source

10. Dimensions

dimension
Dimensions is a responsive web design testing tool. It is the easiest way to test responsive websites at different viewports. It works offline & is compatible with LiveReload.

Source

11. GistBox

gistbox
GistBox is the best interface to Github Gists. Organize your snippets with labels. Edit your code. Search by description. All in one speedy app.

Source

12. Resolution Test

Resolution-Test

Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions and the ability to customize that list. It also gives users the option to turn on Google Browser Size,

Source

13. CSS Shack

css-shack

CSS-Shack allows you to create Layers Styles (just like you would in any other image editing software), and export them into a single CSS file, or copy them to the clipboard.

Source

14. Codev

codev
codev.it is the best designed online code-editor with built-in SQLite editor, Compiler, Time Tracker, Automatic Backup.

Source

15. Pendule

Pendule
Pendule is extended web developer tool for chrome which helps developers with style sheets, forms, JavaScript, images, CSS, browser sizes, and many more.

Source

16. Koding

koding
Koding is an Online Development Environment including Code Editor, Cloud Hosting, Database Administration, and Collaboration with access to a Web-based file system and FTP & SVN integration. Kdigen is enriched with numerous number of features such as free developer accounts, lets you connect to your own FTP servers, shell access to your files and also online coding support for various languages such as php, peral, python and many more.

Source

17. MyQuery Builder

My-Query-Builder
MyQuery Builder is a browser-based MySQL query editor for PHP web developers that makes building MySQL queries easy. MyQuery Builder is an integral part of a web developer’s workflow. MQB lets you build MySQL queries visually with drag-and-drop ease, deconstruct your existing MySQL queries and open them in the visual SELECT Query Builder, convert MySQL queries you create to site-ready PHP code, upgrade your existing PHP MySQL code from older standards to new, and generally offer a drag-and-drop approach to what has typically been the realm of arcane tools or hard to use wizards.

Source

18. Google Apps Script

Google Apps Script
Google Apps Script is a JavaScript cloud scripting language that provides easy ways to automate tasks across Google products and third party services and build web applications

Source

19. Cookies

Cookies
Cookies is a free, powerful and easy-to-use Visual Cookie Editor. Cookies helps you more effectively manage all cookies stored within your browser, including 3rd party cookies. The interface is clean and well organized.

Source

20. Shift Edit

shfit-edit
ShiftEdit is an online PHP, Ruby, Java, HTML, CSS and JavaScript editor with built-in (S)FTP and Dropbox. Ideal for web development.

Source

반응형

+ Recent posts