Да поговорим за код - . Моите скъпи читатели ме помолиха да ви разкажа за експанзията, като помощник за разширението. Цим ми веднага и да се заемем.
Осъществено от начинанието VSC: https://code.visualstudio.com/ Нашият VSC ще бъде еднорог, стрелящ с лазер с пет рога - тъй като имаме най-безопасните разширения, като например аз съм хрупкав днес. И ако не спечелите прекрасния редактор на VSC, под снимката можете да го изпратите на официалния сайт, за да можете да го получите.
Материална тема

Материална тема

Най-добрата тема за Visual Studio Code:
https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

автоматичен импорт

Автоматично познавайте, анализирайте и добавяйте методи и имена за всички налични файлове. Поддържам Typescript и TSX.
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

вносни разходи

Разширението трябва да се показва в списъка на редактора на импортирания пакет на един ред със съответния метод. Webpack разширение с babili-webpack-plugin, за да покаже какво се импортира и да го оцени в света.
https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

Отстъп-дъга

Просто разширете, за да направите стъпките по-четливи. https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

IntelliSense за CSS имена на класове в HTML

Разширяване на VSCode за автоматично добавяне на име на CSS клас към атрибут на HTML клас въз основа на стойности, които знаете работна зонаили стари файловеза това се използва елементът link.
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

SVG Viewer

Лесен начин за преразглеждане на SVG.
https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

По-красив - Формататор на код

Не мога да живея без новия пакет  -  VSCode за JavaScript/TypeScript/CSS форматиране от Prettier wiki.
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

React Native Tools

Съвети, подобрения и команди за React Native.
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Sublime Text Keymap и импортиране на настройки

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings Това разширение позволява бързи клавиши за Sublime Text 3 във VSCode. P-Windows
На тази конзола можете бързо да отидете на файлове, както и да добавите символ > пред ред с удар, можете да щракнете върху него, така че е като да си спомните в терминала, да инсталирате разширение и т.н. Също така е удобно нещо за тихи хора, които звучат до ST3. ?

npm Intellisense

VSCode плъгин, който автоматично допълва имената на npm модули в операциите по импортиране.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

lit-html

Добавете намек към синтаксиса и намек HTML маркировкипо средата редове в JavaScriptтози TypeScript, тъй като е победител в lit-html и други рамки.
https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

highlight-matching-tag

Разширението се използва за podsvіchuvannya vіdkryvayut или близки тагове - функционалност, vіdsutnої в VSCode, но виновен е buti е въведен в редактора извън кутията.
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

GitLens - Git със свръхзареждане

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens Разширението се преработва, за да даде възможност на Visual Studio Code да работи с Git. В същото време той дава информация за авторството на промените в Git, а също така улеснява навигацията в хранилищата и ви позволява да видите историята на промените във файлове или файлове, да потвърдите команди за коригиране на кода и др.

Мениджър на проекти в Git

Git Project Manager (GPM) е разширение на Microsoft VSCode, което ви позволява да отваряте нови прозорци въз основа на git хранилище директно от VSCode.
https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

История на Git

Преразглеждане на git регистрационни файлове и промяна на историята на файловете и пренаписване на файлове или комитации.
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Файлови помощни програми

Ръчен начин за създаване, дублиране, преместване, преименуване и споделяне на файлове и директории.
https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

Оцветител за двойки скоби

Разширение, което е конфигурирано, за rozfarbovuvannya човек лъкове. Превъзходно е корис, когато е роботизиран с голям брой въртеливи виклики.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

цветен акцент

CSS разширения / уеб цветове, намерени в документа.
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

CSS Peek

Преход към CSS права на идентификатори (id) и класове без посредник HTML файлове. Поддържа превключване между файлове и бърз преход от един към друг.
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Програма за отстраняване на грешки за Chrome

Инструмент за настройка на JavaScript код или друг код в браузъра Chrome.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Quokka.js

Изтриване на JavaScript кода на конзолата успоредно, докато пишете. (Корисно за шведски демонстрации).
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Крайни интервали

Митево видя, че видя края на поляните.
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces#user-content-installation

TypeScript Hero

https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero Това разширение ще бъде от полза за всеки, който пише в TypeScript и иска да организира VSC чрез импортиране за нов.

