Как выровнять код в vs code

Редактор кода в Visual Studio

До сих пор мы рассказывали о том, как начать работу с системой Visual Studio 2013 и как удобно настроить интегрированную систему разработки. Далее мы научим вас эффективно использовать некоторые встроенные команды, комбинации клавиш, а также вспомогательные инструментальные окна. Это поможет вам писать программы и проектировать формы.

Разработчики проводят значительное время, работая над текстами программ. Следовательно, очень важно уметь правильно скомпоновать код и перемещаться по его тексту. В системе Visual Studio 2013 реализован совершенно новый редактор кода, основанный на платформе визуализации WPF (Windows Presentation Foundation). Он предоставляет разработчикам множество новых возможностей в дополнение к тем, которые были унаследованы от предыдущих версий системы.

Компоновка окна редактора кода

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

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

Когда вы редактируете программу в окне редактора кода, строки кода, которые были модифицированы с момента открытия файла, сопровождаются метками в левом поле — желтыми для несохраненных изменений и зелеными для сохраненных.

Регионы кода

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

Использование частичных классов (т.е. классов, определение которых разбросано по нескольким файлам) позволяет в ходе проектирования записывать код в физически разные файлы, которые в совокупности представляют собой логически единый класс. Преимущество использования отдельных файлов заключается в эффективном группировании всех связанных друг с другом методов, например, методов, реализующих интерфейс. В то же время эта стратегия имеет недостаток: перемещение по коду требует постоянного переключения между его файлами.

Не обязательно разворачивать регион, чтобы увидеть код, который в нем записан. Просто переместите курсор мыши над регионом; и вы увидите код в контекстном окне указателя.

Сворачивание кода

На рисунке ниже показаны четыре сворачиваемых региона. Один из них называется Constructor, а остальные три автоматические структуры кода позволяют свернуть класс, XML-комментарии и метод конструктора (который был сжат). Автоматические структуры можно сворачивать и разворачивать так же, как и регионы, которые определяются вручную.

Форматирование кода

По умолчанию для языков C# и VB.NET включен режим интеллектуального выравнивания, который, помимо прочего, автоматически осуществляет выравнивание при открытии и закрытии вложений. Интеллектуальное выравнивание доступно не для всех языков. В таких ситуациях вместо него используется выравнивание блоков.

Если вы работаете с маленьким экраном, то, возможно, захотите уменьшить шаги табуляции и размеры отступов, чтобы оптимизировать использование экрана. Задавая шаги табуляции и размеры отступов одинаковыми, вы легко сможете выравнивать свой код с помощью клавиши табуляции. Интересно, что это диалоговое окно дает разработчикам, работающим на языке C#, много возможностей для управления компоновкой своего кода. В узле VB Specific есть только один флажок Pretty listing (reformatting) of code, который при включении позволяет поддерживать единообразный внешний вид кода и освобождает пользователя от необходимости заботиться о методах выравнивания, свертках, определениях классов и пространствах имен. С другой стороны, разработчики, работающие на языке C#, могут контролировать практически каждый аспект форматирования кода с помощью дополнительных узлов.

Перемещение вперед и назад по коду

Дополнительные свойства редактора кода

Редактор кода в системе Visual Studio имеет очень много возможностей, которые трудно исчерпывающим образом описать в этой статье. Однако наиболее полезные из них мы приводим ниже.

Подсветка ссылок

Укрупнение кода

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

Сворачивание текста

Номера строк

Разделение окна

Иногда нужно разделить один и тот же файл кода на две части и просматривать одновременно в разных окнах. Можете разделить активное окно редактора на верхнюю и нижнюю части с помощью линии разбивки (splitter bar). Эти окна можно прокручивать независимо друг от друга и отображать в них содержимое одного и того же файла в одно и то же время.

Для того чтобы разделить окно редактора кода, выберите команду Split из меню Window. В качестве альтернативы можно перетащить метку манипулятора (расположенную прямо над панелью вертикальной прокрутки), в позицию, где должна располагаться линия разбивки.

Чтобы настроить размеры каждого окна, достаточно передвинуть линию разбивки вверх или вниз. Удалить линию разбивки просто: дважды щелкните на ней или выберите команду Remove Split из меню Window.

Свободное перемещение окон редактора кода

Создание групп закладок

Если у вас нет нескольких мониторов, то все равно есть возможность открыть одновременно несколько окон редактора кода. Для этого следует создать группы закладок и создать из них мозаику, чтобы отобразить одновременно. Каждая закладка окна редактора кода в этой группе отображается как отдельный элемент мозаики. Таким образом, можно создать несколько групп закладок. Их количество ограничено лишь размерами экрана, на котором они должны размещаться. Элементы мозаики можно размещать как вертикально, так и горизонтально, правда, применить эти два способа одновременно невозможно.

Несколько панелей Solution Explorer

Если вы работаете на нескольких мониторах, то в версиях Visual Studio 2008 и ниже вы могли заметить, что нельзя открыть несколько панелей Solution Explorer. В Visual Studio 2013 этого ограничения не существует. Щелкните на одном из элементов в окне Solution Explorer правой кнопкой мыши и выберите в контекстном меню команду New Solution Explorer view. При выборе этой команды откроется новое окно Solution Explorer, которое будет содержать выбранный элемент. Это очень удобно при работе на нескольких мониторах.

Дополнительные возможности

Для того чтобы достичь действительно высокой производительности труда, полезно знать о многочисленных скрытых возможностях редактора кода, которые позволяют сэкономить массу времени. Рассмотрим некоторые из наиболее полезных команд, которые скрыты в редакторе кода.

«Закомментирование» и «раскомментирование» блока кода

Часто возникает необходимость «закомментировать» блок кода или «раскомментировать» его. При этом не хотелось бы добавлять символы комментариев в начало каждой строки или удалять их оттуда, особенно, если этих строк в блоке много. Разумеется, в языке C# можно свернуть блок кода, разместив его между символами /* и */, чтобы «закомментировать», но такой тип комментариев в языке Visual Basic отсутствует. Кроме того, даже в языке C# возникают проблемы, когда требуется «закомментировать» блок, который уже содержит в себе подобные комментарии.

Выделение блока

Многострочное редактирование

Можно также вставить текст одновременно в несколько строк, создав блок с нулевой шириной и просто начав печатать.

Кольцевой буфер обмена

Полноэкранный режим

Переход к определению

Поиск всех ссылок

Это свойство несколько устарело после появления нового окна Call Hierarchy, которое будет рассмотрено позже. Однако оно по-прежнему позволяет быстро находить используемый метод без перемещения по окну Call Hierarchy.

Как в VS Code сделать отступ 2 символа вместо 4 символов автоматическому выравниванию при сохранении JS файла

Новая система. Дефолтный VS Code. Специально никаких настроек не делал.

Установил отступ в 2 пробела. Также включена замена Tab на 2 пробела.

Подключил Prettier. Пока пишешь код, работает как надо.

Принудительное выравнивание по горячим клавишам тоже работает как надо.

Но при сохранении файла, файл выравнивается с отступами 4 пробела вместо 2.

Я помню эту проблему (не первый раз), что-то где-то менял, но не помню что и где.

Как сделать так, чтобы VS Code при сохранении выравнивал отступы по 2 пробелам?

UPDATE

В настройках Prettier Tab size указан 2. Как в настройках User, так и в настройках Workspace.

Перегрузил настройку в проекте.

UPDATE2

Ничего не помогает. Опытным путём замечено, что проблема проявляется только в JS-файлах. Все остальные файлы (С/С++/JSON/JAVA) сохраняются с отступами в 2 пробела.

Сделаем это по-быстрому: 20 полезных сочетаний клавиш для VS Code

«Купи мне истребитель». Сбор средств для Воздушных Сил ВСУ

1. Открыть и закрыть боковую панель

Боковую панель в VS Code можно открывать и закрывать без нажатия клавишей мыши на левую боковую вкладку с помощью следующих хоткеев:

Особенно полезно при нахождении в режиме разделенного редактора.

2. Выбрать слово

Используется, чтобы выбрать слово, на котором в данный момент стоит курсор.

При повторном нажатии сочетания клавиш к выделению добавится еще одно вхождение того же слова далее по тексту.

3. Разбить окно по вертикали

Полезно, если нужно сравнить несколько файлов.

4. Свернуть блоки кода

Если файл слишком длинный, может понадобиться свернуть или развернуть блоки кода. Вот как это сделать:

5. Скопировать строку сверху или снизу

Если нужно скопировать текущую строку в строку выше или ниже, нажмите:

6. Форматирование кода

Позволяет выровнять код в соответствии с заранее прописанными настройками редактора. Вот как это сделать.

7. Обрезать множественные конечные пробелы

Позволяет избавиться от пробелов в начале или конце строки.

Для автоматической обрезки пробелов, можно изменить свойства VS Code. Для этого:

Пройдите в P references > Settings > User Setting Tab и добавьте новый параметр “files.trimTrailingWhitespace : true” в документы User Settings. После сохранения файла пробелы будут удаляться автоматически.

8. Объединить строку

Позволяет объединить выделенные строки в одну линию.

9. Быстрое открытие файла

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

Открывает доступ ко всем доступным командам.

11. Переключить терминал

Обычно при разработке веб-приложения используется несколько терминалов, чтобы переключаться между ними, выполните следующие действия:

12. Переключить вкладки

Позволяет переключать между разделами, которые вы разделили.

13. Перейти на строку

С помощью этого сочетания клавиш можно перейти на строку, на которой стоит курсор.

14. Удалить строку

Чтобы удалить строку, нажмите следующее сочетание клавиш:

15. Переместить строку

Для перемещения строки в VS Code используются следующие хоткеи:

16. Найти слово/фразу

Чтобы найти в текущем файле нажмите:

Чтобы искать по проекту:

17. Показать определение

Функция Peel Definition позволяет просматривать и редактировать исходный код нужного символа.

18. Переименовать переменную

Позволяет переименовать переменную. Очень полезный хоткей для рефакторинга.

19. Выбор нескольких курсоров

VS Code поддерживает функцию нескольких курсоров для быстрого одновременного редактирования. Чтобы их добавить нажмите:

20. Дублировать строку

В VS Code дублирование строки выполняется с помощью следующих сочетаний клавиш:

How to shift a block of code left/right by one space in VSCode?

In VSCode, I can use alt-up and alt-down to move a line or block up or down, but I can’t find a command to increase or decrease indent by one space.

I can indent/outdent by multiples of tabSize, but that’s not quite general enough for me, and I don’t really want to set tabSize=1.

8 Answers 8

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

There was a feature request for that in vscode repo. But it was marked as extension-candidate and closed. So, here is the extension: Indent One space

