반응형

[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] 확장프로그램 - Git Graph 

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph 

 

Git Graph - Visual Studio Marketplace

Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

marketplace.visualstudio.com

Git Graph extension for Visual Studio Code

View a Git Graph of your repository, and easily perform Git actions from the graph. Configurable to look the way you want!

 

 

 

반응형
반응형

[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.

 

 

반응형
반응형

Generate Doxygen Comments in VS Code

This VS Code Extensions provides Doxygen Documentation generation on the fly by starting a Doxygen comment block and pressing enter.

 

 

 

Table of Contents

Features

Alignment

For how this works, see the CHANGELOG.md

Attributes

Con- and Destructors

 

Extensive customization

 

 

File descriptions

Function pointers

Operators

 

Parameters

 

Return types

 

Smart text

 

 

Supported smart text snippets:

  • Constructors
  • Destructors
  • Getters
  • Setters
  • Factory methods

Each of them can be configured with its own custom text and you can decide if the addon should attempt to split the name of the method according to its case.

Trailing

Templates

 

Auto-complete doxygen commands

Config options

// The prefix that is used for each comment line except for first and last.
"doxdocgen.c.commentPrefix": " * ",

// Smart text snippet for factory methods/functions.
"doxdocgen.c.factoryMethodText": "Create a {name} object",

// The first line of the comment that gets generated. If empty it won't get generated at all.
"doxdocgen.c.firstLine": "/**",

// Smart text snippet for getters.
"doxdocgen.c.getterText": "Get the {name} object",

// The last line of the comment that gets generated. If empty it won't get generated at all.
"doxdocgen.c.lastLine": " */",

// Smart text snippet for setters.
"doxdocgen.c.setterText": "Set the {name} object",

// Doxygen comment trigger. This character sequence triggers generation of Doxygen comments.
"doxdocgen.c.triggerSequence": "/**",

// Smart text snippet for constructors.
"doxdocgen.cpp.ctorText": "Construct a new {name} object",

// Smart text snippet for destructors.
"doxdocgen.cpp.dtorText": "Destroy the {name} object",

// The template of the template parameter Doxygen line(s) that are generated. If empty it won't get generated at all.
"doxdocgen.cpp.tparamTemplate": "@tparam {param} ",

// File copyright documentation tag. Array of strings will be converted to one line per element. Can template {year}.
"doxdocgen.file.copyrightTag": [
"@copyright Copyright (c) {year}"
],

// Additional file documentation. One tag per line will be added. Can template `{year}`, `{date}`, `{author}`, `{email}` and `{file}`. You have to specify the prefix.
"doxdocgen.file.customTag": [],

// The order to use for the file comment. Values can be used multiple times. Valid values are shown in default setting.
"doxdocgen.file.fileOrder": [
"file",
"author",
"brief",
"version",
"date",
"empty",
"copyright",
"empty",
"custom"
],

// The template for the file parameter in Doxygen.
"doxdocgen.file.fileTemplate": "@file {name}",

// Version number for the file.
"doxdocgen.file.versionTag": "@version 0.1",

// Set the e-mail address of the author. Replaces {email}.
"doxdocgen.generic.authorEmail": "you@domain.com",

// Set the name of the author. Replaces {author}.
"doxdocgen.generic.authorName": "your name",

// Set the style of the author tag and your name. Can template {author} and {email}.
"doxdocgen.generic.authorTag": "@author {author} ({email})",

// If this is enabled a bool return value will be split into true and false return param.
"doxdocgen.generic.boolReturnsTrueFalse": true,

// The template of the brief Doxygen line that is generated. If empty it won't get generated at all.
"doxdocgen.generic.briefTemplate": "@brief {text}",

// The format to use for the date.
"doxdocgen.generic.dateFormat": "YYYY-MM-DD",

// The template for the date parameter in Doxygen.
"doxdocgen.generic.dateTemplate": "@date {date}",

// Decide if you want to get smart text for certain commands.
"doxdocgen.generic.generateSmartText": true,

// Whether include type information at return.
"doxdocgen.generic.includeTypeAtReturn": true,

// How many lines the plugin should look for to find the end of the declaration. Please be aware that setting this value too low could improve the speed of comment generation by a very slim margin but the plugin also may not correctly detect all declarations or definitions anymore.
"doxdocgen.generic.linesToGet": 20,

// The order to use for the comment generation. Values can be used multiple times. Valid values are shown in default setting.
"doxdocgen.generic.order": [
"brief",
"empty",
"tparam",
"param",
"return",
"custom",
"version",
"author",
"date",
"copyright"
],

// Custom tags to be added to the generic order. One tag per line will be added. Can template `{year}`, `{date}`, `{author}`, `{email}` and `{file}`. You have to specify the prefix.
"doxdocgen.generic.customTags": [],

// The template of the param Doxygen line(s) that are generated. If empty it won't get generated at all.
"doxdocgen.generic.paramTemplate": "@param {param} ",

// The template of the return Doxygen line that is generated. If empty it won't get generated at all.
"doxdocgen.generic.returnTemplate": "@return {type} ",

// Decide if the values put into {name} should be split according to their casing.
"doxdocgen.generic.splitCasingSmartText": true,

// Array of keywords that should be removed from the input prior to parsing.
"doxdocgen.generic.filteredKeywords": [],

// Substitute {author} with git config --get user.name.
"doxdocgen.generic.useGitUserName": false,

// Substitute {email} with git config --get user.email.
"doxdocgen.generic.useGitUserEmail": false

// Provide intellisense and snippet for doxygen commands
"doxdocgen.generic.commandSuggestion": true

// Add `\\` in doxygen command suggestion for better readbility (need to enable commandSuggestion)
"doxdocgen.generic.commandSuggestionAddPrefix": false

Contributors

Christoph Schlosser

Rowan Goemans

Known Issues

See open bugs

What's to come

See open features

반응형
반응형

[Chrome] 크롬확장프로그램, 폰트(Font) 확인 프로그램

 

http://www.chengyinliu.com/whatfont.html

 

WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin Liu

← Back to Chengyin's main page What is this for? What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that's too complicated. It should be just a click away. Hence I wrote WhatFont, with which you can easily g

www.chengyinliu.com

 

 

 

반응형
반응형
[Chrome] Visual Inspector by CanvasFlip


‘F12’를 누르면 등장하는 개발자도구는 무척 유용하다. 개발자도구를 활용하면 지금 보고 있는 웹페이지의 구성요소를 확인하고 부분적인 수정도 해 볼 수 있다. 문제는 이 개발자도구가 전혀 직관적이지 못하다는 데 있다. 기본적인 코딩을 모르면 접근성이 대폭 떨어진다. 
이 문제를 해결해줄 수 있는 도구가 등장했다. 


비주얼 인스펙터는 크롬에 설치해 사용하는 확장프로그램이다. 해당 웹사이트의 색상 구성, 글꼴, 이미지 등을 한눈에 확인할 수 있게 보여준다. 개발자도구를 활용하기 편한 방식으로 보여주는 도구다. 개발자와 소통하며 일해야 하는 디자이너나 기획자에게 무척 편리하다. 물론, 직관적인 방식은 누구에게나 접근성이 좋기 때문에 개발자에게도 편하다.

구성요소 중 하나를 클릭하면 어떤 요소인지 알려준다. 직접 수정할 수도 있다. 위치와 사이즈도 변경할 수 있으며, 회전시켜볼 수도 있다. 당연히 색상도 바꿔볼 수 있고, 정렬도 수정해볼 수 있다. 기타 등등 웹디자인에 필요한 대부분 요소를 확인하고 고쳐볼 수 있다. 이렇게 고쳐본 결과물은 이미지 파일로 받을 수도 있다. 당연히 사용자가 지금 보는 화면의 요소만 고쳐본 것일 뿐, 실제 서버에 적용되는 것은 아니기 때문에 걱정할 필요는 없다.


...




...




반응형
반응형

[javascript] Vue.js 응용 프로그램 디버깅을위한 Chrome devtools 확장 프로그램.


GitHub :  https://github.com/vuejs/vue-devtools



크롬브라우저에서 확장프로그램 들어간 다음 "vue.js" 로 검색하면 나옴. 설치!



vue-devtools

Important Usage Notes

  1. If the page uses a production/minified build of Vue.js, devtools inspection is disabled by default so the Vue pane won't show up.

  2. To make it work for pages opened via file:// protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.

demo

Works with vuex for time-travel debugging:

demo

Installation

Manual Installation

Make sure you are using Node 6+ and NPM 3+

  1. Clone this repo
  2. npm install (Or yarn install if you are using yarn as the package manager)
  3. npm run build
  4. Open Chrome extension page
  5. Check "developer mode"
  6. Click "load unpacked extension", and choose shells/chrome.

Hacking

  1. Clone this repo
  2. npm install
  3. npm run dev
  4. A plain shell with a test app will be available at localhost:8080.

Testing as Firefox addon

  1. Install web-ext

    $ npm install --global web-ext
    

    Or, for Yarn:

    $ yarn global add web-ext
    

    Also, make sure PATH is set up. Something like this in ~/.bash_profile:

    $ PATH=$PATH:$(yarn global bin)
    
  2. Build and run in Firefox

    $ npm run build
    $ npm run run:firefox
    

    When using Yarn, just replace npm with yarn.

...

반응형
반응형

부가서비스, 확장프로그램

 

Chrome to Phone  : https://chrome.google.com/webstore/detail/google-chrome-to-phone-ex/oadboiipflhobonjjffjbfekfjcgkhco?hl=ko

 

설명

Google Chrome to Phone 확장 프로그램을 사용하면 링크 및 기타 정보를 크롬에서 개인 Android 기기로 전송할 수 있습니다.

이 확장 프로그램을 설치하면 링크, 지도, 현재 선택한 텍스트와 전화번호를 내 Android 기기로 손쉽게 전송할 수 있는 버튼이 Google 크롬에 추가됩니다. 링크나 웹페이지
의 선택 영역을 마우스 오른쪽 버튼으로 클릭하여 내 Android 기기로 보낼 수도 있습>니다.

이 기능을 사용하려면 휴대전화에도 'Chrome to Phone' Android 애플리케이션을 설치>해야 합니다. 애플리케이션은 마켓에서 다운로드할 수 있으며('Chrome to Phone' 검색
), Android 2.2('Froyo') 이상이 탑재된 휴대전화에서 사용하실 수 있습니다.

참고: 이 확장 프로그램을 설치하면 다음 약관에 동의하는 것으로 간주됩니다. - http://chrome.google.com/extensions/intl/en/gallery_tos.html 해당 제품의 소스 코드는
 개발자 웹사이트에서 Apache 2.0 라이센스를 부여받아 사용하실 수 있습니다.

 

Chrome 웹 스토어 : https://chrome.google.com/webstore/category/apps?hl=ko

 

responsive 도구 :  Dimensions

Json 데이터 검증 : JSON Formatter

                     Javascript Tools

소스 공유 :           GitHub

 

 

 

Dimensions

 

설명

Easily test responsive websites, even offline.

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.

Features:

* Draggable handle to find breakpoints
* Works with local or remote servers
* Preview Mode shows your site in various types of devices
* Works with JS auto-refreshers including LiveReload

More devices will be coming soon! Head over to http://dimensionsapp.com and add feedback on which devices you would like to see.

Responsive web design testing tool

 

012

 

 

 

 

 

 

 

반응형

+ Recent posts