WakaTime

Показатели, прозрения и прозрения, които се генерират автоматично въз основа на статистиката на вашето програмиране.
https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

Vetur

Vue подстригване за VSCode
https://marketplace.visualstudio.com/items?itemName=octref.vetur

кодов бегач

Изпълнете фрагмент от код или файл с mov.
Благодаря на тези, които прочетоха тази статия! Отидете в twitter за помощ, за да разберете за други разширения на VSCode. Знаете ли повече за цветните плъгини, които не са известни тук? Бъдете мили, напишете ги в коментарите❤ https://twitter.com/wesbos/status/907347014823923714 Превод на статията: „✨

За бързо вмъкване на данните за допълнителната библиотека Faker. Можете да вмъквате персонализирани имена, адреси, изображения, телефонни номерапо другия начин. Още по-популярен и по-банален плъгин.

Win ви позволява автоматично да добавяте имена на файлове към света на реда за въвеждане. Възможно е тази функционалност да не е трудна за интегриране с редактора, но засега плъгинът ще помогне.

Плъгинът ви позволява да изтривате отметки в кода, така че е много лесно да работите ръчно с тях.

Плъгин за проверка на правописа в кода.

GitLens внедрява повторно възможностите на Visual Studio Code Git. Помага ви да визуализирате информация за историята на кода в Git, да се движите плавно и да завършите историята на файла или файла, да премахнете стойността на информацията чрез приставката, да преглеждате кода и други.

Плъгини за Back-end търговци на дребно

PowerShell

Позволява ви да работите със скриптове на PowerShell без взаимодействие в интерфейса на визуалния код.

Python

Разширяване на кода на Visual Studio с Python movable (включително Python 3.6), включително разширени функции:

• Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy)
• Intellisense
• Автоматично въвеждане, форматиране на код, рефакторинг
• Изпълнете тази персонализация на тестовете за единици (unittest, pytest, nose)
• Откъси

• Инструменти за разработка и персонализиране. NET ядро.
• Страхотни съвети за редактиране на C#, включително изглед на синтаксис, intellisense, прескачане до местоназначение, търсене на msg и т.н.
• Поддръжка за проекти project.json и csproj за Windows, MacOS и Linux.

Плъгини за търговци на дребно от Front-end

JSHint

JSHint е доста удобен инструмент за статичен анализ на JavaScript код. Revіryaє, chi vіdpovidає писане на код според стандартите за програмиране.

Основният редактор, по който мога да пиша код, превръщайки се в Visual Studio Code (VSCode за кратко). Преди това работих с редактора на Sublime Text, който отново видях два дни след като започнах да използвам VSCode, само защото VSCode е по-богат и по-готин.

В тази статия искам да ви разкажа за най-добрите разширения за редактора VSCode, с които аз самият руутвам и повишавам уважението ви към тях.

VSCode внедрява търсене и инсталира разширение директно от редактора - просто отворете панела с разширения и въведете името на разширението или ключова дума (таг) в разширението за търсене в Marketplace и редакторът незабавно стартира търсенето и ви подканва за налични опции за вашата заявка за търсене.

Зад ключалката, VSCode вече има инсталиран плъгин Emmet и инсталирайте оста като разширение, за да направите работата ви по-удобна, прочетете нататък.

Разширение за Visual Studio Code

Ръководител на проекти - Ръководител на проекти

Тези разширения, като varto, вмъкнете в редактора на VSCode точно пред нас. автор това разширениеАлесандро Фрагняни е търговец на информация, сътрудникът има повече от дузина разширения за VSCode.

Разширението ще ви помогне лесно да получите достъп до вашите проекти, независимо къде смърдят. Можете да изберете автоматично да показвате проекти или да изберете автоматично да показвате проекти в VSCode, Git, Mercurial и SVN хранилища или други папки.

За миг, независимо дали е папка на вашия компютър, можете да създадете проект и с помощта на това разширение можете бързо да превключвате между вашите проекти или да ги отваряте с нов редактор.

Специално добавих своя принос към разширението Project Manager - след като го добавих към многоезичния и добавих руския език, то вече е по-достъпно за руския език.

Отметки

Друго разширение за VSCode Алесандро Франяни.