Unlike the answer below that tells you to use Ctrl + [ this extension indents code by ONE whtespace 🤦‍♂️.

UPDATE

While these methods work, newer versions of VS Code uses the Ctrl + ] shortcut to indent a block of code once, and Ctrl + [ to remove indentation.

How to change indentation in Visual Studio Code?

For every typescript file visual studio code uses an auto indentation of 8 spaces. This is a bit too much for my taste but I can’t find where to change it.

Maybe it’s available as a setting but under a different name as I can’t find anything related to indentation.

UPDATE

I’m currently using the Prettier code formatter and that solves all formatting problems by auto formatting on save (if there is no syntax error)

19 Answers 19

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

In the toolbar in the bottom right corner you will see a item that looks like the following: After clicking on it you will get the option to indent using either spaces or tabs. After selecting your indent type you will then have the option to change how big an indent is. In the case of the example above, indentation is set to 4 space characters per indent. If tab is selected as your indentation character then you will see Tab Size instead of Spaces

If you want to have this apply to all files and not on an individual file basis, then override the Editor: Tab Size and Editor: Insert Spaces settings in either User Settings or Workspace Settings depending on your needs

Edit 1

You can change this in global User level or Workspace level.

Open the settings: Click the gear on the bottom left, then click Settings as shown below.

Then, do the following 2 changes: (type tabSize in the search bar)

To change the indentation based on programming language:

If Settings menu is opened (since 1.66.0):
4. Press → to place the cursor right beside the language filter (e.g. @lang:typescript ).
5. Type Tab Size and enter your preferred value in the text box.

If settings.json file is opened:
4. Add this code:

You might also want to set the editor.detectIndentation to false, in addition to Elliot-J’s answer.

VSCode will overwrite your editor.tabSize and editor.insertSpaces settings per file if it detects that a file has a different tab or spaces indentation pattern. You can run into this issue if you add existing files to your project, or if you add files using code generators like Angular Cli. The above setting prevents VSCode from doing this.

Code Formatting Shortcut:

You can also customize this shortcut using preference setting if needed.

column selection with keyboard Ctrl + Shift + Alt + Arrow

Here is an example config. The «indent_size» sets the number of spaces for a tab.

How to turn 4 spaces indents in all files in VS Code to 2 spaces

How to turn 2 spaces indents in all files in VS Code to 4 spaces

NOTE: You must turn on PERL Regex first. This is How:

Hope someone sees this.

To set all existing files and new files to space identation to 2 just put it in your settingns.json (in the root of json):

you can add the language type of the configuration:

Simplified explanation with pictures for those that googled «Change indentation in VS Code»

Step 1: Click on Preferences > Settings

Step 2: The setting you are looking for is «Detect Indentation», begin typing that. Click on «Editor: Tab Size»

Step 3: Scroll down to «Editor: Tab Size» and type in 2 (or whatever you need).

Changes are automatically saved

Example of my changes

Setting the indentation in preferences isn’t allways the solution. Most of the time the indentation is right except you happen to copy some code code from other sources or your collegue make something for you and has different settings. Then you want to just quickly convert the indentation from 2 to 4 or the other way round.

Step 1: Open settings.json in vscode

Step 2: Add the lines as below for the programming language (an example is below)

For typescript and javascript

Problem: The accepted answer does not actually fix the indentation in the current document.

Solution: Run Format Document to re-process the document according to current (new) settings.

Problem: The HTML docs in my projects are of type «Django HTML» not «HTML» and there is no formatter available.

Solution: Switch them to syntax «HTML», format them, then switch back to «Django HTML.»

Problem: The HTML formatter doesn’t know how to handle Django template tags and undoes much of my carefully applied nesting.

Solution: Install the Indent 4-2 extension, which performs indentation strictly, without regard to the current language syntax (which is what I want in this case).

I wanted to change the indentation of my existing HTML file from 4 spaces to 2 spaces.

I clicked the ‘Spaces: 4’ button in the status bar and changed them to two in the next dialog box.

I use ‘vim’ extension. I don’t how to re-indent without vim

To re-indent my current file, I used this:

Adding on: yes, you can use the bottom-right UI to configure the space settings. But if you have existing code that’s not formatted to the new spacing, then you can right-click anywhere within the file and click Format Document. Took me a while to figure this out until I stumbled on this issue.

For me it was docs-markdown andDocs Authoring Pack. Microsoft’s many modules messing with each other yet again! Disabled the extensions and now good to go again 😀

The Problem of auto deintending is caused due to a checkbox being active in the settings of VSCode. Follow these steps:

search ‘editor:trim auto whitespace’

Uncheck The box

The following search-and-replace regex changes the number of spaces per indentation level from 4 to 2 in existing files. It’s relatively easy to understand, reliable, and doesn’t require installing anything.

Instructions

You could also use this in the Search pane on the left to do this across all files in your project. However, note that this should only be run once per file. It will mess up the indentation of files that already use 2 spaces.

Extra Credit: How It Works

Extra Extra Credit: Extending

You could adapt the pattern to decrease the number of spaces per indentation level in a file from any original number to another lower target number.

Put the target number of spaces inside the inner parenthesis. Then, put the remaining original number of spaces in the outer parenthesis, so the total number of spaces in the pattern is the original.

For example, if you want to change the indentation level from 6 to 4, repeat this search pattern as many times as you like:

Как в visual studio 2012 выровнять текст кода?

Подскажите, пожалуйста, как выровнять текст кода в студии (горячие клавиши), как например в QtCreator(I+Ctrl).
в общем, например, у меня получился вот такой код:
while (true)<
while (true)<
while (true)<
>
>
>
как его выровнять?? чтобы он выглядел так:
while (true)<
_____while (true)<
__________while (true)<
__________>
_____>
>

Трюки в редакторе Visual Studio

1. Вертикальное выделение тексты

Наверное одна из моих самых любимых функций редактора Visual Studio – выделение текста колонками, а не строками. Нажмите Alt и левую клавишу маши и выделяйте текст колонкой.

2. Альтернативный поиск строк

Нажмите Ctrl + I и начинайте вводить некоторый текст. Будут выделяться совпадающие символы первого вхождения строки от положения курсора и ниже.

3. Множественное копирование

Иногда так хочется скопировать в буфер обмена несколько строк сразу, а потом, перейдя к другому файлу вставлять скопированные строки в произвольном порядке. Visual Studio умеет и это!

Для начала выделите некоторый фрагмент кода и скопируйте его в буфер (Ctrl + C), после этого выделите другой фрагмент и скопируйте его тоже. Ну и еще один, интереса ради.

Теперь установите курсор ввода куда-нибудь еще и зажмите клавиши Ctrl + Shift и нажимайте клавишу V (не отпуская Ctrl + Shift). Вы увидите, что вставляемые фрагменты циклично чередуются.

4. Копирование текста на Toolbox и с Toolbox

Великий и могучий Drag & Drop при редактировании кода также может быть не менее полезен, чем при добавлении контролов на форму. Вы можете выделить кусочек текста и перетащить его на панель Toolbox, чтобы потом, также перетаскивая, вставлять куда угодно. Еще один удобный аналог стандартного буфера обмена.

5. Быстрое комментирование/раскомментирование фрагментов кода

Выделите фрагмент кода, который хотите закоментировать и нажмите Ctrl + K, C (удерживая Ctrl нажать K, затем C). Для снятия комментариев нужно выделить закомментированный кусок и нажать Ctrl + K, U.

6. Отображение IntelliSense

Если вы хотите отобразить IntelliSense, то нужно нажеть Ctrl + J. Это может пригодится, если по каким-то причинам подсказка не отображается (вы на «полуслове» наступили «на горло песне», то есть нажали Esc).

7. Перемещение между открывающими/закрывающими скобками

Установите курсор ввода на скобку, для перехода на ее пару нажмите Ctrl + ]. Это же работает для многострочных комментариев (/* */), регионов (#region #endregion) и кавычек, обрамляющих строки.

8. Сворачивание/разворачивание блока (региона, функции, цикла и т. п.)

Если вам лениво ползать мышью до значка +/-, то нажатие Ctrl + M, M (удерживая Ctrl нажать M два раза) сделает то, что нужно. Ctrl + M, L позволяет свернуть/развернуть все блоки.

VSCode: Как сдвинуть выделенный код в multi-line режиме?

Всем привет! Банально не понимаю как сдвинуть выделенные строки кода на один пробел влево или вправо(имеется в виду не табуляция, а именно пробел).

2 ответа 2

Просто зажмите ALT при выделении, выделите начало нужных строк и начните вводить все, что вашей душе будет угодно.

Вот пример того, как это выглядит (правда в Notepad++, думаю VS Code этим не обделена):

Жмите на Ctrl+Shift+Alt и двигайте стрелки вниз\вверх. Далее таб или пробел сколько нужно раз. Все это достаточно просто узнается из настроек горячих клавиш в VSCode.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками c# c++ c visual-studio-code или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

5 советов и хитростей для Visual Studio Code

1. Проверка типа JavaScript

Разберёмся, как добавить простую проверку типа JavaScript в Visual Studio Code. Посмотрите на этот JavaScript-пример, в котором намереваемся суммировать два числа:

Пример с неверным типом переменной

Вы заметите, что попытка неудачная. Вам покажется это пустяком, но при написании финансовых программ, чувствительных к расчётам, легко вляпаться по неосторожности. Решить проблему помогают такие инструменты, как TypeScript и Flow. Но иногда нам не хватает бюджета или времени, чтобы внедрить TypeScript в программный поток. Поэтому смотрите, как справиться с помощью VS Code.

Добавьте комментарий @ts-check в начало файла. Вы увидите, что Visual Studio автоматически выделяет ошибки:

@ts-check в код» data-src=»https://media.proglib.io/posts/2019/10/11/1cae4c7d18061d76549d36c33f399a42.png» > Эффект добавления @ts-check в код

В примере инициализируем переменную x как число, а затем пытаемся переназначить её с использованием недопустимого типа строки. Поэтому получаем ошибку.

Заметили, что мы до сих пор не решили изначальную проблему с проверкой при суммировании двух чисел?

Функция принимает два аргумента, пытается складывать их и должна бы выдать ошибку из-за невозможности прибавить строку к числу. Этого не происходит, потому что в первом случае переменную x инициализировали как число, на основании чего VS Code сделал заключение о типе. А функцию не инициализируем. Так что редактор на самом деле не знает, как интерпретировать типы параметров для функции добавления.

add » data-src=»https://media.proglib.io/posts/2019/10/11/f7d2f502dae99aebb65d408a23dfc7df.png» > Сгенерированная документация для функции add

Добавим тип number для обоих параметров. Теперь посмотрим, как VS Code начал ловить ошибку, которая возникала из-за передачи строки в качестве второго аргумента:

Отображение ошибки после указания типа в JS doc

Если изменить аргумент на число, ошибка исчезает.

2. Рефакторинг с помощью переименования символов

Мы не всегда даём переменным, функциям или ключам атрибутов правильное имя со старта. Поэтому часто во время рефакторинга переименовываем некоторые из них.

Именованные объекты называются «символами». И самый простой и «правильный» способ сделать это – использовать функцию Rename Symbol в VS Code. Поместите курсор на «символы», которые собираетесь переименовать, затем нажмите F2 (также на Mac OS). Появится текстовое поле рядом с выбранным объектом. Таким образом, ссылки на это имя по всему проекту будут правильно переименованы. Если использовать это для компонента React, тег разметки JSX тоже переименовывается!

3. Создание фрагментов

Посмотрим, как использовать Snippets в Visual Studio Code. Благодаря этой опции вы сможете создавать пользовательские фрагменты кода. И не придётся полагаться на расширение или VS Code плагины с добавлением фрагментов.

Чтобы создать сниппет, нажмите Cmd + Shift + P и в строке поиска наберите User Snippets.

Поиск меню настройки

Пример фрагмента

react-stateless » data-src=»https://media.proglib.io/posts/2019/10/11/c08e87806e5e0162fd65213fd12c04c5.png» > Созданный фрагмент после ввода react-stateless

Фрагмент после редактирования

4. Горячие клавиши для редактирования

В редакторе разработчики не только набирают текст, но и перемещают его куски.

Замечали, что делает VS Code при нажатии стандартных горячих клавиш для копирования, вставки и вырезания без выделения символов? Применяет действие ко всей строке. Это отлично подходит для редактирования целых строк текста.

Рассмотрим другие шорткаты для дублирования и перемещения строк.

Alt + Up или Alt + Down перемещают строку, на которой сейчас курсор, вверх или вниз. Shift + Alt + Up или Shift + Alt + Down дублируют строку и располагают её выше или ниже текущей строки. Эти сокращения также работают при выделении нескольких строк. Однако в дистрибутивах Linux встречаются конфликты этих комбинаций с общесистемным сопоставлением клавиш по умолчанию. В таком случае придётся переназначить их в настройках VS Code.

5. Преобразование кода в Visual Studio Code

Иногда для достижения целей нужна современная версия JavaScript, но из-за использования в проекте более старых версий перейти на новую становится крайне сложно. На помощь приходит VS Code опция, которая преобразует код в более новые версии, даже если вы писали его в старых.

Если нажать на следующую функцию-конструктор, VS Code подсвечивает подсказку в виде лампочки. Кликните по ней и увидите предложение преобразовать функцию в ES 2015 класс.

Подсказка для конвертации функции-конструктора

Когда согласитесь конвертировать функцию в ES 2015 класс, VS автоматически определит методы-прототипы этой конкретной функции-конструктора и преобразует всё в класс.

Promise в async » data-src=»https://media.proglib.io/posts/2019/10/11/d13c1b6e1d60f8f3b1f85cc67f52e633.png» > Выбор преобразования функции с Promise в async

Результат преобразования

Диалоговое окно «Параметры»: Текстовый редактор > C# > Стиль кода > Форматирование

Используйте страницу параметров Форматирование и ее вложенные страницы (Отступ, Новые строки, Интервал и Перенос) для задания параметров форматирования кода в редакторе кода.

Чтобы получить доступ к странице параметров, в строке меню выберите Сервис>Параметры. В диалоговом окне Параметры выберите Текстовый редактор>C#>Стиль кода>Форматирование.

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

Страница «Форматирование» > «Общие»

Общие параметры

Эти параметры определяют, когда редактор кода применяет параметры форматирования к коду.

Если ранее параметры стиля кода для файлов C# применялись с помощью команды Форматировать документ в Visual Studio 2017, теперь это можно сделать с использованием функции Очистка кода.

Страница «Отступ»

Параметры отступов на этой странице применяются при автоматическом форматировании кода. Например, при вставке кода в файл, когда выбран параметр Автоматически форматировать при вставке. (Параметр Автоматически форматировать при вставке находится в разделе Форматирование>Общие.)

Параметры отступа доступны также на странице параметров Текстовый редактор>C#>Вкладки. Они определяют только место, в которое редактор кода помещает курсор при нажатии клавиши ВВОД в конце строки.

Страница «Новые строки»

Воспользуйтесь параметром новых строк на этой странице, чтобы управлять появлением элементов (скобок, ключевых слов или выражений) на новых строках в редакторе кода.

Редактирование и рефакторинг кода C++ в Visual Studio

Visual Studio предоставляет разные средства для написания, редактирования и рефакторинга кода.

IntelliSense

IntelliSense — это мощное средство завершения кода, которое предлагает символы и фрагменты по мере ввода кода. IntelliSense C++ в Visual Studio выполняется в реальном времени, анализируя вашу базу кода по мере ее обновления и предоставляя рекомендации. Чем больше символов вы вводите, тем меньше предлагается рекомендуемых результатов.

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

Параметр Режим фильтрации списка членов определяет, какие виды автозавершения IntelliSense вы видите. По умолчанию для этого параметра установлено значение Нечеткий. Если при нечетком поиске соответствий у вас есть символ, который называется MyAwesomeClass, вы можете ввести MAC и найти класс в предложениях автозаполнения. Алгоритм нечеткого поиска задает минимальный порог, которому должны соответствовать символы, отображаемые в списке. При интеллектуальной фильтрации будут отображаться все символы, которые содержат подстроки, соответствующие тому, что вы ввели. При фильтрации по префиксу выполняется поиск строк, которые начинаются с введенных вами символов.

IntelliCode

IntelliCode — это средство IntelliSense на основе ИИ, которое помещает предположительно наиболее подходящий результат в верхнюю часть списка завершения. Для создания рекомендаций IntelliCode анализирует тысячи проектов с открытым кодом на GitHub, каждый из которых имеет более 100 звезд. В сочетании с контекстом кода список завершения используется для популяризации распространенных приемов работы.

В Visual Studio 2017 IntelliCode предоставляется как расширение в Visual Studio Marketplace.

Прогнозная технология IntelliSense (экспериментальная функция)

Прогнозная технология IntelliSense — это экспериментальная функция, которая ограничивает число результатов, отображаемых в раскрывающемся списке IntelliSense, на основе контекста. Алгоритм применяет сопоставление типов, чтобы отобразить только те результаты, которые соответствует ожидаемому типу. Самый просто пример: если ввести int x = и вызвать раскрывающийся список IntelliSense, вы увидите только целые числа или функции, которые их возвращают. Эта функция отключена по умолчанию, так как она еще разрабатывается. Лучше всего она работает с глобальными символами; функции-члены еще не поддерживаются. Можно включить эту функцию, введя «прогнозный» в поле быстрого запуска или последовательно выбрав Средства>Параметры>Текстовый редактор>C/C++>Экспериментальные функции>Включить прогнозный IntelliSense.

Чтобы переопределить прогнозный IntelliSense и отобразить длинный список, нажмите клавиши CTRL+J. Если прогнозный IntelliSense включен, вызов CTRL+J удалит прогнозный фильтр. Повторное нажатие CTRL+J снова удалит фильтр специальных возможностей из результатов списка членов, где это применимо. Использование кнопки ([+]) в раскрывающемся списке IntelliSense аналогично нажатию клавиш CTRL+J. Наведите указатель на кнопку, чтобы увидеть подсказку о том, что сейчас отображается.

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

Кнопка отображается, только если это применимо в текущем сеансе IntelliSense. Как правило, все кнопки одновременно не отображаются.

Шаблон IntelliSense

Когда курсор находится в определении шаблона, отображается строка шаблона. Она позволяет предоставлять аргументы примера шаблона для IntelliSense.

Изменения, вносимые в окне, применяются непосредственно к исходному коду, поэтому результаты отображаются в реальном времени.

Строка шаблона может автоматически предлагать вероятные варианты на основе экземпляров в коде. Щелкните Добавить все существующие экземпляры, чтобы просмотреть список всех аргументов, которые использовались для создания экземпляра шаблона, во всей базе кода.

В окне в нижней части редактора отображаются расположение и аргументы каждого экземпляра.

Подчеркивание ошибок и быстрые исправления

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

Для некоторых типов ошибок (а также общих шаблонов создания кода) редактор будет предлагать быстрое исправление в виде лампочки, которая отображается, если навести указатель мыши на волнистую линию. Щелкните стрелку вниз, чтобы просмотреть предложения.

Change tracking

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

Перенос кода

Строки кода можно перемещать вверх и вниз. Для этого выберите их, удерживая нажатой клавишу ALT и одну из клавиш со стрелками (вверх или вниз).

Вставка фрагментов кода

Фрагмент — это предварительно определенная часть исходного кода. Щелкните правой кнопкой мыши одну точку или выбранный текст для вставки фрагмента или размещения выбранного текста внутри фрагмента. На следующем рисунке показана процедура размещения выбранного оператора в цикле for. На последнем изображении желтым цветом выделены редактируемые поля, доступ к которым осуществляется с помощью клавиши TAB. Дополнительные сведения см. в статье Фрагменты кода.

Добавить класс

Добавьте новый класс из меню Проект или контекстного меню в обозревателе решений:

Можно также использовать мастер классов для изменения или просмотра существующего класса.

Рефакторинг

Рефакторинг доступен в контекстном меню быстрых действий. Или можно щелкнуть лампочку в редакторе. Некоторые также находятся в меню Правка > Рефакторинг. Эти функции включают перечисленные ниже.

Применение стиля кода с помощью ClangFormat и EditorConfig

В Visual Studio, начиная с версии 2017, реализована поддержка ClangFormat — популярной служебной программы для форматирования кода C++ на основе Clang/LLVM. Введите ClangFormat в поле быстрого запуска, чтобы настроить использование одного из следующих распространенных форматов:

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

Visual Studio, начиная с версии 2017, также поддерживает EditorConfig — программу, которая работает аналогичным образом. Однако ClangFormat имеет больше параметров стиля, чем EditorConfig, включая правила, относящиеся к C++. С помощью EditorConfig вы можете создавать и размещать файлы .editorconfig в разных папках вашей базы кода, чтобы определять стили кода для этих папок и подпапок. Файл .editorconfig заменяет все другие файлы .editorconfig в родительских папках, перезаписывая все параметры форматирования, которые можно настроить, выбрав Средства>Параметры. Вы можете задать правила, определяющие использование табуляции и пробелов, настраивающие размер отступов и многое другое. См. подробнее о создании переносимых настраиваемых параметров редактора с помощью EditorConfig.

Другие параметры форматирования

Поле быстрого запуска — это самый быстрый способ найти нужный параметр или средство. Поле расположено в главном меню. Просто начните ввод и список автоматического завершения отфильтрует результаты.

Чтобы задать параметры форматирования, например отступы, завершение скобок и раскраску, введите C++ Formatting (Форматирование C++) в поле быстрого запуска.

Другие параметры форматирования можно настроить в главном меню, выбрав Изменить>Дополнительно.

Options dialog editor options.» title=»Editor options» data-linktype=»relative-path»>

Экспериментальные функции, которые могут присутствовать или отсутствовать в будущих версиях Visual Studio, можно найти в диалоговом окне экспериментальных функций C++ для текстового редактора. В Visual Studio, начиная с версии 2017, в этом диалоговом окне можно включить прогнозную технологию IntelliSense.

10 комбинаций клавиш VS Code, на которые стоит обратить внимание

Перевод статьи «My top 10 VS Code shortcuts you don’t want to miss».

Сразу скажу, что я поклонник работы с клавиатурой, поэтому стараюсь пользоваться всевозможными комбинациями клавиш. Особенно, если дело касается написания кода. VS Code уже давно стал моим любимым редактором, и я просто в восторге от того, что в нем так много шорткатов, причем настраиваемых. Сегодня я расскажу вам о 10 полезных комбинациях клавиш (из числа моих любимых). Попробуйте их в деле!

1. Переход к последнему месту редактирования

2. Переход к парной скобке

3. Выделение всего кода до скобки

Поскольку в VS Code нет подобной комбинации клавиш, ее можно назначить самостоятельно. (Мы довольно подробно рассказывали о настройках сочетаний клавиш в статье «Повышаем продуктивность работы в Visual Studio Code: полезные сочетания клавиш«. Рекомендуем ознакомиться. — Прим. ред. Techrocks).

Наберите Command + Shift + P (в Ubuntu — Ctrl + Shift +P ), чтобы открыть палитру команд. Перейдите в Open keyboard shortcuts (JSON) и добавьте в файл JSON приведенный ниже код. В значении key укажите нужную вам комбинацию клавиш.

4. Переход к парному тегу

При помощи этой комбинации клавиш я быстро перемещаюсь между открывающим и закрывающим тегом (так же, как можно перемещаться между парными скобками). Это очень часто пригождается при написании компонентов React: я могу быстро перейти в любой конец блока и добавить там нужный код.

Чтобы назначить такую же комбинацию клавиш, добавьте в файл JSON следующий код:

5. Переход к предыдущему файлу

6. Переход к символу в файле

7. Переключение в режим выделения столбца

Для добавления такой комбинации вставьте в файл JSON следующий код:

8. Фокус на текущий файл в структуре проекта

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

Для добавления комбинации клавиш внесите в свой файл JSON такой код:

9. Упорядочивание импортов

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

10. Добавление пропущенных импортов

Вообще эта комбинация клавиш используется для быстрых правок ( quick fix ). Но я обнаружил, что таким образом можно добавить пропущенные предложения import, чтобы не вносить их по одному. Эта опция доступна в файлах TypeScript.

Вот и все. Надеюсь, эти комбинации клавиш вам пригодятся.

Рефакторинг для реализации переноса, отступа и выравнивания

Сворачивание и выравнивание цепочек вызовов

Область применения этого рефакторинга:

Что? Позволяет сворачивать и выравнивать цепочки вызовов методов.

Когда? Имеется длинная цепочка, состоящая из нескольких вызовов методов в одной инструкции.

Зачем? Читать длинный список будет проще, если используется сворачивание или отступ в соответствии с предпочтениями пользователя.

Практические советы

Поместите курсор в любую цепочку вызовов.

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Выберите Свернуть цепочку вызовов или Свернуть и выровнять цепочку вызовов, чтобы принять рефакторинг.

Аргументы или параметры переноса, отступа и выравнивания

Область применения этого рефакторинга:

Что? Обеспечивает параметры или аргументы переноса, отступа и выравнивания.

Когда? У вас есть объявление метода или вызов, который имеет несколько параметров или аргументов.

Зачем? Читать длинный список параметров или аргументов будет проще, если используется перенос или отступ в соответствии с предпочтениями пользователя.

Практические советы

Поместите курсор в список параметров.

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Выберите Переносить каждый параметр, чтобы принять рефакторинг.

Перенос двоичных выражений

Область применения этого рефакторинга:

Что? Позволяет выполнять перенос двоичных выражений.

Когда? У вас есть двоичное выражение.

Зачем? Читать двоичное выражение проще, когда оно переносится в соответствии с параметрами пользователя.

Практические советы

Поместите курсор в двоичное выражение.

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Выберите Перенос выражения, чтобы принять рефакторинг.

Настройка параметров написания кода на C++ в Visual Studio

Вы можете сделать работу с кодом на C++ более удобной, эффективной и приятной, используя возможности персонализации Visual Studio. Можно сделать следующее:

Вы можете синхронизировать свои настройки на нескольких компьютерах, а также создать и сохранить несколько наборов предпочтений и поделиться ими с коллегами. Из Visual Studio Marketplace вы можете установить расширения, которые предоставляют дополнительные возможности по настройке поведения. Дополнительные сведения см. в разделе Персонализация интегрированной среды разработки Visual Studio.

Упорядочение макета окна

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

На следующем снимке экрана показано окно Team Explorer, которое перетаскивается из расположения по умолчанию в новое расположение с закреплением в левой части редактора кода. Синяя затененная область показывает, где будет размещено окно при отпускании кнопки мыши.

В окне документа каждый открытый файл отображается во фрейме с вкладками. Вы можете заблокировать эти вкладки или сделать их плавающими (так же, как и окна инструментов). Дополнительные сведения см. в статье Настройка макетов окон в Visual Studio.

Чтобы скрыть все окна инструментов и развернуть окно редактора кода, нажмите клавиши ALT + SHIFT + ВВОД для переключения в полноэкранный режим.

Настройка стилей и форматирования C++

Вы можете указать множество отдельных параметров форматирования кода, таких как отступы и положение фигурных скобок. Для этого выберите Сервис>Параметры>Текстовый редактор>C/C++>Форматирование (или нажмите клавиши CTRL+Q и введите «Форматирование» для поиска). Вы также можете задать один из стилей ClangFormat (или свой собственный настраиваемый стиль ClangFormat).

Дополнительные сведения обо всех параметрах форматирования см. в статье Параметры, текстовый редактор, C/C++, форматирование.

Настройка цветовой темы

Чтобы задать светлый или темный фон, нажмите клавиши CTRL+Q и введите «Цветовая тема» для поиска. Цветовую тему также можно найти в меню Сервис>Параметры>Среда в разделе Цветовая тема.

Например, здесь приведена темная тема:

Настройка выделения кода цветом

В Visual Studio 2019 можно выбрать одну из трех стандартных цветовых схем. Они задают выделение элементов кода цветом в редакторе. Чтобы выбрать тему, откройте меню Сервис>Параметры>Текстовый редактор>C/C++>Представление и выберите Цветовая схема:

В цветовой схеме с названием Visual Studio 2017 большинство элементов кода отображаются просто черным цветом. В цветовой схеме Расширенная функции, локальные переменные, макросы и другие элементы отображаются разными цветами. В схеме Расширенная (глобальные и внутренние) глобальные функции и переменные имеют контрастные цвета по сравнению с членами классов. По умолчанию используется режим Расширенная. Он выглядит следующим образом:

Независимо от того, какая тема или цветовая схема активна, вы можете настроить шрифт и цвета для отдельных элементов кода. Для этого откройте меню Сервис>Параметры>Среда>Шрифты и цвета (или нажмите клавиши CTRL+Q и введите «Шрифты» для поиска). Прокрутите список отображаемых элементов вниз, пока не увидите параметры C++.

Заданные здесь цвета переопределяют значения, определенные для цветовых схем. Если вы хотите вернуть цветовую схему по умолчанию, присвойте цвету значение По умолчанию.

Настройка панелей инструментов

Панели инструментов предоставляют удобный способ выполнения команд одним щелчком, а не с помощью меню или сочетаний клавиш. Visual Studio включает стандартный набор панелей инструментов. Для стандартной разработки на C++ самыми полезными панелями инструментов являются «Стандартная», «Текстовый редактор», «Сборка», «Отладка», «Управление версиями» и «Сравнение файлов». При разработке для Windows элементы управления «Редактор диалоговых окон» и «Редактор изображений» позволяют размещать диалоговые окна и редактировать значки.

Наведите указатель мыши на значок в панели инструментов, чтобы увидеть, какую команду он представляет:

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

.

Отображение или скрытие номеров строк

Вы можете указать, нужно ли отображать номера строк слева от окон редактора. В меню Параметры в разделе C/C++ выберите Общие. В разделе Настройки установите или снимите флажок Номера строк в зависимости от ваших предпочтений.

Создание сочетаний клавиш

Многие команды в Visual Studio связаны с сочетаниями клавиш (CTRL, ALT, SHIFT и другие клавиши). В Visual Studio вы можете изменить такие сочетания или создать новые. Выберите Сервис>Параметры>Среда>Клавиатура (или нажмите клавиши CTRL+Q и введите «сочетания клавиш» для поиска). Дополнительные сведения см. в статье Определение и настройка сочетаний клавиш в Visual Studio.

Практикум по С#: выравниваем текст по краю и по центру консоли

Выравнивание текста может оказаться совсем не тривиальной задачей, если имеешь дело с консолью. Разбираемся, как это работает в С#.

В инструментах C# для создания интерфейсов типа WPF, UWP или WinForms есть удобные встроенные функции форматирования текста. Но для консольных программ (редакторов, текстовых баннеров) или просто для вёрстки красивых текстовых интерфейсов эти функции придётся писать самому.

Одна из задач при форматировании текста — выравнивание. Может показаться, что это совсем просто, но зачастую выходит как в меме:

Давайте попробуем разобраться, как написать код на C# для выравнивания текста в консоли.

Работа с координатами текста

У каждого символа в консоли есть координаты по осям X и Y. Первый символ выводится в позицию с координатами [0, 0]. На рисунке она находится в верхнем левом углу.

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

Код для выравнивания текста в консоли на C#

Чтобы получить координаты, нужно подставлять в формулы следующие значения:

Изменить положение курсора можно с помощью метода SetCursorPosition (int left, int top) класса Console.

Теперь остаётся проверить, всё ли работает правильно. Для этого напишем программу, которая выводит надписи по центру и в углах нашей консоли.

как в vscode обернуть текст и сделать все строки списком?

Пример:
В файле README.md имеется n-строк, которые должны стать списком.

Есть ли возможность выделить все строки и нажать комбинацию кнопок, чтобы получить автоматически-созданный список? (Неужели каждую строку минусом отмечать?)

2 ответа 2

Создание ненумерованного списка из определённых строк

Всё ещё ищете ответ? Посмотрите другие вопросы с метками visual-studio-code markdown или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Знаки табуляции или пробелы: решаем с помощью Visual Studio

Привет, Хабр! Культурные воины продолжаются, люди сражаются по разные стороны баррикад, пытаясь решить: tabs or spaces. На эту же тему мы нашли интересную статью Скотта Хансельмана, в которой он рассказывает про инструмент, решающий это спор, EditorConfig в Visual Studio. Всех интересующихся прошу под кат.

Помните, летом на StackOverflow была статья о том, что на пробелах люди зарабатывают больше.

Разберемся в этом вместе с Джиной Трапани (Gina Trapani). Найдем рабочий код.

Разработчики могут ломать копья и дальше, но проблема форматирования кода решается с помощью файла EditorConfig. Удивительно, но многие люди пользуются им, сами того не зная, так что эта публикация будет просто маленькой подсказкой. Расскажите об этом коллегам.

В моем примере указано только расширение *.cs, но вы также можете указать [*.] или, если хотите, только [*], либо сразу множество разделов.

Убедитесь, что файл введен в систему вместе с проектом, чтобы каждый член команды смог оценить все его преимущества.

Вы можете увидеть в Notepad2, если кто-то, как в каменном веке, использует пробелы в качестве разделителя. Пробелы в этом редакторе отображаются как бледные точки.

Я открываю этот проект в Visual Studio 2017 со встроенной поддержкой EditorConfig. Обратите внимание на отображаемое внизу предупреждение Visual Studio о том, что в проекте имеются обозначения, не совпадающие с нашими.

Команды Visual Studio для форматирования документов в этом проекте будут использовать знаки табуляции, а не пробелы. Вот тот же документ, переформатированный в Visual Studio:

Теперь я могу спать спокойно: пробелы побеждены, трезвые умы восторжествовали (по крайней мере, в рамках этого проекта).

Более того, если позволяет используемый редактор, можно добавить расширения EditorConfig для определенных файлов или языков. Это позволит обеспечить единообразие при работе ваших сотрудников над проектом. Если вы знакомы с FxCop и StyleCop, то это примерно то же самое.

Для примера сделаем так, чтобы мои сотрудники использовали предопределенные типы для локальных объектов:

В Visual Studio в соответствующей строке появится значок лампочки с предлагаемым исправлением, ведь, скорее всего, мои сотрудники вместо полной формы «System.String» напечатают просто «string».

Кстати, летом мы проводили голосование на эту тему в Microsoft Developer. Тогда победил Tabs. Предлагаем повторить здесь.

Автоматическое выравнивание кода

Доброго времени суток.

Среди способов повышения читаемости кода, связанных с визуальным восприятием текста, можно выделить следующие:

Было бы ошибкой утверждать, что эта задача никогда не решалась. Беглый поиск показал, что существует множество реализаций, в том числе для используемого мной редактора Sublime Text.

Однако, если присмотреться более внимательно, становится понятно, что практические все эти плагины реализуют выравнивание лишь по одному, заранее выбранному символу. Среди самых продвинутых версий строит выделить следующий инструмент. Но и у него есть существенный недостаток: для своей работы он использует DLL с закрытым исходным кодом, что делает невозможным его кросс-платформенное использование, в том числе и под Linux.

В связи с этим я решил искать собственный метод для решения задачи.

Стоит заметить, что изначально я предполагал, что на решение потрачу не больше пары вечеров, но задача оказалась значительно сложнее, чем мне казалось на первый взгляд.

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

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

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

Следовательно, необходимо учитывать не только степень похожести токенов, но и синтаксическую структуру выравниваемых строк.

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

Более того, в тексте программ могут встречаться места, выравнивать которые ни в коем случае нельзя. К ним можно отнести строковые константы и комментарии. Разные языки по разному распознают комментарии, так например С\С++ использует //, а Ruby и Python #. Поэтому единственным способом повышения универсальности является использование метода быстрого описания синтаксиса языка.

Грамматика

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

Структура, полученная из предыдущего примера:

Пунктирными линиями показаны узлы, между которыми будет происходить выравнивание.

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

Среди требований, предъявляемых к грамматике, нужно выделить также следующее: любая последовательность токенов, так или иначе, должна быть принята грамматикой. Это требование позволит использовать единую грамматику для схожих языков.

Грамматика, применяемая для построения показанной выше структуры, может быть описана в форме Бэкуса-Наура следующим образом:

Если же строка не может быть принята грамматикой (отсутствует закрывающая скобка, например), то на выходе распознавания будет линейная структура.

Можно заметить, что выделение узлов в дереве соответствует не каждому правилу свертки грамматики, иначе, каждый токен находился бы в отдельном узле. Чтобы достичь желаемой структуры, необходимо выделить в грамматике те правила, применение которых должно образовывать новые узлы в дереве. В нашем случае такими правилами должны быть:

В ходе разработки была реализован LR-0 парсер, использующий описание грамматики для построения дерева выражения. Описание алгоритма построения парсера выходит за рамки данной статьи, более подробно с ним можно ознакомиться в книге: Ахо, Лам, Сети, Ульман — Компиляторы. Принципы, технологии, инструменты.

Сравнение

После получения дерева выражения необходимо производить выравнивание токенов с учетом их похожести. Похожая задача возникает в генетике при изучении генома. Выравнивание последовательностей — метод, основанный на размещении двух или более последовательностей мономеров ДНК, РНК или белков друг под другом таким образом, чтобы легко увидеть сходные участки в этих последовательностях[wiki].

Один из способов для решения этой задачи в биоинформатике — применение динамического программирования, его я и взял за основу для задачи выравнивания токенов.

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

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

На рисунке показана цепочка из запятых, по которым будет происходить выравнивание.

Выделение токенов

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

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

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

Значения по-умолчанию в этом случае следующие:

Определение минимального отступа между токенами

Хорошим стилем программирования считается простановка отступов в некоторых конструкциях языка.
К таким случаям можно отнести простановку пробелов после запятой в аргументах функции, пробелы вокруг операторов сравнения и т.п…

Однако варианты постановки пробелов отличаются не только для разных языков, но и разные программисты пользуются разными стилями.

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

Текущая реализация

На момент написания статьи программа реализована как плагин к редактору Sublime Text 3. Среди особенностей следует отметить следующие:

Среди планов на будущее хотелось бы отметить следующее:

Примеры полученных результатов

В последнем примере используется отделение описания типа на уровне грамматики, поэтому похожие токены double и doubl небыли выровнены между собой.

Русские Блоги

30 плагинов Visual Studio Code, которые значительно повышают эффективность разработки

30 плагинов Visual Studio Code, которые значительно повышают эффективность разработки

Пресс-переводчик:После прочтения этой статьи я планирую перейти с Sublime Text на Visual Studio Code!

Эта статья свободно переведена, и авторские права принадлежат первоначальному автору.

Наш VSC (VSCode) будет как единорог с пятью длинными лазерами! Далее я расскажу об очень полезных плагинах, которые использую каждый день.

Если вы все еще новичок в VSC, нажмите кнопку в левом нижнем углу, чтобы установить плагин.

Material Theme

Загрузки:1,3 миллиона

Самая старая тема Visual Studio Code!

Auto Import

Загрузки:46 миллионов

Автоматический поиск, анализ и автозавершение кода. Применимо для TypeScript и TSX.

Import Cost

Загрузки:410 000

Плагин отобразит размер импортированного пакета в конце строки. Для расчета размера пакета плагин использует Webpack и babili-webpack-plugin.

Indent-Rainbow

Загрузки:130 тысяч

Простой плагин может сделать выравнивание более читаемым.

IntelliSense for CSS class names in HTML

Загрузки:2,43 миллиона

На основе вашего проекта и через link Внешний файл, на который ссылается тег. Умный плагин обеспечивает завершение имени класса CSS в HTML.

SVG Viewer

Загрузки:29 миллионов

Плагин для предварительного просмотра SVG.

Prettier

Загрузки:3,57 миллиона

Вы не можете пропустить этот плагин, он вам нужен, чтобы украсить ваш код JavaScript / TypeScript / CSS одним щелчком мыши.

React Native Tools

Загрузки:2,18 миллиона

Подсказка кода, отладка, интегрированные команды RN.

Sublime Text Keymap and Settings Importer

Загрузки:76 миллионов

Судя по количеству загрузок, похоже, что многие люди перешли с Sublime Text.

Этот плагин изменяет привязку сочетания клавиш в коде Visual Studio, чтобы она была такой же, как в Sublime Text 3. Вы можете попробовать: cmd + P (Mac), ctrl + P (Windows).

Вы можете перейти к файлу, если перед поиском добавили > Символы, вы даже можете искать действия, такие как открытие встроенного терминала, установка плагинов и т. Д.

Для людей, привыкших к ST3, это большой плюс.

npm Intellisense

Загрузки:880 000

Плагин VSCode может автоматически дополнять имя модуля npm в операторе импорта.

lit-html

Загрузки:30000

В файлах JavaScript / TypeScript, если используются теги HTML, lit-html обеспечивает подсветку синтаксиса и соответствующую поддержку завершения.

highlight-matching-tag

Загрузки:60000

Это должна быть функция, которую VSCode должен предоставлять по умолчанию, выделяя соответствующие теги.

GitLens

Загрузки:7,72 миллиона

Ничего не говори, просто переходи к картинке!

Git Project Manager

Загрузки:37 миллионов

Git Project Manager позволяет вам искать и открывать проект, основанный на управлении Git, одним щелчком мыши.

Git History

Загрузки:3,32 миллиона

Используется для просмотра журнала git или истории файла git, сравнения различных веток, фиксации.

File Utils

Загрузки:80000

Обеспечивает более краткий способ создания, копирования, перемещения, переименования и удаления файлов / папок.

Bracket Pair Colorizer

Загрузки:2,28 миллиона

Если в вашем коде много обратных вызовов, то такое выделение может помочь вам лучше различать разные блоки кода.

Color Highlight

Загрузки:250000

Визуально отображайте определяемые вами цвета.

CSS Peek

Загрузки:230 000

Вы можете найти его определение в HTML через идентификатор или класс CSS.

Debugger for Chrome

Загрузки:11,11 миллиона

Используйте Chrome для отладки кода JavaScript или другие платформы, поддерживающие протокол Chrome Debugger.

Quokka.js

Загрузки:1,72 миллиона

Выполнять код JavaScript в реальном времени (полезно для быстрых демонстраций).

Trailing Spaces

Загрузки:70 тысяч

Выделите эти лишние пробелы и быстро удалите их.

TypeScript Hero

Загрузки:720 000

Поддержите детскую обувь, запрограммированную на TypeScript!

WakaTime

Загрузки:240 000

Создавайте отчеты о ваших привычках использования.

Vetur

Загрузки:4,51 миллиона

Инструменты Vue под VS Code! Разработанный Pine Wu, он собрал более 4 миллионов загрузок!

Code Runner

Загрузки:3,46 миллиона

Visual Studio Code. Как быть продуктивным в 2018. Советы профи

За последние несколько лет, Visual Studio Code стал очень популярным, среди IDE с открытым исходным кодом. Официальный релиз VS Code состоялся в 2015 году, а сегодня его используют 35% разработчиков, согласно данным Stack Overflow на 2018 год. В этой статье, я хочу поделиться рекомендациями, которые помогут работать в VS Code более продуктивно.

Git и Gitlens

Git наиболее популярное ПО среди разработчиков. Управлять Git, намного проще из IDE, чем из командной строки. Git-панель позволяет управлять состояниями файла: stage, commit, stash и отменять изменения. Расширение GitLens для VS Code предлагает ещё больше возможностей. Самая полезная фича GitLens — это история внесённых изменений, которая показывает, что и когда изменилось в каждой строке кода.

Live Share

VS Code Live Share — это совершенно новая функция, которая пока доступна для ознакомления. Она позволяет совместно использовать единое рабочее пространство в реальном времени: редактировать, следить за курсором пользователя, совместно отлаживать код и много чего ещё. Это действительно полезно, если вы работаете удаленно или когда вам нужно сотрудничать с кем-то, кого нет рядом.

JSON в Code

Случалось ли, что вы работали с API на TypeScript, а результат нужен в строго-типизированном виде? Paste JSON as Code конвертирует JSON в пригодный для использования в строго-типизированных языках вид одной командой.

Переименовать все экземпляры

Рефакторинг необходим для написания и поддержания кода в «чистом» виде. Но иногда это становится головной болью, особенно, когда в переработке нуждается большой модуль или огромная часть кода. Если вам нужно переименовать переменную или метод, не стоит копаться в десятках файлов — VS Code сделает это за вас.

Выделите переменную или метод, и нажмите F2, чтобы отредактировать имя. Каждый экземпляр этой переменной будет переименован, во всём текущем проекте.

Чтобы отредактировать только в текущем файле, используйте Command + F2 (на Mac) или Ctrl + F2 (на Windows), и VS Code переместит курсор к каждому экземпляру в файле.

Перейти к определению

В процессе написания кода, часто, вы натыкаетесь на незнакомую переменную или метод. Что вы делаете в этом случае? Можно несколько минут искать нужный файл, или просто зажать Command (на Mac) или Ctrl (на Windows) и кликнуть на переменную/метод. VS Code мгновенно перенесёт вас к её определению.

Или вы можете навести курсор с зажатым Command (на Mac) или Ctrl (на Windows), на переменную или метод. Определение переменной появится прямо в строке, где находится курсор.

Редактирование нескольких строк одновременно

Если вам понадобится вставить или удалить несколько экземпляров текста в документе, то всё что вам нужно сделать, это создать несколько курсоров. Для этого кликните в тексте с зажатым Option (на Mac) или Alt (на Windows). Каждый клик, создаст новый курсор.

Это особенно полезно в работе с HTML, когда может понадобится добавить много экземпляров одного и того же класса или изменить формат нескольких гиперссылок.

Debugger

По отладке стоит записать отдельное видео. К счастью, в VS Code это уже сделали.

Горячие клавиши и Command Pallette

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

Command Pallette — ваш лучший друг. Открывается с помощью Command + P (на Mac) или Ctrl + P (на Windows). Будучи разработчиком, вы наверняка работаете со множеством файлов одновременно. Начните вводить имя файла, и получите результаты поиска прямо в рабочей области. Это намного быстрее, чем кликать по дереву каталогов.

Пользовательские комбинации клавиш

Одной комбинации в VS code точно не хватает — это Save All. Создайте свою собственную комбинацию, чтобы сохранять файлы нажатием Command + Shift + S (на Mac) или Ctrl + Shift + S (на Windows).

How to do tag wrapping in VS code?

I would like to wrap my selected html within a tag in VS code. How do I do that?

and include inside ** with this result

8 Answers 8

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Embedded Emmet could do the trick:

Command can be assigned to a keybinding.

This thing even supports passing arguments:

Use it like this:

Launch VS Code Quick Open ( Ctrl + P )

paste ext install htmltagwrap and enter

press Alt + W ( Option + W for Mac).

tags, instead of the generic

My selected text.

As I can’t comment, I’ll expand on Alex’s fantastic answer.

If you want the Sublime-like experience with wrapping, open up the Keyboard Shortcuts ( command ⌘ / Ctrl + shift + P > Preferences: Open Keyboard Shortcuts (JSON)) and add the following object:

Which will bind the Emmet wrap command to option ⌥ / Alt + W when text is selected.

You can also use the UI to do this, open the Keyboard Shortcuts menu and search for «emmet wrap with abbreviation» to add the shortcut.

Как сделать отступ / форматировать выделенный код в Visual Studio Code с помощью Ctrl + Shift + F

Я хочу сделать отступ для определенного раздела кода в Visual Studio Code.

Я попробовал Ctrl + Shift + F после выбора какой-то строки в моем коде, но весь файл имеет отступ. Я использую Windows с Visual Studio Code Insider 1.8.0. Как мне это сделать?

6 ответов

Я хочу сделать отступ в определенном разделе кода в Visual Studio Code:

Если вы хотите отформатировать раздел (вместо отступа):

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

До сих пор меня беспокоит проблема с отступами при копировании и вставке блока кода. Если это так, вот как вы это решите: Visual Отступы в Studio Code для Python

В OS X выберите «Формат документа» и выберите все строки, которые вам нужно отформатировать.

(Это работает как минимум до версии 1.45.0, 7 мая 2020 г.)

В macOS Visual Studio Code версии 1.36.1 (2019)

Чтобы автоматически форматировать выделение, используйте ⌘K ⌘F (хитрость в том, что это нужно делать последовательно, сначала ⌘K, а затем ⌘F).

Чтобы просто сделать отступ (сдвинуть вправо) без автоматического форматирования, используйте ⌘]

