Visual editor что это за программа

За свою долгую историю существования Microsoft выпустил немало инструментов разработки. Но так уж сложилось что на слуху у всех только лишь Visual Studio – большая и мощная IDE «комбайн» предназначенная для всего и вся. Развивается этот продукт уже более двух десятков лет и вобрал в себя самые разные функции.

Многим этот инструментарий нравится и иногда даже задавали вопрос – будет ли перенесен Visual Studio на другие платформы. На что чаще всего получали ответ нет. Наверное, понятно почему, в целом такое портирование будет дорогим и неоправданно сложным, уж очень много всего в этой IDE завязано на Windows.

И вот, этой весной для многих неожиданностью было то что Microsoft представил новый продукт под названием Visual Studio Code, да еще и работающий сразу на трех платформах, Linux, OS X и Windows. Не замахиваясь на все функции полноценной IDE, внутри Microsoft решили переосмыслить подход, по которому строится основной инструментарий программиста и начали с самого главного – редактора кода. Visual Studio Code это именно редактор, но при этом обладающий функциями IDE, полагающийся на расширения.

Column Width Trick in Power BI #Shorts

Уже сейчас вы можете использовать Visual Studio Code для создания веб-проектов ASP.NET 5 или Node.js (в чем-то даже удобнее чем в «взрослой» Visual Studio), использовать различные языки, такие как JavaScript, TypeScript, C#, работать с пакетными менеджерами npm, скаффолдингом yeoman и даже осуществлять отладку. Плюсом ко всему будет отличный «интеллисенс», поддержка сниппетов кода, рефакторинг, навигация, многооконность, поддержка git и многое другое.

Установка Visual Studio Code

Mac OS X

1. Загрузите Visual Studio Code для Mac OS X
2. Откройте двойным щелчком архив VSCode-osx.zip
3. Перетащите Visual Studio Code.app в папку Applications
4. Добавьте Visual Studio Code в Dock выбрав в Options “Keep in Dock”

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте в ~/.bash_profile

code ()

Linux

1. Загрузите Visual Studio Code для Linux
2. Создайте новую папку и распакуйте туда содержимое архива VSCode-linux-x64.zip
3. Двойным щелчком запустите Code

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте на него ссылку

sudo ln -s /path/to/vscode/Code /usr/local/bin/code

Windows

1. Загрузите Visual Studio Code для Windows
2. Щелкните двойным щелчком по загруженному файлу VSCodeSetup.exe для того чтобы запустить установку

Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала сделайте logon/logoff, соответствующие пути к файлу прописываются в переменной PATH самим установщиком

Дополнительные инструменты

Без инструментария Visual Studio Code годится разве что для простого редактирования файлов, для полноценной работы понадобится сопутствующий инструментарий, который зависит от ваших целей и задач:

🆚 Rider или Visual Studio — что выбрать? [C#] [Сравнение] — Для Unity и не только

• ASP.NET 5 — гибкий фреймворк создания современных веб-приложений
• NodeJS (включает NPM) – платформа для создания масштабируемых сетевых приложений
• git – система контроля версий
• Yeoman – инструмент «скаффолдинга» примерно тоже самое что и File | New Project в VS
• generator-aspnet — yeoman генератор для ASP.NET 5 приложений, выполните npm install -g generator-aspnet для установки
• hottowel — yeoman генератор для быстрого создания AngularJS приложений, выполните npm install -g generator-hottowel для установки
• Express – фреймворк для Node приложений, использует «движок» шаблонов Jade
• gulp – инструментарий создания «тасков» для выполнения сопутствующих сборке проекта задач
• mocha – фреймворк создания модульных тестов на JavaScript/Node
• bower – клиентский пакетный менеджер
• TypeScript – язык TypeScript, добавляет модульность, классы и прочие приятные вещи в ваш JavaScript код
• TypeScript definition manager – определения TypeScript для популярных JavaScript библиотек, включают поддержку IntelliSense вVS Code

Начало работы

Чтобы попробовать в деле VS Code, проще всего создать веб-проект Node. Для этого установите Node на свой компьютер (ссылка выше) и выполните следующие команды:

npm install -g express npm install -g express-generator express myExpressApp cd myExpressApp npm install

В текущем каталоге будет создан проект, который можно будет открыть в Visual Studio Code. Для того чтобы проверить, что все работает как надо, выполните команду npm start и запустите браузер по адресу http://localhost:3000.
После всех этих действий просто запустите VS Code в папке с проектом

Code .

Если вы хотите попробовать возможности VS Code на примере ASP.NET 5 то можете воспользоваться инструкцией по адресу https://code.visualstudio.com/Docs/ASPnet5.

Базовые возможности Visual Studio Code

Как и многие редакторы кода, VS Code использует распространенную схему расположения основных элементов – слева обозреватель файлов, справа редактор кода. В дополнение к этому есть специфичные элементы, обеспечивающие навигацию и выполнение специальных команд.

Файлы, папки, и проекты

VS Code работает с файлами и папками в которых находятся проекты. В простейшем случае вы можете открыть файл на редактирование просто выполнив команду ./code index.html. Более интересным случаем является открытие папки. VS Code сам определяет тип проекта в зависимости от содержимого папки. Например, если в папке находятся файлы package.json, project.json, tsconfig.json или файлы .sln и .proj для Visual Studio ASP.NET 5.0 то VS Code включает много новых функций которые обеспечивают IntelliSence, подсказки, навигацию по коду, выполнение команд и многое другое.

Расположение основных элементов

VS Code обладает интуитивно понятной и простой схемой расположения основных элементов. Интерфейс разделен на четыре основных блока, это:

1. Редактор, основной блок в котором осуществляется изменение содержимого открытого файла
2. Сайдбар, с помощью которого можно увидеть различные представления файлов проекта
3. Статусбар, показывающий текущий статус различных операций
4. Вьюбар, позволяющий переключаться между режимами сайдбара и индицирующий с помощью иконок различную информацию, например количество исходящих git изменений

Редактор VS Code может открыть для редактирования на экране до трех файлов одновременно, располагая их друг за другом справа. Открыть дополнительные редакторы можно различными способами:
Ctrl (Mac: Cmd) и кликнуть на файле в обозревателе
Ctrl+ для того чтобы разделить активный текущий редактор на два
Open to the Side в контекстном меню файла в обозревателе

Совет: Вы можете переместить сайдбар слева на право с помощью меню View, Move Sidebar а так же включить его видимость с помощью клавиатуры (Ctrl+B).

Палитра команд

Самым главным инструментом взаимодействия с редактором в VS Code является палитра команд. Вызвать ее можно через клавиатуру, нажав на комбинацию Ctrl+Shift+P. Множество команд перечисленных в палитре тоже привязаны к клавишам.

Введите в строку команды знак вопроса? и тогда вы получите перечень команд которые работают в текущем контексте:

Некоторые часто используемые команды:

• Ctrl+P навигация к файлу или символу по набранной строке
• Ctrl+Tab циклично открывает последние отредактированные файлы
• Ctrl+Shift+P выводит список команд редактора
• Ctrl+Shift+O навигация к некоторому символу в файле
• Ctrl+G навигация к строке в файле
• Ctrl+Tab выводит список всех файлов которые были открыты от момента запуска VS Code, удерживайте Ctrl и нажимайте Tab до тех пор пока не выберите нужный файл
• Alt+Left и Alt+Right навигация по ранее редактированным файлам и строкам назад и вперед

Обозреватель

Обозреватель предназначен для открытия и управления файлами находящимися в папке вашего проекта. Вы можете осуществлять множество привычных операций по созданию, изменению имени, удалению файлов и папок, и их перемещению.

Файлы, которые вы редактировали или открывали двойным щелчком в обозревателе, помещаются в верхнюю часть обозревателя и получают статус Working files:

Автосохранение

По умолчанию, VS Code работает в режиме явного сохранения, которое вы можете выполнить, нажав на комбинацию Ctrl+S. Этот режим совместим с большинством инструментов следящих за статусом файлов (например bower). Можно включить и режим автоматического сохранения (Auto Save), нажав Ctrl+Shift+P и набрать auto.

Поиск

Нажимите Ctrl+Shift+F и введите интересующую вас фразу. Результаты поиска будут сгруппированы, в дополнение вы можете развернуть узел группы чтобы посмотреть множественные вхождения. В строке поиска поддерживаются регулярные выражения.

Более детальный поиск может быть осуществлен с помощью команды Ctrl+Shift+J. Введите в дополнительные поля критерии поиска.

Возможности редактора

Подсказки IntelliSence

Где бы вы не находились в вашем коде, нажав на Ctrl+Space будет выведено окно подсказки IntelliSence. При наборе кода редактор будет показывать его автоматически.

Подсказки параметров

Для перегруженных функций вы можете листать варианты реализации используя клавиши Up и Down.

Сниппеты кода

VS Code поддерживает аббревиатуры Emmet. Вы можете использовать их при редактировании файлов HTML, Razor, CSS, Less, Sass, XML или Jade. Основной перечень аббревиатур можно посмотреть по адресу http://docs.emmet.io/cheat-sheet/.

Переход к определению символа

Нажав на F12 вы перейдете к определению символа. Если нажать Ctrl и провести курсором по символу вы увидите определение в дополнительном окне.

Переход к методу или переменной

Нажав на Ctrl+Shift+O вы откроете перечень методов в файле, в дополнение вы можете нажать двоеточие: и методы будут сгруппированы по типу. Нажав на Up и Down выберите нужный метод и курсор в редакторе перейдет на строку где находится выбранный метод.

Для языков C# и TypeScript вы можете использовать комбинацию Ctrl+T и набрать нужный метод или переменную, при этом будет осуществлен поиск по всем файлам в проекте.

Просмотр определения символа

Если вам необходимо быстро посмотреть на определение символа или на референсы, для того чтобы вспомнить детали реализации или использования, можно использовать поиск или переход к определению символов, что не всегда удобно так как переключает контекст.
В этом случае можно воспользоваться командами Reference Search (Shift+F12) или Peek Definition (Alt+F12) и результаты поиска будут отображаться в инлайн окошке:

Переименование методов и переменных

Нажав F2 вы можете изменить имя метода или переменной. Стандартная операция рефакторинга, но пока она поддерживается только для языков C# и TypeScript.

Отладка

В VS Code входит отладчик. Его возможности пока ограничены, и работают не на всех платформах. Тем не менее, вы можете использовать отладчик для языков JavaScript и TypeScript на всех платформах, а для C# и F# на платформах OS X и Linux.

Для того чтобы запустить отладку проекта Node, достаточно нажать на иконку бага в Activity Bar. После генерации файла launch.json запустится отладчик. Для проектов Node VS Code автоматически определяет каталог ./bin/www.

Сохраните конфигурационный файл и выберите пункт Launch в меню, установите точку останова и нажмите F5 для старта отладки.

Отладчик позволяет просматривать значения текущих переменных:

Более подробно о возможностях отладчика можно почитать по адресу https://code.visualstudio.com/Docs/debugging в том числе о том как сконфигурировать Mono для отладки C# и F# кода на платформах OS X и Linux.

Контроль версий

VS Code интегрирован с системой контроля версий git, и поддерживает большинство команд. В версии 0.5 был зафиксирован ряд ошибок связанных с интеграцией. Поддерживаются локальные и удаленные репозитарии.

Совет: установите credential helper для того чтобы не получать постоянные запросы на ввод данных учетной записи https://help.github.com/articles/caching-your-github-password-in-git/

Конфликты

VS Code позволяет осуществлять слияния и разрешение конфликтов при работе с системой контроля версий:

Полезные ссылки

• Сайт Visual Studio Code http://code.visualstudio.com
• Блог команды разработчиков VS Code http://blogs.msdn.com/b/vscode/
• Твиттер https://twitter.com/code
• Перечень команд, и рекомендации по настройке VS Code https://code.visualstudio.com/Docs/customization
• Блог John Papa с несколькими статьями о VS Code http://www.johnpapa.net/
• Запись доклада о Visual Studio Code с конференции //Build https://channel9.msdn.com/Events/Build/2015/3-680
• Запросы по функциям VS Code на сайте User Voice https://visualstudio.uservoice.com/forums/293070-visual-studio-code

• Блог компании Microsoft
• Программирование
• Visual Studio

Источник: habr.com

Визуальный редактор/Портал/Новые участники

This page is a translated version of the page VisualEditor/Portal and the translation is 100% complete.

Добро пожаловать на портал Визуального редактора (VisualEditor, VE) — нового инструмента для редактирования Википедии, разработанного Фондом Викимедиа (Wikimedia Foundation). Он позволяет людям работать со страницами без изучения довольно сложного языка вики-разметки. Мы надеемся, что это поможет людям внести свой вклад в Википедию.

О Визуальном редакторе

Визуальный редактор является «визуальным» инструментом редактирования Википедии. Редактирование Википедии исторически требовало, чтобы люди изучили язык вики-разметки, довольно сложной, даже чтобы сделать крошечные изменения на странице. В 2001 году, это было приемлемо; в 2015 году это стало отпугивать людей. Мы надеемся, что Визуальный редактор будет полезным для существующих участников и станет более привлекательным для новых участников.

Визуальный редактор доступен как опция в «Альфа» релизе на MediaWiki.org с середины 2012 года и на англоязычной Википедии с декабря 2012 года, в более 14 языках с апреля 2013, и почти всех других языках с начала июня 2013 года. По состоянию на июль 2015 года, он доступен по умолчанию для вошедших и не вошедших в систему пользователей в более 75% Википедий. Мы планируем сделать его доступным по умолчанию в большинстве остальных языковых разделов в конце 2015. С конца ноября 2014 он также доступен как опциональная Бета-функция во всех вики-проектах Фонда Викимедиа, кроме Викисловаря и Викитеки.

Help : VisualEditor

The VisualEditor feature allows users to edit an article quickly and easily. The editing interface will always reflect how the article will look when published.

Unless you have set your preferences to use the source editor, clicking «Edit» on an article will open the VisualEditor. The VisualEditor turns the page itself into the editor area, rather than load in a separate page. Once loaded, the editing toolbar appears at the top of the article space, and the cursor appears at the beginning of the text.

Contents

• 1 Making an edit
• 2 Creating a link
• 3 Adding elements
• 4 Insert
• 5 Article options
• 6 Switching to source editor
• 7 Next steps
• 8 Further help and feedback

Making an edit

Once the editor is open, you can begin writing and modifying the text immediately. The toolbar allows for text modifications like bold, italics, underline, and lists. More formatting options are in the dropdown on the far left, allowing the user to switch between regular paragraphs, headings, blockquotes, or preformatted text. The «T» dropdown has yet more specific formatting options such as strike-through, code blocks, font-size controls, superscript and subscript, etc.

Your browser’s spell check function will be used as you enter text; this is most often shown as red underlining on misspelled words.

It’s strongly recommended that you add notes in the «describe what you changed» field at the bottom of an editor before clicking «Save», as this will help other editors to figure out what you are attempting to do. You can also hit «Show changes» for a wikitext difference of your changes before saving.

Creating a link

The toolbar also has the link tool (the chain link icon) that’s used to link words or phrases to other pages on the same FANDOM site. To create a link, either:

• Click the link button without selecting any text – you can then type in the intended destination in the tool, and this will be used as the link text.
• Insert 2 square brackets [[ , then type in the intended destination in the tool.
• Highlight some text, then click the link button – this will keep the highlighted text, but you can point the link itself at a different destination.

If the destination article already exists on Fandom, you can simply start typing the name of the page and a list of suggestions will appear. When you’re done, simply hit enter or click elsewhere on the screen to dismiss the dialog. Click the linked text to access the dialog again for further changes.

• Using the shortcut CMD+K (Mac)/CTRL+K (Windows) to open the tool.

Hovering over existing links will allow you to edit the display text or modify the link.

Adding elements

Citations, media, and other advanced elements can be added to a page via the editor tools. The «Cite» icon, shaped like a book, allows references to be added to an article, whereas the «Image» icon allows for images and videos to be searched for and added to pages. You can also upload images this way, or via the «mass upload» icon.

Once added, clicking any of these elements will generate an «edit» dialogue box wherein they may be manipulated. Images and videos can be positioned, captions or alt text added, borders around them controlled, and more. Citations can have their contents modified or added to groups.

For more control over the position and formatting of images, see Help:Wikitext#Image formatting.

Insert

The «insert» dropdown allows for the addition of more advanced objects to an article:

• Infobox — Displays a list of Portable Infoboxes, which the user may insert into the article. There is also a link to make a brand new infobox.
• Template — Allows the user to search through the entire template namespace for one to insert into a page.
• Table — Adds a basic table that can be manipulated.
• Comment — Adds a note visible only to other editors.
• Other options:

• Chemical formulae
• Mathematical formulae
• Galleries
• Code blocks
• Signatures
• A reference list for citations.

Article options

The gear icon on the far right of the toolbar has a list of options that open different panes in the options dialogue box. Here, you can manipulate article categories, manipulate the table of contents and redirects, control the interlanguage links, view the templates used on the article, and more.

One of the last few tools available is the find and replace tool, which can be opened from the options dropdown or via the CMD+F (Mac)/CTRL+F (Windows) command. In the very far left of the editor, there is a list icon that contains helpful links to Special:WhatLinksHere, Special:RecentChangesLinked, Special:Upload, and Special:SpecialPages.

Switching to source editor

Linked prominently in the top right corner of the page, above the article, is a dropdown where you can find keyboard shortcuts, read an advanced user guide, and switch to source editor. Source editor allows you to view the underlying wikitext at work in the article.

Next steps

• Learn how to create a new article.

Further help and feedback

• Browse and search other help pages at Help:Contents
• Check Fandom Community Central for sources of further help and support
• Check Contacting Fandom for how to report any errors or unclear steps in this article

Источник: community.fandom.com