Разширението ви позволява да работите с отметки върху редовете на файла, за което сигнализира знакът в полетата.

Отметките могат да контролират лентата на Explorer и иконата в лявата лента с менюта, което е безопасно шведски достъпкъм отметки. Їx можете да добавите необрязано количество.

За по-голяма яснота, за да улесня навигацията в отметките, често отбелязвам коментари. По-долу на екранната снимка на дупето - отметката е на реда с коментар на Бутона, а изследователят на отметки е маркиран с Бутоните. Мисля, че е ясно:

Така че, точно както за Project Manager, добавих моя принос към разпространението на първото разширение - като добавих мултифилми и добавих към новия руски език.

Разширението добавя възможност за бързо показване на HTML файлове в браузъра.

С тези разширения не е нужно да се занимавате дълго време, за да отворите файла в браузъра.

Ако файлът е прегледан от редактора и презареден в активната станция, достатъчно е да натиснете клавишната комбинация Alt + B и файлът се показва в стандартен браузър.

Как да натиснете клавиша Shift + Alt + B - след това in командна линияредактор, ще се появи списък с браузъри, където можете да изберете в кой конкретен браузър трябва да отворите файла.

Не е нужно да запомняте повече комбинации от клавиши - достатъчно е да щракнете с десния бутон на мишката и в контекстното меню є в контекстното меню, да отворите файла в стандартен браузър или да изберете браузъра от списъка. Преди това можете да отваряте активни файлове (отворени в редактора) и файловете от панела на Explorer.

Path Intellisense

Path Intellisense- Този плъгин за Visual Studio Code, който автоматично попълва имена на файлове.

Подобно на разширението за автоматично довършване на пътя.

Vikonu същата функционалност като i Path Intellisense, добавяне на пътища към имената на тези файлове.

В този час съм сляп Path Intellisense, но uvіmkneno . Тествам yak z tsikh dvh razshiren svidshe reactuє i podkazuє іntelessens. Докато имам нужда от повече щети, аз съм по-добре.

размер на файла

Това разширение показва лентата на състоянието на редактора, разширяваща активния файл.

Погледнах параметрите на VSCode, за да покажа размера на файла, но не знам. След това се дава малка помощна програма за решаване на проблема и показване на лентата на състоянието на редактора информация за разширението на файла.

htmltagwrap

Целта на разширяване на обвиването на видяния фрагмент с HTML тагове.

Това е просто - можете да видите фрагмент или ред от тази команда, като използвате клавишите Alt + W

Ако се обадите и запомните командата, тогава е готино.

Активна лента за състоянието на файла

Покажете пътя до файла в лентата на състоянието на редактора. При натискане - копира пътя към файла в клипборда.

Оцветител за двойки скоби

Този плъгин ви позволява да зададете цвета на кожата на двойката на ръцете, което ви позволява визуално да контролирате въвеждането или правилата на ума в кода. Упражнявайте се за кръгли (), къдрави () и квадратни ръце.

Преди инсталирането на този плъгин имах проблеми със затворени арки, сега търся цвета на лъкове.

Икони за файлове и папки

VSCode по-прости икони с Angular

Цялата колекция от икони за файлове. Разглеждах много иконите и след това разгледах избора си, т.к тук са стилизирани папки само за node_modules и bower. В други селекции от различни папки (например: изображения, js, css и т.н.) можете да създадете свои собствени странични икони, но ако е важно, важно е бързо да отворите папката към файла, но тук всичко е просто - в папката дърво този файл, аз съм ясно отворена папкаи е затворен.

На Marketplace има много подобни комплекти, така че можете да се удивите на себе си и да изберете подходящи стилове на икони за вас. Можете да поставите много колекции. Лесно е да сменяте иконите - персонализирането на променящите се икони може да се намери в менюто на зъбното колело в долната част на лентата с инструменти:

Изберете артикул Тема за икона на файли в командния ред на редактора се вмъкват тези икони на файлове. Трите изгледа на VSCode по подразбиране и тези, които добавяте. В списъка просто използвайте стрелките нагоре и надолу, за да ги обърнете и иконите веднага ще замръзнат и ще се покажат в изследователя на файловете. Така че бързо изберете темата, която искате.