Как в сочетаниях клавиш (⌘K ⌘S или из меню, как показано ниже)

Это должно иметь возможность установить любые сочетания клавиш, которые вы хотите для отступа / отступа здесь:

Меню Файл → Настройки → Сочетания клавиш

How to Refactor Code in Visual Studio Code

This article looks at how you can refactor your code using Visual Studio Code (VS Code) and Visual Studio Code plugins.

Refactoring improves the code’s internal structure according to best practices or rules without altering the current behavior.В

You often see development teams plan a refactoring week to evaluate the code architecture and internal structure before starting a new development cycle. It’s important for engineering teams to address technical issues continuously and have regular discussions about maintenance and code quality.

Code refactoring is an important activity to improve the code’s quality and maintainability. It’s much easier to build new features on top of clean code, but it will also benefit you when writing tests.

This article looks at:

1. Refactoring with Visual Studio Code Shortcuts

First of all, let’s use Visual Studio Code’s native shortcuts to do some basic code refactoring. We’ve created a small code example using JavaScript to help you play around wth these functionalities.

There’s an index.js file that contains the business logic. We import a `userModule`, retrieve a new user object, and convert the user’s name to uppercase.

Furthermore, here’s the implementation of the `userModule`, which contains several exported functions that we use in our `index.js` file. The file is nested in two folders. The resulting path is `/modules/users/retrieve.js`.

