vscode-pdf
Display pdf file in VSCode.
| 취약층 의대 보낸 '서울런' 인강…"AI로 맞춤 학습 강화"(종합) (1) | 2024.03.29 |
|---|---|
| 한글 자음, 모음 설명 (0) | 2024.03.15 |
| 프리랜서를 위한 종합소득세 신고 Q&A (0) | 2024.02.05 |
| Meta의 무료 Code Llama AI 프로그래밍 도구로 GPT-4와의 격차 해소 (0) | 2024.01.31 |
| 스티브잡스 아이패드 프레젠테이션 한글자막) Steve Jobs iPad Presentation (0) | 2024.01.04 |
Polacode
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
Polacode - Visual Studio Marketplace
Extension for Visual Studio Code - 📸 Polaroid for your code
marketplace.visualstudio.com
You have spent countless hours finding the perfect JavaScript grammar, matching it with a sleek-looking VS Code theme, trying out all the best programming fonts.
You take three days porting over your theme before starting to use VS Code.
You shell out $200 for italic cursive html attributes.
The code has to look right.
| 미래를 만들어가는 스타트업에 투자하라 (0) | 2023.12.06 |
|---|---|
| GitHub Arctic Code Vault (0) | 2023.12.01 |
| 풀스택 개발자가 되지 말아야 할 3가지 이유 (0) | 2023.11.10 |
| Emoji 이모지 : 나무늘보 🦥, 거북이 🐢 (0) | 2023.11.09 |
| 크롬에서 인쇄 안됨 (0) | 2023.11.07 |
Visual Studio Code is undoubtedly the most popular code editor today. It is lightweight code editor developed by Microsoft for Windows, Linux and macOS. It includes various features such as syntax highlighting, debugging, intelligent code completion, snippets, embedded Git, code refactoring and many more. VS Code provides better performance and stability compared to other code editors in the market.
Microsoft has huge market place for VS Code where developers able to get third party plugins and extensions, availing VS Code more rich and efficient. Today we are discussing top 11 plugins for VS Code which provides invaluable to the speed and quality to your projects.
In this guide, we’ll explore the following extensions.
GitLens supercharges the Git capabilities. GitLens helps you to understand code better. This powerful and feature rich tool helps to quickly look into code changes such as who, why, and when a line or code block was changed. You are able to find code history to gain further insights as to how and why the code evolved. With this tools, you can effortlessly explore the history and evolution of a codebase.
Here are just some of the unique features GitLens provides,
Developers love to open multiple windows of VS Code as they work on more than one projects at the same time. For example, both backend and front end project could be opened in two separate VS Code instances and developers might want move from one project to another. Using this extension developers able to change the color of each project windows, so that it can be quickly identify which project or repo they are working.
image marketplace.visualstudio
TailwindCSS is a utility-first CSS framework that has been gaining huge attention among the web developers. If you love Tailwind CSS then this is a must have extension to have. It is a free extension, published by Tailwind Labs (bradlc). This extension provides autocomplete, syntax highlighting, and linting for Tailwind classes. With this extension, developers don’t need to memorize the exact spelling of all the utility classes or to spend the time typing them out.
Linting highlights errors and potential bugs in both your CSS and your markup. It is the process of checking the source code for Programmatic as well as Stylistic errors.
Intelligent suggestions for class names, as well as CSS functions and directives.
In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace.
As our functions get more complex, it becomes more challenging to keep track of opening and closing brackets such as parentheses and curly braces.
We can use a VS Code extension called Bracket Pair Colorizer to add color to each set of opening and closing brackets, making it easier to identify each set of brackets.
image dev.to
Install Bracket Pair Colorizer latest version from VS code package. After installation if you want customization:
If you are a true React JS developer then this is a must have snippet for you, because it simply does just right for you. This plugin provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
image geeksforgeeks
Here you can see couple of popular PrefixMethod example for React developers, and the full list can be seen from official Github page.
To make a new class component, simply run:
rcc→
rce→
rfce
To make a functional component, simply run:
import React from 'react';
function $1() {
return <div>$0</div>;
}
export default $1;Launch Quick Open:
Paste the following command and press Enter:
ext install dsznajder.es7-react-js-snippets
Developers have different opinions on how to format the code structure so it would be readable. Prettier was created as a means of alleviating this challenge and ensures one unified code format within the development team.
Prettier reformats your JavaScript code consistently so that it make easy to read and understand the code. This plugin helps to format spacing, variable declarations, semi-colons, trailing commas and much more.
You can configure Prettier to format your files when saving them or committing them to a version control system (e.g. Git, SVN). This way, you do not have to worry about your source code formatting and Prettier takes care about it.
Install through VS Code extensions. Search for Prettier - Code formatter
Visual Studio Code Market Place: Prettier – Code formatter
You can also installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
ext install esbenp.prettier-vscode
Most of the tags in HTML/XML need a corresponding closing tag. When writing large applications which consists of thousands and sometime millions of lines of code, the corresponding closing tags might located at very bottom of the editor, where developers has to scroll hundreds and thousand of lines below. It is tedious if you want to rename the tags.
Auto Rename Tag provides us with a feature that when we change the starting tag it will automatically rename paired HTML/XML tag, same as Visual Studio IDE does, making the renaming of tags easier.
You can simply install the plugin using VS code Extensions. After installation, Add entry into auto-rename-tag.activationOnLanguage to set the languages that the extension will be activated. By default, it is [“*”] and will be activated for all languages.
{
"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]
}Another great contribution by Microsoft. Live Share enables you to collaboratively edit and debug code with other developers in real time. Using this tools, pair programming has become more convenient, where developers can instantly and securely share the project with other developers.
Common features it includes, debugging sessions, terminal instances, localhost web apps, voice calls, and more!
It shares all of their editor context meaning, other developers do not worry about cloning any repos or SDKs installation for code review and debugging process.
Having descriptive icons help you differentiate between files and folders in the project. Having icons in your project make more interesting and attractive. Below diagram depict different between two VS Code tabs with One having icons, the other does not.
To install the extension just execute the following command in the Command Palette of Visual Studio Code:
ext install vscode-icons
Once installed and after reloading vscode, you will be presented with a message to Activate the icons.
In case this doesn’t happen, navigate to:
This plugin lets you to highlight TODO, FIXME and other annotations within your code. This is really a useful plugin for highlighting comments such as NOTE: , TODO: , DEBUG:. The customization settings are also quite extensive making it perfect for the developer, thus leading level up your comments on any project.
Tabnine is the AI code completion assistant already trusted by millions of developers to amplify coding accuracy and boost productivity. Whether you are a new dev or a seasoned pro, working solo or part of a team, Tabnine AI assistant will suggest team-tailored code completions in most popular coding languages and all your favorite IDEs.
Tabnine is powered by sophisticated machine learning models. It is trained on more than a billion lines of open-source code from GitHub.
Tabnine suggests and predicts code as you write. This powerful extension speed up your development, save you tons of time and cutting your coding time in half. Currently it support almost all the popular programming languages including Python, Javascript, Java and React.
Tabnine’s Team Learning Algorithm studies your team’s code, preferences, and patterns, continuously learning and adapting. Every interaction with a team member amplifies code completion accuracy.
In this article, we reviewed 11 VS Code extensions that can help to make you a better programmer and boost your productivity. There are many more other cool extensions that we need to explore in future, so If we have time then will definitely look into those extensions in the coming articles.
| Emoji 이모지 : 나무늘보 🦥, 거북이 🐢 (0) | 2023.11.09 |
|---|---|
| 크롬에서 인쇄 안됨 (0) | 2023.11.07 |
| [VSCODE] sticky scroll - editor.stickySrcoll.enabled (0) | 2023.10.25 |
| Lust - https://www.rust-lang.org/ (0) | 2023.10.25 |
| 9월 15일, '개정 개인정보 보호법' 시행 소식 (0) | 2023.10.24 |
Editor > Sticky Scroll : Enabled 편집기 위쪽에서 스크롤 하는 동안 중첩된 현재 범위를 표시합니다.
| 크롬에서 인쇄 안됨 (0) | 2023.11.07 |
|---|---|
| Top 11 Best VS Code Extensions you Need in 2022! (0) | 2023.11.03 |
| Lust - https://www.rust-lang.org/ (0) | 2023.10.25 |
| 9월 15일, '개정 개인정보 보호법' 시행 소식 (0) | 2023.10.24 |
| 창의성을 부르는 메모 활용법 (0) | 2023.10.24 |
사용 중인 VScode 확장프로그램 공유합니다.
https://marketplace.visualstudio.com/vscode
Classic ASP Syntaxes and Snippets
https://marketplace.visualstudio.com/items?itemName=jtjoo.classic-asp-html
Color Highlight
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
Javascript (ES6) code snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
Korean Language pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko
Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Material Theme
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme
Peacock
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
Prettier - Color formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
saveBackup
https://marketplace.visualstudio.com/items?itemName=purplestone.savebackup
| 머스크 알고리즘 (0) | 2023.10.11 |
|---|---|
| [SUDOKU] 스도쿠 게임 (0) | 2023.09.27 |
| My Visual Studio Code Setup | 2023 (0) | 2023.09.27 |
| Galaxy Tab S9 Series: Official Introduction Film I Samsung (0) | 2023.09.25 |
| 직장 업무 3분의2가 자동화 된다 (0) | 2023.09.22 |
https://medium.com/@piyushyadav0191/my-visual-studio-code-setup-2023-2af8d36a5118
My Visual Studio Code Setup | 2023
Visual Studio Code, also known as VS Code, is a free and open-source code editor developed by Microsoft that has taken the developer world…
medium.com
Visual Studio Code, also known as VS Code, is a free and open-source code editor developed by Microsoft that has taken the developer world by storm. With its sleek interface, extensive customization options, and a vast array of extensions, VS Code has quickly become the go-to choice for developers looking to streamline their workflow and boost productivity. Whether you’re a seasoned developer or just starting out, VS Code is a tool you won’t want to miss.
VS Code settings JSON config includes a variety of configurations to customize your coding experience.
Tip:- You can customize your settings.json file by typing Ctrl + Shift + P, and then typing ‘User Settings’.
{
"workbench.colorTheme": "Vim Deep Dark", // My Theme
"workbench.iconTheme": "material-icon-theme", // My Icon Theme
"editor.fontFamily": "Fira Code", // My Font
"editor.fontSize": 19, // Font size
"editor.minimap.enabled": false, // disabled minimap
"editor.fontLigatures": true, // enabled ligatures
"editor.formatOnPaste": true, // text will format on pasting the code
"editor.formatOnSave": true, // text will format if you hit ctrl + S
"editor.defaultFormatter": "esbenp.prettier-vscode", // formatter
"terminal.integrated.fontFamily": "MesloLGS Nerd Font", // terminal font to use icons
"debug.terminal.clearBeforeReusing": true,// clears your debug terminal before using
"terminal.integrated.fontSize": 19, // terminal font size
}How it looks like in VS code
Well, if you have read my configuration, then you should already know the name of the theme I am using
Demo
Apart from this theme, I like to use Andromeda Mariana — Italic
Second Theme demo
Visual Studio Code (VS Code) is a popular code editor that offers a range of extensions to enhance its functionality. VS Code extensions are add-ons that provide additional features and capabilities to the editor, such as new language support, code snippets, syntax highlighting, debugging tools, and more.
Only for DATABASE USERS :- Adds syntax highlighting, formatting, auto-completion, jump-to-definition and linting for .prisma files.
Language support for MDX
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Material Design Icons for Visual Studio Code
Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
This extension styles css/web colors found in your document.
GitHub Copilot provides autocomplete-style suggestions from an AI pair programmer as you code. You can receive suggestions from GitHub Copilot either by starting to write the code you want to use, or by writing a natural language comment describing what you want the code to do.
“Breaking the Norm: Why I swapped VS Code for Vim and never looked back!”
The File Explorer structure that you are seeing is a Tree View lua plugin which is fabulous, and I am able to code faster than ever using shortcuts.
| [SUDOKU] 스도쿠 게임 (0) | 2023.09.27 |
|---|---|
| 2023-09-27_VScode_확장프로그램_리스트 (0) | 2023.09.27 |
| Galaxy Tab S9 Series: Official Introduction Film I Samsung (0) | 2023.09.25 |
| 직장 업무 3분의2가 자동화 된다 (0) | 2023.09.22 |
| [넥스트이지] 제주에서 2019년도 개발 참여 프로젝트 (0) | 2023.09.19 |