Повтарям, темата беше достойна за мен VSCode по-прости икони с Angular

Стартиране локален сървърразширения с функция за активно повторно ангажиране на статични и динамични страни.

За лентата на състоянието на редактора е добавен бутонът за стартиране. След като кликнете върху него - отворете файла в браузъра и следвайте промените във файловете. Когато променя файловете, той автоматично ще презареди страничната част на браузъра.

Особено искам да работя с Browsersync чрез Gulp, който е по-функционален и създава по-малко стрес, но ако Gulp не е инсталиран в кожата, тогава има робот за разширението Live Server.

Разширение за профилиране за VSCode

И сега ще разпространя списъка с разширения за VSCode за конкретни посоки.

Робот с Git и Github

Освен това VSCode за заключване работи с Git, на Marketplace има дори богато разширение за всеки вкус за работа с Git и Github. Трябва да стоя така:

История на Git, GitLens, Git Merger, GitHub Pull Requests

RemoteFS

Това разширение ви позволява да се свържете със сървъра чрез FTP и SFTP протоколи.

Всичко необходимо за отваряне на сайт или проект, който е на сървъра - във файла settings.json

"remotefs.remote": ( "първи сайт": ( "схема": "ftp", "хост": "Хост", "порт": 21, "потребителско име": "FTP вход", "парола": "Парола ", "rootPath": "/", "connectTimeout": 10000 ), "друг сайт": ( "схема": "ftp", "host": "Хост", "порт": 21, "потребителско име": " koristuvach FTP", "password": "Password", "rootPath": "/", "connectTimeout": 10000 ) )

Данните за свързване могат да бъдат взети към вашия хостинг от дистрибутор Користувачи FTP. Специално показах оформлението на връзката за два сайта - за такава схема можете да свържете няколко сайта за различни протоколи (FTP или SFTP).

Код на Visual Studio- tse bezshtovny кросплатформена текстов редактор, дезагрегация Microsoft. Вин Швидко се влюбва в сърцето на чудото на производителността и величествения брой функции, като vіn proponuє.

Така че, точно като по-голям IDE, VSCode може да разшири собствен магазин, който може да покрие хиляди плъгини от различни видове. За да ви помогнем да изберете такива, като varto zavantazhity, ние разработихме колекция от разширения, за които знаем, че са най-добрите и най-добрите.

VSCode не разпространява интеграционния интерфейс за отваряне на файлове директно в браузъра. Добавете елемента на контекстното меню „Отваряне в браузъра“ контекстно меню, както и команди за показване на избрания клиент (Firefox, Chrome, IE).

Quokka е инструмент за производителност, който ви дава директно извикване на кода, който пишете. Вин шоу предварителна ревизиярезултатите от функциите и изчисляването на стойностите за промените. Разширенията са лесни за внедряване и работа от кутията с JSX или TypeScript проекти.

Бързо поставете данните по-долу за помощ от популярната библиотека на JavaScript Faker. Можете да създавате персонализирани имена, адреси, изображения, телефонни номера или само параграфи от класическия Lorem Ipsum. Категорията кожа може да варира в подкатегории, така че можете да намерите данните, подходящи за вашите нужди.

За да разширите, можете да дефинирате CSS класове и идентификатори в таблици със стилове. Когато натиснете десен бутонщракнете върху селектора във вашите HTML файлове, изберете опцията "Go to target" и целта "Peek" ви даде CSS кода, който сте създали.

Разширяването на HTML шаблона ви позволява ръчно да пишете етикетите head и body на нов HTML документ. Просто въведете html в празен файл, натиснете клавиша Tab и ще бъде създадена чиста структура на документа.

По-хубавае най-популярният формататор на код сред търговците на дребно в мрежата. Позволявате на вашия команден код да изглежда независимо от този, който го е написал. Ce разширението ви позволява автоматично да zastosovuvat По-хубавакоито бързо форматират всички документи JSі css. Ако и вие искате да използвате ESLint, є По-красива- Еслинт.

Малък плъгин, който ви давам различна информацияотносно цветовете, както сте маркирали с вашия CSS. Насочете мишката си към цвета, ще видите голямата картина с този цвят, както и кодирането във всички формати (hex, rgb, hsl и cmyk).