Now, let’s right-click on the `getUser` function in the `index.js` file. You’ll see different options that can help us with refactoring the code. Here’s a shortlist:

The above commands are most useful for quickly navigating and finding function definitions in Visual Studio Code. For instance, you want to figure out in which files a particular function has been used. Therefore, you can use the above commands to quickly solve such tasks.

2. Automatically Fix Imports and Filenames

When refactoring code, developers often can’t resist criticizing poorly chosen filenames. On top of that, refactoring code means that you are shifting code between different files and changing the purpose of certain modules. Therefore, broken imports are all too common when code refactoring has finished.В

To save you from the trouble of manually scanning through all files to find spot broken imports, Visual Studio Code can help you with this. When you change a filename for the first time in Visual Studio Code, it will ask you to update imports automatically. Here, choose the “Always automatically update imports” option. You can try this out by renaming the `retrieve.js` file from the previous example.

Now, create a new folder and move the `retrieve.js` file to this folder. When doing so, VS Code will show you another pop-up message asking you if you want to automatically update imports when moving files. Again, select the “Always automatically update imports” option. That’s it!

3. Built-in Code Formatting by Visual Studio Code

From the VS Code documentation, we can read how the built-in formatting option works.

> VS Code has default formatters for JavaScript, TypeScript, JSON, and HTML. Each language has specific formatting options (for example, `html.format.indentInnerHtml`) which you can tune to your preference in your user or workspace settings.В