Този инструмент разпознава всички коментари ДА НАПРАВЯвашия код, който ще ви помогне да изчистите всеки недовършен фрагмент преди него, как да преминете към производство. За заключване на вина потърсете ключови думи ДА НАПРАВЯі ПОПРАВИ МЕ, но можете също да добавите своя virazi.

Няколко фрагмента за добавяне на шрифтове за икони към вашия проект (от CDN) и след това добавяне на самите икони. Разширението поддържа над 20 най-популярни набора от икони, включително шрифтове Страхотно, йоникони, Глификониі Икони за материален дизайн.

Разширение за минимизиране на кода. Vіn предлага множество подобрения и възможност за автоматично минимизиране, докато запазвате и експортирате във файл.min. Minify работи с JavaScript, CSS и HTML чрез uglify-js, clean-css и html-minifier е добре.

VSCodeима възможност за преработка на текста. От кутия вина могат да работят само малки, а големи трансформации. Този плъгин добавя много повече команди за промяна на редове, включително camelCase, kebab-case, snake_case, CONST_CASE и други.

Основен инструмент за тестване на обикновени вируси. Vіn pratsyuє, zastosovuyuchi шаблон регулярен изразнад бе-яким текстов файл, v_dkritim в редактора, виждайки всички zbіgi. Ниби RegExrточно в средата на вашия редактор!

Code Time - това е плъгин от изходния код, който дава метрики директно в редактора на кода.

След като разширението бъде инсталирано, то ще бъде подканено да се премести нагоре до панела keruvane. Като в средата на редактора ще поставите кода команда+Shift+P Vіdkryєtsya vіkno, в който можете да влезете Кодово времеи след това изберете между опции за редактора на кода или браузъра.

В средата на браузъра информацията изглежда така:

Вътре в браузъра е по-ясно:

Code Time е правилно, така че трябва да знаете точно какво е просто едно щракване, колко време отделяте за писане на кода.

One Dark Pro

One Dark Pro е една от най-популярните теми, които често се побеждават за Visual Studio Code.

В това приложение е ясно, че можем да имаме икони за директории, като клиент и сървър, както и за файлове, като .eslintrc .gitignoreі package.json.

One Dark Proподдържа се в React, Angular, Redux и impersonal различни рамки и библиотеки, да се надяваме различни иконикаталози за компоненти, помощни програми, стилове, както и за редуктори (Reducers), действия (Actions) и магазини (Store).

Оцветител за двойки скоби

Разширението Ce ви позволява да зададете лъковете с юргани. Това е удобно, ако имате дълбоко вложение на обекти или функции, както е показано тук:

цветен акцент

Color Highlight показва визуално представяне на всеки цветен код. Например, ако въведете RGB, RGBa, шестнадесети или дали има друг цветен код, можете да промените цвета, като в дупето си:

Path Intellisense

Path Intellisense е плъгин, който автоматично допълва имената на файлове.

Това е добре за импортиране на компоненти от React, но не е необходимо ръчно да въвеждате пътя до файла, който търсите.

ES7 React/Redux/GraphQL/React-Native фрагменти

Следва - ES7 React/Redux/GraphQL/React-Native Fragments. Накратко, но за да ви спести много време, особено когато владеете йога в React.

Това разширява фрагментите на JavaScript и React/Redux ES7 с функционалност от плъгина Babel за VS Code.

Точно в редактора кодът може да бъде натиснат команда+Shift+P, и тогава Търсене на фрагменти в ES7, ще намерите дълъг списък с кратки команди, които можете да изпълните, за да видите дадените кодови фрагменти.

С помощта на това разширение можете лесно да знаете командата, например за фрагмент от функционален компонент. Изпълнявате команди, като пишете в редактора и пишете. Всичко е просто!

GitLens - Git със свръхзареждане

GitLens разширява силата на Git, достъпна от Visual Studio Code. Помага на пръв поглед да присвоите автора на кода за допълнителни анотации на Git-blame и обектив на кода, за лесно навигиране през и до хранилищата на Git, за отнемане на разходите за информация с помощта на команди и др. Като натиснеш ред от кода, пееш кой си редактирал, ако си го редактирал в някаква комисия.

Доставчик