To trigger the formatting option, you can open the Command Palette (shift + CMD + P) and look for the option “Format Document”. Select this option to format your document. Most likely, this won’t change much to your code except for fixing some indentation issues.

If you want Visual Studio Code to automatically trigger the “Format Document” option whenever you make changes to a file, you can configure this via the user settings. We prefer to format the document whenever hitting the save button (CMD + S). To do so, open your user settings and look for the rule `editor.formatOnSave`. Click the checkbox next to the rule to enable it.

Alternatively, you can choose for `editor.formatOnType`, which formats a line after typing, or `editor.formatOnPaste`, which formats content when you paste it in your editor.

When choosing a formatting rule, you don’t need to do anything else to enable this rule.

4. Use Plugins That Make Refactoring Easy

1) Stepsize‍

Stepsize allows Engineers to easily report technical debt and code to refactor. If you come across code that requires refactoring you can make it visible and raise an issue directly from VSCode or JetBrains.

2) Prettier ESLint

We don’t need to use the built-in code formatting tool provided by VS Code. We can disable the default language formatter and replace it with a custom language formatter or one provided by an extension like Prettier.

To enable the Prettier formatter as our default formatter for all languages, we have to open the user settings again. Look for the following rule `editor.DefaultFormatter` and pick the Prettier formatter called `esbenp.prettier-vscode`.

We need to add Prettier configuration rules to tell Visual Studio Code how to format our document now. The easiest way to do so is by creating a `.prettierrc`configuration file in the root of the project. This file will contain a JSON object which holds all the active rules. The advantage of this approach is that you can commit the configuration file to your repository to enforce the same coding standards across your team. This standardization will reduce refactoring work in the future.

Here are some popular rules that can help you to refactor code quickly:

3) JavaScript Booster‍

JavaScript Booster is a code refactoring tool that features several coding actions such as converting var to const or let, removing redundant else statements, and merging declaration and initialisation. Just note the light bulb at the left and press it to learn how you can transform the code under the cursor.

4) SonarLint‍

SonarLint lets you fix coding issues before they exist: like a spell checker, SonarLint highlights Bugs and Security Vulnerabilities as you write code, with clear remediation guidance so you can fix them before the code is even committed. SonarLint in VS Code supports analysis of JavaScript, TypeScript, Python, Java, HTML & PHP code.

Is Refactoring Fun?

Yes, refactoring should be fun! First of all, it gives developers a break to evaluate their code, improve, and learn from their mistakes. On top of that, developers like to start from a clean codebase rather than developing new features on top of a messy codebase.

When it comes to refactoring tools and plugins, you have many options to choose from.

If you want to make significant gains quickly, we recommend using Prettier. It’s a powerful refactoring tool that also helps to enforce coding style standards across your team using a Prettier configuration file. Not to mention that VSCode offers a couple of useful refactoring functions like finding all references for a function or automatically fixing imports.

Кодировки и окончания строк

В Visual Studio следующие символы интерпретируются как разрывы строк:

CR LF: возврат каретки + перевод строки, символы Юникода 000D + 000A

LF: перевод строки, символ Юникода 000A

NEL: следующая строка, символ Юникода 0085

LS: разделитель строки, символ Юникода 2028

PS: разделитель абзаца, символ Юникода 2029

Для текста, который копируется из других приложений, сохраняется исходная кодировка и символы разрыва строки. Например, при копировании текста из Блокнота и вставке его в текстовый файл в Visual Studio текст имеет те же параметры, которые применялись в Блокноте.

При открытии файла, который содержит разные символы разрыва строки, может появиться диалоговое окно с запросом о том, следует ли нормализовать несогласованные символы разрыва строки и какой тип разрыва строки выбрать.

Дополнительные параметры сохранения

Чтобы определить тип символов разрыва строки, можно использовать параметры в диалоговом окне Файл>Дополнительные параметры сохранения. Кроме того, с помощью этих параметров можно изменить кодировку файла.

Если в меню Файл пункт Дополнительные параметры сохранения отсутствует, его можно добавить.

Кроме того, чтобы открыть диалоговое окно Дополнительные параметры сохранения, можно выбрать пункт меню Файл>Сохранить как. В диалоговом окне Сохранить файл как щелкните треугольник раскрывающегося списка рядом с кнопкой Сохранить и выберите пункт Сохранить с кодировкой.

Есть ли сочетание клавиш, чтобы выровнять содержимое кода в Xcode?

есть ли какая-либо клавиша быстрого доступа для выравнивания кода в Xcode? Так же, как Ctrl+K+D в Visual Studio?

9 ответов

это приведет к повторному отступу строки курсора, если текст не выбран, или к повторному отступу вашего выбора.

Если вы хотите больше, чем просто отступ Xcode еще не предлагает встроенное форматирование кода, но вы можете использовать внешние инструменты, такие как Uncrustify для применения согласованного стиля кода.

использовать по умолчанию » COMMAND [« и » COMMAND ]»
Просто!

1.) Выберите текст, который вы хотите выровнять,

есть команда меню:

редактировать>формат>Повторно Отступ

Я не думаю, что на нем есть ярлык по умолчанию, но вы можете легко создать его на вкладке привязки клавиш в настройках Xcode.

как говорит @McGordon, Control + i работает над отступом.

(начиная с Xcode 4.1) его там в меню на

выберите текст, который вы хотите выровнять, а затем нажмите Control (ctrl) + I.

Если вы хотите изменить это, то:

10 рекомендаций по ускорению рабочего процесса в Visual Studio Code

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

Visual Studio Code стал популярен среди редакторов кода с момента своего появления. Я же долгое время сопротивлялась и не хотела его осваивать, причем не из-за возможной сложности, а скорее из-за того, что весь мой рабочий процесс уже был идеально отлажен в Sublime.

В то время, как процесс работы и написания кода оставался прежним вне зависимости от того, каким редактором я пользовалась — моя итоговая производительность резко снизилась в течение первой недели использования VSC.

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

В конце концов я вышла на привычный рабочий ритм и вряд ли когда-нибудь захочу использовать другой редактор. Visual Studio Code — это бесплатный, надежный и легковесный программный продукт, который также имеет крупное сообщество пользователей. Его можно причислить к списку самых удачных детищ Microsoft.

Ниже я указала 10 полезных рекомендаций, которые помогли мне и помогут вам ускорить процесс написания кода.

1. Сниппеты

Сниппеты являются основным ускорителем продуктивности, т.к. избавляют вас от большей части ручного ввода. Сперва это может показаться неким жульничеством, но вы смиритесь, как только столкнетесь с необходимостью постоянного повторения, например, при вводе переключателей для представлений в Angular.

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

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

Применение сниппетов также может помочь вам освоить новый фреймворк или библиотеку.

С Vue я еще не работала, но судя по указанным данным, набор Vue 2 Snippets от hollowtree был установлен более 900 000 раз, зарекомендовав себя как весьма многообещающее расширение.

2. IntelliSense

Intellisense — это просто модное название автодополнения. Тем не менее работает оно гораздо продуманнее стандартного.

Преподносится эта функция как одна из существенно влияющих на продуктивность всего процесса работы в Visual Studio Code. Несмотря на это, многие пользователи редактора не применяют ее должным образом.

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

Например, когда вы начинаете прописывать объект, она выдает вам список потенциально подходящих методов. Чем больше знаков вы введете, тем точнее станет список предлагаемых вариантов, и вам останется только выбрать в нем подходящий. Если же вы не уверены, то документация с пояснениями по каждому методу также находится под рукой.

Для тех, кто приступает к работе с VS Code на базе знания Java или C++, эта возможность не станет новшеством. Я применяла нечто подобное, когда работала с Eclipse. Что же касается проектов в JavaScript — эта возможность, наряду с удобным перемещением между связанными элементами кода, существенно ускоряет процесс.

3. Встроенный терминал

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

Изначально он запускается с указанием корневой директории вашего рабочего пространства.

4. Просмотр ссылок и обновление имен

Когда вы работаете над крупным проектом, то некоторые классы, методы и другие элементы могут быть задействованы во множестве мест. VSC позволяет вам просмотреть сформированный список мест использования той или иной ссылки и быстро отследить ее изначальный источник.

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

5. Форматирование и контроль технического долга

Форматирование кода может вызвать массу сложностей. Без сомнений, линтеры могут справиться с этой задачей, но в большинстве случаев вам придется запускать их отдельно.

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

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

Несмотря на то, что инструменты форматирования могут помочь сократить число командных аргументов и улучшить внешний вид кода, они никак не устранят технический долг. Поэтому следующее расширение, которое я вам представлю контролирует технический долг.

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

6. Горячие клавиши

Каждый раз, когда ваши пальцы покидают клавиатуру, время написания кода увеличивается на несколько секунд. Это может казаться незначительным, но смена положения рук или переключение на другую задачу могут вывести вас из состояния потока.

Многие разработчики стремятся все делать с клавиатуры — просто потому, что так быстрее.

Использование горячих клавиш экономит ваше время, которое в противном случае вы тратите на поиск нужных пунктов меню или файлов.

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

Здесь вы найдете расширения для перенастройки встроенных горячих клавиш в Visual Studio Code.

7. Режим дзен

Этот режим разворачивает ваш редактор на весь экран. Для его активации вместо стандартного нажимания трех клавиш, вам потребуется набрать серию команд.

Существует несколько различных вариантов это сделать. Для начала нужно заглянуть в раздел горячих клавиш.

Режим дзен поможет вам удерживать состояние потока и оградит от многих отвлекающих элементов вроде браузера или почтовых сообщений.

8. Git

VSC поддерживает git и позволяет производить все привычные коммиты, не выходя из его интерфейса. Стейдж, коммит, откат, комментарии — эти и другие возможности, доступные из командной строки, можно задействовать прямо из редактора.

Для этого достаточно нажать на добавление файла (плюс), а затем правой кнопкой на сам файл для вызова возможных опций.

Несмотря на то, что все это можно сделать из консоли или через десктопные приложения GitHub, возможность выполнения или внесения изменений, не выходя из редактора, позволит ускорить рабочий процесс..

9. Дебаггер

Visual Studio Code оснащен дебаггером, который позволяет вам назначать точки прерывания выполнения кода для тех мест, где вы хотите проанализировать происходящее более подробно.

Процесс дебаггинга подразумевает гораздо больше, чем просто проверку посредством консоли разработчика в Chrome. К примеру, вы предполагаете в каком месте могла возникнуть проблема: в определенной строке, функции или методе.

В таких случаях остановка кода в назначенных точках дает вам возможность устранить эту проблему прямо во время его выполнения, а также проверить локальное состояние, состояния вызовов и другие компоненты.

Вы также можете открыть консоль и просмотреть текущее состояние, используя соответствующие запросы.

По умолчанию VSC запускает дебаггер на основе Node.js, но вы также можете запустить его на базе самого Chrome. В обычном режиме у вас нет возможности приостанавливать выполнение вашего приложения, но с помощью дебаггера вы с легкостью сможете это сделать, назначив точки прерывания.

В то же время вы получаете возможность более пристально оценить различные элементы кода и их состояния в тех или иных местах.

Если вы установите расширение GitLens, то сможете получать больше информации о коммитах: кто и что сделал, удаленные репозитории, тэги, а также записанные и не записанные в них изменения. Помимо этого оно сопроводит ваш код сообщениями от git, указывающими время и ID коммита, внесенные изменения и создателя. Достаточно будет просто навести на интересующий элемент кода и вы увидите дополнительную информацию.

10. Live Share

Пробовали ли вы когда-нибудь редактировать Google Docs совместно с кем-нибудь еще? Live share работает по тому же принципу, только связь устанавливается через ваш аккаунт Azure или GitHub.

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

Live share нет в Visual Studio Code по умолчанию, но легко устанавливается в виде расширения. Скачать его можно здесь.

Заключение

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

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

Vertical rulers in Visual Studio Code

Rendering More than One Ruler in VS Code

VS Code’s default configuration for a ruler is demonstrated below.

The issue I am having with the default VS Code configuration (as shown above) is that it only renders a single ruler. In the Sublime Text Editor I can render as many rulers as I like using the following Sublime configuration.

Is it possible to render multiple rulers in V.S. Code. If it is possible, What does a multi-ruler configuration look like in VS Code?

10 Answers 10

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

Visual Studio Code 0.10.10 introduced this feature. To configure it, go to menu File → Preferences → Settings and add this to to your user or workspace settings:

The color of the rulers can be customized like this:

In addition to global «editor.rulers» setting, it’s also possible to set this on a per-language level.

For example, style guides for Python projects often specify either 79 or 120 characters vs. Git commit messages should be no longer than 50 characters.

With Visual Studio Code 1.27.2:

When I go to File > Preference > Settings, I get the following tab

I type rulers in Search settings and I get the following list of settings

Clicking on the first Edit in settings.json, I can edit the user settings

Clicking on the pen icon that appears to the left of the setting in Default user settings I can copy it on the user settings and edit it

With Visual Studio Code 1.38.1, the screenshot shown on the third point changes to the following one.

The panel for selecting the default user setting values isn’t shown anymore.

In v1.43 is the ability to separately color the vertical rulers.

To change the default color for a ruler:

Visual Studio Code: Version 1.14.2 (1.14.2)

Press Shift + Command + P to open palette

Enter «settings.json» to open setting files.

At default setting, you can see this:

This means the empty array won’t show the vertical rulers.

At right window «user setting», add the following:

Save the file, and you will see the rulers.

To expand on the above, you can set multiple rulers and colors for each ruler. The default color appears to be «#5a5a5a», and if you tack on two additional digits to the end you can adjust its transparency to make some rulers more faint than others.

Here are my rulers, defined in a concise manner that’s easier to edit.

Customizing VS Code’s Char-len Ruler:

The following answer is far more recent than the other answers provided for this question, therefore; it is important to note that this answer contains information & content not provided by any of the other answers. I have formatted the question below into 4 configurations. Each configuration builds on top of the last configuration, consequently; The first configuration is simple, and offers a simple result, whereas the last configuration is more complex and offers much more.

For your convenience, I have included images at the bottom of each configuration’s example. The images allow you to view a configuration, then see the result that the configuration has. This is important, because without the images you would have to bounce back and forth between here & your editor to see what each configuration looks like.

Config #1 | The Obvious Single Ruler Config

The obvious setting is the setting that has been suggested many times over. I will mention it here, just because it is the correct place to start.

PLEASE NOTE! It may be required that you reload the instance of VS Code (semantically speaking: some refer to this as reloading the window) being configured to get the newly added configuration to render as expected. (to see how to reload your window quickly, scroll to the end of this answer).

Once the configuration takes, your editor should look like this:

Config #2 | Multiple Rulers

Obviously the ruler takes an array as its assigned value. The array allows VSC users to add multiple rulers.

The screen shot I took is a bit short, but it communicates the point well enough. You can see that there are now two vertical lines, rather than a single line. Many front-end developers opt for this configuration because 125 is often used as the preferred line-length for HTML, and 80 is the preferred line-length for JavaScript embedded in HTML documents.

Config #3 | Coloring the Ruler

This configuration demonstrates the whimsy side of playing with VS Code’s configuration; and the ruler is certainly one of the more whimsical editor-features that VS Code ships with. This configuration shows you how to color the configuration we used above. To be able to custom color the rulers, it is required that an additional setting be added to the configuration, take a look below:

Below you can see the awesomeness of the pacific blue color!

Config #4 | Coloring the Ruler so it works w/ Code

So, as awesome as beautiful pacific-blue rulers are, they are not always practical. The opaque — and in this case highly contrasted — rulers streak right behind are code which can greatly decrease the readability of your code. For this very reason, developers generally opt for a configuration that places a single ruler at the desired line length, however, there is another way. By adjusting the previous configuration ever so slightly, we can render the rulers in a way that is much less intrusive. Take a look at the configuration below.

Do you see the subtle change?

Below demonstrates where the change was made:

The new configuration’s adjusted chromatic value (the color/hue) renders transparently (or not at 100% opacity), in-other-words; the rulers are rendered to be partially transparent (approximately 25% transparency).

The change has a rather significant effect because opaque rulers hinder readability, and can distract the programmer from her code. A programmer may opt for transparent rulers because transparent rulers will allow her to measure the length of her code at any length intervals she chooses, without hindering the readability of the code.

See the transparent rulers below? You might want to click on the image to see the larger view.

Config #5 | The Ultimate Customized Ruler

The problem with transparent rulers is that they are not quite as fancy as the other rulers, fortunately, there’s a way to get the best of both worlds. This example uses two images (or screen-shots): One image that shows the configuration, just like the other images you have been viewing above, and the other is a final image showing the configuration I use. The configuration I use is shown as a way to help put into perspective what you’re able to accomplish with a good ruler configuration.

Below is a crazy sort of configuration.

I KNOW CRAZY RIGHT?!

This configuration, looks nutter-butter, but it actually produces a very interesting, and highly customized sort of result. I really like this example because it offers a great demonstration of how the ruler array-property configuration works, and what can be accomplished with it.

Here is the result:

Notice what is happening?

Each ruler is brighter than the last. The rulers are doing this because we are laying several transparent rulers over each other. With ever layer the rulers color becomes more saturated. This is an extremely fun effect to play with.

Like I said above, I will show you I use this effect to configure my environment:

Note that I make all of the rulers very transparent except for the last two. This offers a snazy environment, while still keeping things practical. Having several rulers also helps me to format and organize my code. I am so use to having them now that I can hardly stand to work in an environment without them.

Another purpose, Is when I comment, I prefer to end my comments at 70, it helps me visually distinguish between comments and code. When you have the extra lines, there is a good chance you’ll start using them to do all sorts of your own little formatting customs.

The resource below only pertains to those who are in need of instruction on reloading there instance of VS Code.

RELOADING YOUR WINDOW IN VS CODE

Выравнивание кода / Code margin в Visual Studio

Итак когда я раньше программировал в java я делал это в Eclipse. Когда-бы мой код имел все тот же margin мне просто приходилось все подбирать и нажимать Ctrl+i. Сейчас я использую Visual Studio Professional для программирования на языке C++ Вопрос достаточно простой: Как правильно задать margin строчкам кода, чтобы это все выглядело хорошо и я могу легко подсказать какому коду принадлежит внутри какие скобки.

Заранее благодарю, и надеюсь этот вопрос не закрыт. Я пробовал искать ответ, но не нашел ни одного.

3 ответа

Я уже давно неплохо работал с tiger и beamer для слайдов. Одну вещь я сейчас замечаю с R Presentations, что динамическое пролистывание как код-бокса, так и размера шрифта кода вроде как отсутствует. С tiber/beamer я мог легко менять font size с аргументом size (e.g. size=footnote сработало для.

Выбирайте то, что нуждается в форматировании и CTRL+K с последующим CTRL+F.

Выделяете код, который хотите форматировать тогда:

CTRL + K, F или
CTRL + E, F

Форматирует текущее выделение согласно настройкам форматирования отступов и кода, указанным на панели Форматирование в разделе Инструменты|Опции|Текстовый редактор|С/С++.

Вы всегда можете узнать, что такое фактический ярлык и использовать его или кастомизировать его:

Если вы хотите его изменить, используйте новую клавишу ярлыка в поле ‘Press shortcut keys’, затем нажмите ‘Assign’.

Похожие вопросы:

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

Я работаю над open source проектом, который использует горизонтальное выравнивание в source code. Код написан на C++, и я использую Visual Studio 2013. Visual Studio пытается быть умным относительно.

Пробую делать выравнивание vertical declaration в Visual Studio Code. Этот код: struct A < double a; int b; >Должен быть преобразован в этот: struct A < double a; int b; >Учтите, что здесь не.

Я уже давно неплохо работал с tiger и beamer для слайдов. Одну вещь я сейчас замечаю с R Presentations, что динамическое пролистывание как код-бокса, так и размера шрифта кода вроде как отсутствует.

Есть ли ярлык для прыжка за пределы блока кода, прямо после закрывающей фигурной скобки > текущего блока кода? Поясню. Допустим, есть метод: private void Button_Click(object sender, EventArgs e) <.

Может это и как-то причудливо, но я бы хотел написать расширение для Visual Studio 2010, которое имитирует поведение Command Window в Visual Foxpro. Для тех из вас, кто об этом не знает: В Foxpro вы.

Я пишу некоторые юнит тесты используя visual studio 2008 professional edition. Узнал что в visual studio есть встроенная в code coverage утилита однако похоже что эта возможность недоступна с моей.

Я пытаюсь модернизировать старые проекты Visual Studio 6. В них используется дефолтное выравнивание по памяти. Однако, похоже, что дефолды для Visual Studio 6 и 2013 не одно и то же. Кто-нибудь.

Функционал VSCode для повышения продуктивности

Перевод серии статей Сергиу Мурешана «VSCode productivity features».

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

Множественные курсоры в Visual Studio Code

Множественные курсоры очень впечатляют не-программистов, но в нашем мире они довольно давно. Многие люди знают об этом, но не используют полный потенциал этой фичи. Давайте разберемся, что можно делать с множественными курсорами.

1) Добавить курсор над/под (CTRL+ALT+↑/↓)

Это простой функционал, но он прячется за странным сочетанием клавиш, которое переворачивает ваш рабочий стол в направлении стрелки (в Windows). Я всегда переназначаю это сочетание, заменяя его на CTRL+SHIFT+↑/↓.

A post shared by CodeVault (@codevault) on Nov 8, 2018 at 4:28am PST

2) Добавить курсор к следующему вхождению (CTRL+D)

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

A post shared by CodeVault (@codevault) on Oct 5, 2018 at 10:38am PDT

3) Добавить множественные курсоры ко всем вхождениям выделенного текста (CTRL+SHIFT+L)

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

A post shared by CodeVault (@codevault) on Oct 12, 2018 at 5:01am PDT

4) Отменить последнюю операцию курсора (CTRL+U)

Вот об этой функции я долго не догадывался. Здесь все довольно просто. Если вы случайно добавили слишком много курсоров (лишний раз нажав CTRL+D), с помощью CTRL+U вы можете отменить последнее добавление. Это спасет вас от необходимости проходить весь путь выделения и добавления курсоров (теперь только нужных) заново.

A post shared by CodeVault (@codevault) on Nov 9, 2018 at 3:17am PST

Функции поиска в Visual Studio Code

Знаете ли вы, что, помимо поиска строк (в текущем документе или во всех документах), в Visual Studio Code есть еще четыре варианта поиска? Давайте их рассмотрим!

1) Поиск файла (CTRL + P)

Если вы знаете имя файла, то можно сократить время его поиска. Вам не нужно открывать менеджер файлов и выбирать там нужный. Просто нажмите CTRL + P, наберите полное имя или часть имени файла, и VSCode будет автоматически искать этот файл в вашем текущем рабочем пространстве. Он отобразит все файлы, в названии которых содержится указанное вами имя (уже открытые файлы будут вверху списка).

A post shared by CodeVault (@codevault) on Oct 13, 2018 at 5:09am PDT

2) Поиск символа (CTRL + T)

Если вы знаете, к примеру, имя приватной функции, но не знаете точно, где она находится, вам может пригодиться это сочетание клавиш. Просто нажмите их (или откройте палитру команд и поставьте префикс #) и введите имя функции. Вы получите список символов с указанием на местоположение их файлов.

A post shared by CodeVault (@codevault) on Oct 16, 2018 at 4:02am PDT

3) Поиск локального символа (CTRL + SHIFT + O)

Похоже на предыдущий вариант, только поиск происходит по текущему файлу. Также можно открыть палитру команд и ввести @.

А если вы введете в строке поиска @:, то сгруппируете функции по типу значков. Так вам будет легче найти нужную, если вы не знаете ее полного имени.

A post shared by CodeVault (@codevault) on Nov 11, 2018 at 2:49am PST

4) Поиск по ссылке (SHIFT + F12)

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

15 строк кода, чтобы было понятно, как он используется. Вам не придется перемещаться по файлам, чтобы проверить, та ли это ссылка, что вам нужна.

A post shared by CodeVault (@codevault) on Nov 10, 2018 at 1:44am PST

Навигация по коду в Visual Studio Code

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

1) Назад / вперед (ALT + ← / →)

Самый быстрый способ переместиться из одной части файла в другую – с помощью этого сочетания клавиш. Некоторые могут возразить, мол, CTRL + TAB делает то же самое, но эта функция более полная. Она сохраняет историю о местах одного файла, и эта история сохраняется даже после применения данного шортката (вы можете перемещаться туда-сюда, а история не изменится).

Рефакторинг для реализации переноса, отступа и выравнивания

Сворачивание и выравнивание цепочек вызовов

Область применения этого рефакторинга:

Что? Позволяет сворачивать и выравнивать цепочки вызовов методов.

Когда? Имеется длинная цепочка, состоящая из нескольких вызовов методов в одной инструкции.

Зачем? Читать длинный список будет проще, если используется сворачивание или отступ в соответствии с предпочтениями пользователя.

Практические советы

Поместите курсор в любую цепочку вызовов.

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Выберите Свернуть цепочку вызовов или Свернуть и выровнять цепочку вызовов, чтобы принять рефакторинг.

Аргументы или параметры переноса, отступа и выравнивания

Область применения этого рефакторинга:

Что? Обеспечивает параметры или аргументы переноса, отступа и выравнивания.

Когда? У вас есть объявление метода или вызов, который имеет несколько параметров или аргументов.

Зачем? Читать длинный список параметров или аргументов будет проще, если используется перенос или отступ в соответствии с предпочтениями пользователя.

Практические советы

Поместите курсор в список параметров.

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Выберите Переносить каждый параметр, чтобы принять рефакторинг.

Перенос двоичных выражений

Область применения этого рефакторинга:

Что? Позволяет выполнять перенос двоичных выражений.

Когда? У вас есть двоичное выражение.

Зачем? Читать двоичное выражение проще, когда оно переносится в соответствии с параметрами пользователя.

Практические советы

Поместите курсор в двоичное выражение.

Нажмите CTRL+., чтобы открыть меню Быстрые действия и рефакторинг.

Выберите Перенос выражения, чтобы принять рефакторинг.

Как вы форматируете код в Visual Studio Code (VSCode)?

Что эквивалентно Ctrl + K + F и Ctrl + K + D в Windows в Visual Studio для форматирования или «украшения» кода в редакторе кода Visual Studio?

Форматирование кода доступно в Visual Studio Code с помощью следующих ярлыков:

Для несохраненных фрагментов

Открыть палитру команд (Win: F1 или Ctrl + Shift + P )

Найдите «Изменить языковую модель»

Неформатировать

‘ Покажи картинки ‘

Ярлык форматирования кода:

Вы также можете настроить этот ярлык, используя настройку предпочтений, если это необходимо.

Форматирование кода при сохранении файла:

Visual Studio Code позволяет пользователю настраивать параметры по умолчанию.

Если вы хотите автоматически форматировать контент при сохранении, добавьте приведенный ниже фрагмент кода в настройки рабочего пространства Visual Studio Code.

Меню Файл → Настройки → Настройки рабочего пространства

Примечание: теперь вы можете автоматически форматировать файлы TypeScript. Проверьте мое обновление.

Вы можете добавить привязку клавиш в меню Файл → Настройки → Сочетания клавиш.

Или Visual Studio, например:

Visual Studio Code 1.6.1 поддерживает « Формат при сохранении », который автоматически выбирает соответствующие установленные расширения средства форматирования и форматирует весь документ при каждом сохранении.

Включите «Форматировать при сохранении», установив

И есть доступные сочетания клавиш (Visual Studio Code 1.7 и выше):

Отформатируйте весь документ : Shift + Alt + F

Для других языков вам может потребоваться установить определенный языковой пакет.

Мое чтение «key»: «ctrl+shift+i»

You can add a keybinding in «Preferences->Keyboard shortcuts»

Or Visual Studio like:

Обратите внимание: cmd ключ только для Mac. Для Windows и Fedora (клавиатура Windows) используйте Ctrl

РЕДАКТИРОВАТЬ :

В соответствии с версией Visual Code 1.28.2 это то, что я нашел.

Введите текст editor.action.format в поле поиска, чтобы просмотреть существующие ярлыки.

Чтобы изменить комбинации клавиш, выполните следующие действия:

Меню Файл → Настройки → Настройки

Когда вы вводите точку с запятой, она будет отформатирована.

Просто щелкните текст правой кнопкой мыши и выберите «Форматировать код».

Shift + Alt + F отлично справляется со своей задачей в версии 1.17.2 и выше.

По какой-то причине Alt + Shift + F не работал у меня на Mac Visual Studio Code 1.3.1, а на самом деле команда «Форматировать документ» вообще не работала. Но команда Formatter работала очень хорошо.

Таким образом, вы можете использовать Command + Shift + P и ввести Formatter или создать свой собственный ярлык в меню File → Preferences → Keyboard Shortcuts → Command + K Command +, S затем набрать Formatter и добавить свой ярлык.

Код форматирования в Visual Studio.

Я пробовал форматировать в Windows 8.

Просто следите за скриншотами ниже.

Нажмите «Просмотр» в верхней строке меню, а затем нажмите «Палитра команд».

Затем появится текстовое поле, где нам нужен тип Format.

В Visual Studio Code Shift + Alt + F делает то, что Ctrl + K + D делает в Visual Studio.

Самый простой способ, который я использую в Visual Studio Code (Ubuntu):

Выделите текст, который вы хотите отформатировать, с помощью мыши.

Вы всегда можете проверить привязки клавиш в меню:

Меню Файл → Настройки → Сочетания клавиш и фильтрация по ключевому слову «формат».

Хотя для изменения поведения по умолчанию для Visual Studio Code требуется расширение, вы можете переопределить поведение по умолчанию в рабочей области или на уровне пользователя. Он работает для большинства поддерживаемых языков (я могу гарантировать HTML, JavaScript и C #).

Уровень рабочего пространства

Преимущества

Итоги

Как?

Перейдите в: Файл меню → Настройки → Настройки рабочего пространства.

Уровень пользовательской среды

Преимущества

Итоги

Как?

Перейдите в: меню Файл → Настройки → Пользовательские настройки.

Добавьте или измените значение «editor.formatOnType»: false на «editor.formatOnType»: true в файле settings.json пользователя.

settings.json Местоположение вашего пользователя Visual Studio Code :

Расположение файлов настроек в зависимости от вашей платформы, файл пользовательских настроек находится здесь:

Есть ли горячая клавиша для выравнивания содержимого кода в Xcode?

Есть ли комбинация клавиш для выравнивания кода в Xcode? Как и Ctrl + K + D в Visual Studio?

⌃ + i ( ctrl + i ) – это комбинация клавиш, эквивалентная редактору > Структурa > Отступ (в Xcode 6.4)

Это приведет к повторному отступлению строки, в которой курсор включен, если текст не выбран, или он будет отступать от вашего выбора.

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

Использовать по умолчанию, “КОМАНДА [” и “КОМАНДА]”
Простой!

1.) Выберите текст, который вы хотите выровнять,

Есть команда меню:

Изменить > Формат > Повторный отступ

Я не думаю, что по умолчанию есть ярлык, но вы можете легко создать его на вкладке “Ключевые привязки” в настройках Xcode.

как говорит @McGordon, Control + я работает с отступом.

(Начиная с Xcode 4.1) его там в меню

Редактор → Структура → Повторный отступ

Выберите текст, который вы хотите выровнять, а затем нажмите Ctrl (Ctrl) + I.

Установленный по умолчанию способ Xcode – использовать Control + я (также известный как ^ + i)

Если вы хотите изменить это, выполните следующие действия:

Узнайте, как использовать редактор кода для JavaScript

В этом кратком руководстве по редактору кода Visual Studio мы рассмотрим несколько методов, которые упрощают написание, понимание кода и навигацию по нему в Visual Studio.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. В зависимости от методов, используемых для разработки приложений, вам может потребоваться установить вместе с Visual Studio рабочую нагрузку Разработка Node.js. Дополнительные сведения о получении языковой службы для TypeScript см. в разделе Поддержка TypeScript.

В этой статье предполагается, что вы уже знакомы с основами разработки на JavaScript. Если это не так, мы рекомендуем сначала изучить руководство по созданию приложения Node.js и Express.

Добавление нового файла проекта

С помощью интегрированной среды разработки вы можете добавить в проект новый файлы.

Открыв проект в Visual Studio, щелкните в обозревателе решений (панель справа) папку или узел проекта правой кнопкой мыши, а затем выберите Добавить>Новый элемент.

В диалоговом окне Новый файл выберите в категории Общие нужный тип файла для добавляемого файла, например Файл JavaScript, а затем щелкните Открыть.

Это действие добавляет в проект новый файл и открывает его в редакторе.

Использование IntelliSense для завершения слов

IntelliSense также может отображать сведения о типах при наведении указателя мыши на элементы программы.

Чтобы предоставить IntelliSense нужную информацию, языковая служба может использовать файлы TypeScript d.ts и комментарии JSDoc. Для самых распространенных библиотек JavaScript автоматически извлекаются файлы d.ts. Дополнительные сведения о получении информации для IntelliSense см. в статье IntelliSense для JavaScript. Если вы заинтересованы в программировании на AngularJS в Visual Studio, для получения IntelliSense можно использовать расширение языковой службы AngularJS для Visual Studio.

Проверка синтаксиса

Языковая служба использует ESLint для проверки синтаксиса и анализа кода. Если вам потребуется задать параметры для проверки синтаксиса в редакторе, выберите Средства>Параметры>JavaScript/TypeScript>Анализ кода. Параметры анализа кода приведут вас к глобальному файлу конфигурации ESLint.

В следующем коде синтаксис выражения выделяется зеленым цветом (зеленой волнистой линией). Наведите указатель на подсветку синтаксиса.

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

См. дополнительные сведения об анализе кода.

Закомментирование кода

Панель инструментов, которая находится в строке кнопок под строкой меню в Visual Studio, поможет повысить продуктивность написания кода. Например, можно переключить режим завершения IntelliSense (IntelliSense — это помощник в написании кода, который отображает список подходящих методов и многое другое), увеличить или уменьшить отступ строки или закомментировать код, который вы не хотите компилировать. В этом разделе мы закомментируем код.

Выберите одну или несколько строк кода в редакторе, а затем нажмите кнопку Закомментировать выбранные строки в панели инструментов. Если вы предпочитаете использовать клавиатуру, нажмите Ctrl+K, Ctrl+C.

Свертывание блоков кода

Чтобы не перенасыщать представление определенных сегментов кода, можете свернуть их. Выберите небольшое серое поле со знаком «минус» внутри в поле первой строки функции. Или, если вы предпочитаете использовать клавиатуру, поместите курсор в любое место кода конструктора и нажмите клавиши CTRL+M, CTRL+M.

Просмотр определений

В редакторе Visual Studio можно легко проверить определение типа, функции и т. д. Один из способов заключается в том, чтобы перейти к файлу с нужным определением, например, выбрав Перейти к определению в любом месте, где используется нужный элемент программы. Сделать это еще быстрее и даже без перемещения фокуса с рабочего файла можно с помощью команды Показать определение. Давайте рассмотрим определение метода render в приведенном ниже примере.

Щелкните render правой кнопкой мыши и выберите пункт Показать определение в контекстном меню. Или нажмите Alt+F12.

Закройте окно просматриваемого определения, щелкнув небольшое поле со знаком «x» в его правом верхнем углу.

Использование фрагментов кода

Поместите курсор в то место, куда вы намерены добавить фрагмент кода, щелкните здесь правой кнопкой мыши и выберите Фрагмент>Вставить фрагмент.

В редакторе отобразится поле Вставить фрагмент. Выберите Общие и дважды щелкните в списке элемент for.

Это действие добавляет в код цикл for :

Вы можете просмотреть фрагменты кода, доступные для используемого языка, выбрав Изменить>IntelliSense>Вставить фрагмент и указав папку вашего языка.

Форматирование кода в Visual Studio Code с помощью ESLint

Если вы пишете JavaScript в редакторе, например в Visual Studio Code, у вас есть несколько способов убедиться, что ваш код имеет правильный синтаксис и соответствует передовым практикам. Для этого можно использовать линтер. Линтеры – это программы, которые проверяют ваш код на наличие синтаксических ошибок и выделяют их, чтобы вы могли быстро их найти и исправить. ESLint – это линтер, который вы можете интегрировать в Visual Studio Code, чтобы обеспечить целостность вашего кода.

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

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

Требования

1: Создание простого кода JavaScript

Мы начнем с подготовки тестового проекта, на примере которого рассмотрим функции линтера. Создайте для своего проекта каталог с помощью следующей команды:

Теперь, когда папка для проекта готова, перейдите в нее:

Находясь внутри каталога linting, создайте файл JavaScript по имени app.js:

Откройте app.js в Visual Studio Code. Поместите следующий код JavaScript в файл app.js:

const name = ‘James’

const sayHelloLinting = (fName) => <

С точки зрения форматирования вы можете сразу заметить несколько вещей, которые можно улучшить:

Подготовив этот файл JavaScript, вы можете инициализировать этот проект. Для этого вернитесь в командную строку и в каталоге linting выполните следующую команду:

Команда npm init при инициализации вашего проекта создаст в каталоге linting файл package.json. В package.json будут храниться зависимости и другие важные параметры конфигурации вашего проекта.

Теперь, когда тестовый проект JavaScript готов, мы можем установить ESLint.

2: Установка и настройка ESLint

Чтобы установить ESLint, введите:

В эту команду важно включить флаг –save-dev, поскольку он сохраняет пакет как зависимость разработки – и тогда он будет использован только в разработке, но не в производстве. Пакет eslint нужен только тогда, когда вы активно работаете над кодом и вносите изменения в свой проект. Как только ваш проект будет на стадии производства, eslint больше не понадобится. И флаг –save-dev гарантирует, что eslint будет указан в вашем файле package.json только как зависимость разработки.

Теперь, когда ESLint установлен, вы можете инициализировать конфигурацию ESLint для своего проекта, используя для этого следующую команду:

Прежде чем вы сможете получить доступ к своему конфигурационному файлу ESLint, программа задаст вам несколько вопросов о проекте. Эти вопросы помогут программе убедиться, что конфигурация, инициализированная для вашего проекта, наилучшим образом соответствует требованиям.

Первый вопрос будет выглядеть так:

? How would you like to use ESLint? …

To check syntax only

To check syntax and find problems

❯ To check syntax, find problems, and enforce code style

Здесь мы выберем To check syntax, find problems, and enforce code style – чтобы программа проверяла синтаксис, сообщала о проблемах и поддерживала единый стиль кода.

Следующий вопрос выглядит так:

What type of modules does your project use? …

JavaScript modules (import/export)

Выберите опцию CommonJS, чтобы использовать глобальные переменные CommonJS.

В следующем вопросе будет сказано:

? Which framework does your project use? …

Выберите вариант None of these.

Затем программа спросит:

? Does your project use TypeScript? › No / Yes

Выберите вариант No.

Затем появится такой вопрос:

? Where does your code run? … (Press to select, to toggle all, to invert selection)

Затем вы увидите такой вопрос:

✔ How would you like to define a style for your project? …

❯ Use a popular style guide

Answer questions about your style

Inspect your JavaScript file(s)

Выберите ответ Use a popular style guide.

Which style guide do you want to follow?

Ответьте Airbnb: https://github.com/airbnb/javascript.

Затем будет такой вопрос:

? What format do you want your config file to be in? …

Нужно выбрать JSON.

Вы получите такое сообщение:

Checking peerDependencies of eslint-config-airbnb-base@latest

The config that you’ve selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2

Последний вопрос программы выглядит так:

? Would you like to install them now with npm? › No / Yes

Выберите вариант Yes, чтобы установить зависимости с помощью npm.

Вам также будет предложено установить дополнительные пакеты. Выберите yes.

3: Настройка ESLint

Чтобы интегрировать ESLint в Visual Studio Code, вам необходимо установить расширение ESLint для VS Code. Вернитесь в Visual Studio Code и найдите ESLint во вкладке Extensions. После того, как вы найдете это расширение, нажмите Install.

После установки расширения ESLint вы заметите красочное подчеркивание в файле app.js – это линтер выделил ошибки в файле. Отметки в ESLint имеют разные цвета в зависимости от степени серьезности. Если вы наведете курсор на подчеркнутый код, вы увидите сообщение, объясняющее вам ошибку. Таким образом, ESLint помогает находить ошибки в коде и устранять их.

ESLint может сделать для вас даже больше: к примеру, он может автоматически исправлять ошибки при каждом сохранении файла (для этого требуется отдельная настройка).

4: Форматирование при сохранении

Чтобы ESLint мог автоматически исправлять синтаксис и устранять ошибки форматирования при каждом сохранении, вам нужно открыть меню настроек. Меню в Visual Studio Code – это значок шестеренки в левом нижнем углу. Нажмите его и выберите Settings.

В меню настроек найдите Code Actions on Save. Первой идет опция Editor: Code Actions on Save, а ниже – Edit in settings.json, и как раз она нам нужна.

Файл settings.json откроется в редакторе кода. Чтобы ESLint исправлял ошибки при сохранении файла, вам нужно добавить следующий код в settings.json:

С помощью этого кода ESLint сможет автоматически исправляет ошибки и проверяет JavaScript при сохранении.

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

ESLint автоматически будет устранять синтаксические ошибки при сохранении файла app.js. Но пока у нас еще остались сообщения об ошибках. Их можно исправить, настроив ESLint для обнаружения или игнорирования определенных ошибок и проблем с форматированием.

5: Пользовательская настройка ESLint

«Из коробки» ESLint подчеркивает все операторы console.log() в app.js. В некоторых случаях распознавание операторов console.log в качестве ошибки может быть не в приоритете. Вы можете игнорировать операторы console.log.

Если вы не хотите подчеркивать операторы console.log как ошибки, вы можете назвать правило no-console и указать это имя в качестве ключа. Используйте off как значение:

Это правило удаляет подчеркивание операторов console.log в app.js.

Некоторые правила требуют нескольких фрагментов данных, включая уровень серьезности и значение. К примеру, чтобы указать тип кавычек, которые вы хотите использовать в своем коде, вы должны передать и выбранный тип кавычек, и уровень серьезности:

Если теперь вы включите в код одинарные кавычки, ESLint выдаст ошибку.

Заключение

Это руководство вкратце знакомит с некоторыми функциями интеграции ESLint в Visual Studio Code. Инструменты линтинга, такие как ESLint, помогут вам сэкономить время для более сложных задач за счет автоматизации и упрощения проверки синтаксиса и остальных требований к коду.

Если вам нужна дополнительная информация о правилах и о том, какие пары «ключ-значение» вы можете использовать для настройки ESLint, вы можете ознакомиться с документацией.