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

03.09.202203.09.2022 admin 0 Comments

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

How to toggle Auto Save in VS Code

February 9, 2022

February 8, 2022

February 9, 2022

September 7, 2021

September 13, 2021

September 23, 2021

To turn on or turn off the Auto Save feature in Visual Studio Code, go to File and click on Auto Save from the drop-down menu:

The steps are completely the same in Windows and macOS.

If you want to config the Auto Save behavior deeper, go to:

Search for “auto save” then head to the Files: Auto Save area:

From the drop-down select menu, you can see the following options:

Pick an option that suits your needs.

Further reading:

You can also check out our Visual Studio Code topic page for more tips and tricks to improve your producibility and coding experience.

Is it possible to automatically save all changed files before build? It’s a bit tedious to press Ctrl + s and then Ctrl + Shift + b all the time.

4 Answers 4

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

To save the current file before running add the line below to your User Settings:

or to save all files before running, add this line:

I also added this shortcut key(keybinding) to file > preferences > keyboard shortcuts > keybindings.json

Now I can just hit Ctrl + Enter and all the magic happens.

Автосохранение файлов при изменениях с помощью VSCode

Я использую WebStorm от JetBrains уже почти 4 года. Это фантастическая среда разработки по многим причинам, но одна из лучших функций — это то, что она сохраняет версии файлов вне контроля версий. Поэтому, если вы случайно удалите файлы или потеряете файлы до того, как они будут сохранены вашей VCS, у WebStorm есть их копия и есть инструменты визуального сравнения, которые можно использовать. Эта функция не раз спасала меня.

Вид выглядит так :

вы можете перейти в меню «Файлы» и выбрать автосохранение.

Вы можете включите автоматическое сохранение с помощью следующих методов:

1: отметьте пункт Auto Save в меню File

2: перейдите к настройке, затем выполните поиск автосохранение и выберите параметр автосохранения (afterDelay)

Автоматическое сохранение описания в документации по vs-коду

Страница «Автовосстановление», папка «Среда», диалоговое окно «Параметры»

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

Чтобы открыть это диалоговое окно, последовательно выберите в меню пункты Инструменты>Параметры>Среда>Автовосстановление.

Сохранять данные автовосстановления каждые [n] мин

Используйте этот параметр, чтобы настроить периодичность автоматического сохранения файла в редакторе. Для ранее сохраненных файлов Visual Studio сохраняет копию файла в папке %LocalAppData%\Microsoft\VisualStudio\BackupFiles\[имя_проекта]. Если этот файл новый и еще не был сохранен, Visual Studio автоматически сохраняет его, используя случайно созданное имя файла.

Используйте этот параметр, чтобы настроить периодичность автоматического сохранения файла в редакторе. Для сохраненных ранее файлов Visual Studio 2019 версии 16.2 и более поздних версий сохраняет копию файла в папке %LocalAppData%\Microsoft\VisualStudio\BackupFiles\[имя_проекта]. Если этот файл новый и еще не был сохранен, Visual Studio автоматически сохраняет его, используя случайно созданное имя файла.

Если вы используете Visual Studio 2019 версии 16.1 или более ранней версии, расположение файла — %USERPROFILE%\Documents\Visual Studio [версия]\Backup Files\[имя_проекта]. Дополнительные сведения см. в журнале заметок о выпуске Visual Studio 2019.

Хранить данные автовосстановления [n] дн.

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

How do I disable Visual Studio Code auto save

Some months ago I observed that angular-cli or Visual Code is saving my files after short delay. Which causes recompiling a project and refreshing a page. It is useful but frustrating a bit to wait couple of seconds every single time for refresh. Even after just opening a file. So, the solution that just hit me is very simple. Go to Preferences/Settings, in Workspace Settings put

That’s it! Now your project will be compiled ONLY after you hit save.

4 Answers 4

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

choose your auto save option from commonly used settings

As @Alex Varghese mentioned in his answer you can do it in the settings. One addition is even if you turn off the auto save option in your user settings, that will not over write the option you have under Workspace settings, so you have to do the changes there as well.

Vscode version 1.34 onwards just got to file menu and click on «Auto Save» to enable or disable Autosave.

Instead of completely disable autosave I prefer just increase delay and save it, e.g. after 10 min. You have a full control when to save it manually, but if you forget, it will save it after the specified long period.

Files: Auto Save : Controls auto save of dirty files.
afterDelay

Files: Auto Save Delay : Controls the delay in ms after which a dirty file is saved automatically. Only applies when Files: Auto Save is set to afterDelay.
600000

Not the answer you’re looking for? Browse other questions tagged visual-studio-code ide or ask your own question.

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Как отключить автосохранение кода Visual Studio

Несколько месяцев назад я заметил, что angular-cli или Visual Code сохраняют мои файлы после небольшой задержки. Что вызывает перекомпиляцию проекта и обновление страницы. Это полезно, но немного расстраивает, чтобы подождать пару секунд каждый раз для обновления. Даже после простого открытия файла. Итак, решение, которое меня только что поразило, очень просто. Зайдите в «Настройки» / «Настройки», в «Настройки рабочего пространства» поставьте

Это оно! Теперь ваш проект будет скомпилирован ТОЛЬКО после нажатия кнопки «Сохранить».

4 ответа

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

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

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

Vscode версии 1.34 и далее просто попал в меню файлов и нажмите «Автосохранение», чтобы включить или отключить автосохранение.

Как отключить автоматическое сохранение кода Visual Studio

Несколько месяцев назад я заметил, что angular-cli или Visual Code сохраняют мои файлы с небольшой задержкой. Это вызывает перекомпиляцию проекта и обновление страницы. Это полезно, но немного разочаровывает, каждый раз подождать пару секунд для обновления. Даже после открытия файла. Итак, решение, которое меня только что поразило, очень простое. Зайдите в Preferences / Settings, в настройках Workspace поставьте

Вот и все! Теперь ваш проект будет компилироваться ТОЛЬКО после того, как вы нажмете «Сохранить».

Это не имеет ничего общего с angular и все связано с вашими личными настройками IDE.

Спасибо, не был уверен, смотрел после обновления VS Code или Angular версии.

Возможно, стоит изменить заголовок на «Как отключить автоматическое сохранение кода Visual Studio», большинство людей не будут искать angular, когда поймут, что это IDE делает сохранение.

Отлично, еще раз спасибо! Приятно узнать, как здесь внести свой вклад 🙂

🙂 Добро пожаловать, добро пожаловать 🙂

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

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

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

VS Code auto-save file history / undo [duplicate]

The auto-save feature of vscode is quite handy, but can be a bit of a trouble some times.

And it will be very usefull if there’s a way to see previous versions of the file auto-saved

does vs code have such a feature?

2 Answers 2

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

No need for an extension with VSCode 1.66 (March 2022).
It now have:

Local history

Local history of files is now available from the Timeline view. Depending on the configured settings, every time you save an editor, a new entry is added to the list:

Each local history entry contains the full contents of the file at the time the entry was created and in certain cases can provide more semantic information (for example, indicate a refactoring).

From an entry you can:

There are new global commands to work with local history:

There are also new settings to work with local history:

A new filter action in the Timeline view toolbar allows you to enable or disable individual providers:

Note: Local history entries are stored in different locations depending on your use of VS Code.

Автосохранение файлов при изменениях с VSCode

Я уже почти 4 года пользуюсь WebStorm от JetBrains. Это фантастическая IDE по многим причинам, но одна из лучших особенностей в том, что она сохраняет версии файлов за пределами контроля версий. Так вот если случайно удалить файлы или потерять файлы до того, как они будут сохранены вашими VCS, WebStorm имеет их копию и есть visual diff tools, которые нужно использовать. Эта возможность меня спасла не один раз.

Вид выглядит как:

6 ответов

Я уже довольно много гуглю по поводу этого вопроса и большинство найденных мною потоков это 2+ года, поэтому мне интересно, изменилось ли что-либо, или есть ли новый метод для решения вопроса относящегося к этой теме. Как вы, возможно, знаете при использовании IntelliJ (я использую 14.0.2) она.

Можно зайти в menu Files и выбрать авто сохранение.

Вы можете включить авто сохранение с помощью этих методов:

1: check Auto Save item in File menu

2: Зайдите в Setting, затем выполните поиск auto save и выберите опцию auto save (afterDelay)

Да VSCode умеет автосохранять изменения по файлам по мере внесения изменений. Так же он позволяет установить задержку на то, сколько ждать, прежде чем сохранить файл.

Вот вам link, который должен вам с этим помочь.

Или ярлык вы можете просто ориентироваться на ваши настройки VSCode, и добавить следующее в ваш settings.json

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

Есть пакет с названием Local History, который можно использовать для сохранения резервной копии ваших файлов вне контроля версий.

Вам стоит проверить, что out.

Change the Auto Save Delay in Visual Studio Code

February 9, 2022

February 8, 2022

February 9, 2022

September 7, 2021

September 13, 2021

This article shows you how to change the Auto Save Delay in Visual Studio Code.

Go to Code > Preferences > Settings (macOS) or File > Preferences > Settings (Windows).

Type “autosave” in the search field to search.

Make sure “afterDely” is selected in the “File: Auto Save” section then enter the number of milliseconds you want for the delay in the input field in the “File: Auto Save Delay” area.

Done. Your changes will be automatically saved.

Further reading:

You can also check out our Visual Studio Code topic page for more tips and tricks to improve your producibility and coding experience.

The Basics of Visual Studio Code

At its heart, Visual Studio Code is a code editor. Like many other code editors, VS Code adopts a common user interface and layout of an explorer on the left, showing all of the files and folders you have access to, and an editor on the right, showing the content of the files you have opened.

In addition, there are a number of unique features in the VS Code user interface. This topic describes these features.

Files, Folders & Projects

Basic Layout

VS Code comes with a simple and intuitive layout that maximizes the space provided for the editor while leaving ample room to browse and access the full context of your folder or project. The UI is divided into four areas:

Each time you start VS Code, it opens up in the same state it was in when you last closed it. The folder, layout, and opened files are preserved.

Instead of placing files in separate tabs, VS Code allows up to three visible editors at any one time, allowing you place up to three files together side by side.

This helps to reduce the overhead of managing tabs but does not restrict the number of files you can work with. The Explorer view maintains a list of working files allowing you quick access to the files you need.

Tip: You can move the Side Bar to the right hand side (View > Move Sidebar) or toggle its visibility ( kb(workbench.action.toggleSidebarVisibility) ).

Side by Side Editing

You can have up to three editors open side by side.

If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:

Whenever you open another file, the editor that is active will display the content of that file. So if you have two editors side by side and you want to open file ‘foo.cs’ into the right hand editor, make sure that editor is active (by clicking inside it) before opening file ‘foo.cs’.

Tip: You can resize editors and reorder them. Drag and drop the editor title area to reposition or resize the editor.

Explorer

The Explorer is used to browse, open, and manage all of the files and folders in your project.

After opening a folder in VS Code, the contents of the folder are shown in the Explorer. You can do many things from here:

Tip: You can drag and drop files into the Explorer from outside VS Code to copy them

VS Code works very well with other tools that you might use, especially command line tools. If you want to run a command line tool in the context of the folder you currently have open in VS Code, right-click the folder and select Open in Command Prompt (or Open in Terminal on OS X or Linux).

You can also navigate to the location of a file or folder in the native Explorer by right-clicking on a file or folder and selecting Reveal in Explorer (or Reveal in Finder on the Mac or Open Containing Folder on Linux).

Tip: Type kb(workbench.action.quickOpen) (Quick Open) to quickly search and open a file by its name.

Working Files

At the top of the Explorer is a section labeled WORKING FILES. This is a list of active files. These are files you previously opened in VS Code that you’re working on. For example, a file will be listed in the working files section if you:

Think of the WORKING FILES section as similar to Tabs that you may be familiar with in other code editors or IDEs. Just click a file in the working files section, and it becomes active in VS Code.

Once you are done with your task, you can individually remove files from the working files section, or you can remove all files from the working files section by using the Close All Files action.

Tip: You can type kb(workbench.files.action.workingFilesPicker) to navigate the list of working files from file picker without having the explorer visible.

Configuring the Editor

VS Code gives you many options to configure the editor. You can set options globally through user settings or per project/folder through workspace settings. Settings values are kept in a settings.json file.

You will see the VS Code Default Settings in the left window and your editable settings.json on the right. You can easily review and copy settings from Default Settings.

After editing your settings, type kb(workbench.action.files.save) to save your changes. The changes will take effect immediately.

Save/Auto Save

Search Across Files

VS Code allows you to quickly search over all files in the currently-opened folder. Simply type kb(workbench.view.search) and type in your search. Search results are grouped into files containing the search term, with an indication of the hits in each file and its location. Expand a file to see a preview of all of the hits within that file. Then single-click on one of the hits to view it in the editor.

Tip: We support regular expression searching in the search box, too.

In the two input boxes below the search box, you can include and exclude files. Click on the toggle to the right to enable the glob pattern syntax:

VS Code excludes some folders by default to reduce the number of search results that you are not interested in (for example: node_modules ). Open settings to change these rules under the files.exclude and search.exclude section.

Tip: From the Explorer you can right-click on a folder and select Find in Folder to search inside a folder only.

Command Palette

The Command Palette provides access to many commands. You can execute editor commands, open files, search for symbols, and see a quick outline of a file, all using the same interactive window. Here are a few tips:

Quick File Navigation

The Explorer is great for navigating between files when you are exploring a project. However, when you are working on a task, you will find yourself quickly jumping between the same set of files. VS Code provides two powerful commands to navigate in and across files with easy-to-use key bindings.

Hold kbstyle(Ctrl) and press kbstyle(Tab) to view a list of all files that have been opened since VS Code was launched. To open one of these files, use kbstyle(Tab) again to pick the file you want to navigate to, then release kbstyle(Ctrl) to open it.

Alternatively, you can use kb(workbench.action.navigateBack) and kb(workbench.action.navigateForward) to navigate between files and edit locations. If you are jumping around between different lines of the same file, these shortcuts allow you to navigate between those locations easily.

Tip: You can open any file by its name when you type kb(workbench.action.quickOpen) (Quick Open).

File Encoding Support

Set the file encoding globally or per workspace by using the files.encoding setting in User Settings or Workspace Settings.

You can view the file encoding in the status bar.

Click on the encoding in the status bar to reopen or save the active file with a different encoding.

Then choose an encoding.

Launching from the Command Line

You can launch VS Code from the command line to quickly open a file, folder, or project. Typically, you open VS Code within the context of a folder. We find the best way to do this is to simply type:

Tip: We have instructions for Mac users in our Setup topic that enable you to start VS Code from within a terminal. We add the VS Code executable to the PATH environment variable in Windows and Linux automatically.

Sometimes you will want to open or create a file. If a file does not exist, we will create it for you:

Tip: You can have as many file names as you want separated by spaces.

Additional Command line arguments

Here are optional command line arguments you can use when starting VS Code at the command line via code :

If you specify more than one file or folder at the command line, VS Code will open only a single instance.

Opening a Project

VS Code does not distinguish between opening a folder and opening a project. If VS Code detects a project in the folder you opened (for example, a C# project), that project context will be displayed on the Status Bar. If more than one project is found, you can switch projects from there as well.

After VS Code opens, just open source files and use the Status Bar to switch the active project as needed.

Window Management

VS Code has some options to control how windows should be opened or restored between sessions.

The window.openFilesInNewWindow setting controls if files should open in a new window instead of reusing an existing VS Code instance. By default, VS Code will open a new window when you double-click on a file outside VS Code or open a file from the command line. Set this to false to reuse the last active instance of VS Code and open files in there.

The window.reopenFolders setting tells VS Code how to restore the opened windows of your previous session. By default, VS Code will reopen the last opened folder you worked on (setting: one ). Change this setting to none to never reopen any folders and always start with an empty VS Code instance. Change it to all to restore all folders you worked on during your previous session.

Next Steps

Common Questions

Q: Is it possible to globally search and replace?

A: This feature is not yet implemented, but you can expect it to come in the future!

Q: How do I turn on word wrap?

A: You can control word wrap through the editor.wrappingColumn setting. By default editor.wrapperingColumn is set to 300 characters. You can adjust the column width or set the value to zero to wrap on the editor viewport width:

You can also add vertical column rulers to the editor with the editor.rulers setting which takes an array of column character positions where you’d like vertical rulers.

Q: How can I show more files in the WORKING FILES section?

Enable Auto Save in Visual Studio Code

When coding we mostly forget to save our programs and directly run them in visual studio code, and this sometimes leads to program being not compiled or executed, as we have to save the program before pressing the run button. Th ough there is a solution for this and in today’s article we’ll find out how to Enable AutoSave in Visual Studio Code.

Well, programming in visual studio code is a pretty enjoyable task but the only problem that occurs in visual studio code is off saving the written programs.

Video Tutorial: Enable Autosave in Visual Studio Code

Step 1: Enable Autosave in Visual Studio Code

1) Firstly open your visual studio code, and open settings by pressing “ Ctrl+, ” if you’re using a windows machine or press “ Cmd+, ” if you’re on a Mac machine.

2) Now in the search bar type “ autosave ” and in the “ Files: AutoSave ” list select the option “ afterdelay “.

And you’re all done 👍👍, now visual studio code will automatically save the changes for you. Now you’re able to successfully enable autosave in visual studio code.

For more information about AutoSave feature in visual studio code, follow this Basic Editing in Visual Studio Code article from Microsoft.

Ethix

I’m a coding geek interested in cyberspace who loves to write and read

AutoRecover, Environment, Options dialog box

Use this page in the Options dialog box to specify whether to automatically back up files or not. You can also specify if you want to restore modified files if Visual Studio shuts down unexpectedly.

To access this dialog box, go to Tools > Options > Environment > AutoRecover.

Save AutoRecover information every [n] minutes

Use this option to customize how often a file is automatically saved in the editor. For previously saved files, Visual Studio saves a copy of the file in %LocalAppData%\Microsoft\VisualStudio\BackupFiles\[projectname]. If the file is new and you haven’t saved it yet, Visual Studio autosaves it by using a randomly generated file name.

Use this option to customize how often a file is automatically saved in the editor. For previously saved files, Visual Studio 2019 version 16.2 and later saves a copy of the file in %LocalAppData%\Microsoft\VisualStudio\BackupFiles\[projectname]. If the file is new and you haven’t saved it yet, Visual Studio autosaves it by using a randomly generated file name.

If you are using Visual Studio 2019 version 16.1 or earlier, the file location is %USERPROFILE%\Documents\Visual Studio [version]\Backup Files\[projectname]. For more information, see the Visual Studio 2019 Release Notes History page.

Keep AutoRecover information for [n] days

Use this option to specify how long Visual Studio keeps files created for autorecovery.

Visual Studio Code – редактор кода для Linux, OS X и Windows

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

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

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

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

Mac OS X

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

Linux

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

Windows

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск

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

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

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

Подсказки IntelliSence

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отладка

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

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

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

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

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

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

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

Конфликты

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

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

Существует несколько способов сохранения Microsoft Office документов Word. Вы можете сохранить документ без изменения имени документа или сохранить документ с новым именем.

Применимо к: Сведения в этом разделе относятся к проектам уровня документа и проектам надстроек VSTO для Word. Дополнительные сведения см. в разделе «Функции», доступные по Office приложению и типу проекта.

Сохранение документа без изменения имени

Сохранение документа, связанного с настройкой на уровне документа

Чтобы сохранить активный документ

Save Вызовите метод для активного документа. Чтобы использовать этот пример кода, запустите его из класса ThisDocument или ThisAddIn в своем проекте.

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

Сохранение документа, указанного по имени

Используйте имя документа в качестве аргумента для Documents коллекции. Чтобы использовать этот пример кода, запустите его из класса ThisDocument или ThisAddIn в своем проекте.

Сохранение документа с новым именем

SaveAs Используйте метод для сохранения документа с новым именем. Этот метод Document ведущего элемента можно использовать в проекте Word на уровне документа или собственного Document объекта в любом проекте Word. Для этого метода необходимо указать новое имя файла, но другие аргументы являются необязательными.

Если в обработчике ThisDocument событий отображается диалоговое окно DocumentBeforeSaveSaveAs и задано значение False параметра Cancel, приложение может неожиданно завершить работу. Если для параметра Cancel задано значение true, появляется сообщение об ошибке, указывающее, что автосохранение отключено.

Сохранение документа, связанного с настройкой уровня документа с новым именем

Метод SaveAs создает исключение, если целевой каталог не существует или возникают другие проблемы при сохранении файла. Рекомендуется использовать try. catch блок вокруг SaveAs метода или внутри вызывающего метода.

Сохранение собственного документа с новым именем

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

В следующем примере кода сохраняется активный документ с новым именем. Чтобы использовать этот пример кода, запустите его из класса ThisDocument или ThisAddIn в своем проекте.

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

Компиляция кода

Для этого примера кода требуется следующее.

Чтобы сохранить документ по имени, документ с именемNewDocument.doc должен существовать в каталоге с именем Test on drive C.

wclr/vscode-autosave-ext

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

AutoSaveExt VSCode Extension

VSCode extension for advanced autosave feature configuration.

This extension allows to have custom configuration of autosave feature for specified types of files because standard editor’s autoSave option is applied to all file types and languages.

This option is not language specific, so just add file extensions that should be a subject for autosave.

If you have proposal or issue. Add an issue with description of your case.

Visual Studio Code – редактор кода для Linux, OS X и Windows

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

Mac OS X

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

Linux

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

Windows

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

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

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

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

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

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

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

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

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

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

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

Поиск

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

Подсказки IntelliSence

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

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

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

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

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

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

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

Отладка

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

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

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

Конфликты

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

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

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

3 ответа

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

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

Keybindings.json ( Ctrl+K Ctrl+S ):

Я думаю, что вы могли бы создать задачу, чтобы выполнить работу за вас https: //code.visualstudio. COM / Docs / редактор / задачи

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

Посмотреть несохраненные изменения в vscode

Мой вопрос: как я могу увидеть разницу между сохраненной версией файла и версией в окне редактора? Я думаю, что было бы лучше всего иметь в диалоге опцию «show diff», но пока я также доволен командой diff из командной строки.

Я использую ubuntu 20.04.

1 ответ

Я использую VSCode версии 1.52.1 на MacOS, и у меня была аналогичная проблема, которая может быть другой, но я предполагаю, что она сработает и для вас.

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

Чтобы избавиться от этого окна (мне потребовалось немного времени, чтобы понять это, к сожалению, я говорю!), Вы можете щелкнуть «X» слева от дополнительного буфера в «Открытых редакторах».

Как мы можем сохранить все файлы в (VSCode), как в Visual Studio

Не похоже, что к нему привязан ярлык.

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

Добавьте привязку к правой половине экрана и перезапустите Code:

В коде Visual Studio с сегодняшнего дня вы можете нажать Ctrl + K +, S чтобы сохранить все несохраненные файлы, открытые в данный момент в вашем редакторе.

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

Здесь следует отметить трюк: комбинация клавиш Ctrl +, K S отображаемая вместе с текстом пункта меню, создает впечатление, что вам нужно нажать Ctrl клавишу, удерживать Ctrl клавишу нажатой, а затем быстро нажимать клавиши K и S одну за другой. Это не так.

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

Для пользователей Windows сочетание клавиш отображается как 11-й параметр в меню «Файл» как:

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

Нажмите Ctrl + k

Отпустите Ctrl и k ключи.

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

Это относится к другой команде «Закрыть рабочее пространство», которую можно найти в меню «Файл» (вместо нажатия s вы нажимаете f ).

VS Code auto-save file history / undo [duplicate]

The auto-save feature of vscode is quite handy, but can be a bit of a trouble some times.

And it will be very usefull if there’s a way to see previous versions of the file auto-saved

does vs code have such a feature?

2 Answers 2

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

No need for an extension with VSCode 1.66 (March 2022).
It now have:

Local history

Local history of files is now available from the Timeline view. Depending on the configured settings, every time you save an editor, a new entry is added to the list:

Each local history entry contains the full contents of the file at the time the entry was created and in certain cases can provide more semantic information (for example, indicate a refactoring).

From an entry you can:

There are new global commands to work with local history:

There are also new settings to work with local history:

A new filter action in the Timeline view toolbar allows you to enable or disable individual providers:

Note: Local history entries are stored in different locations depending on your use of VS Code.

VS Code auto-save file history / undo [duplicate]

The auto-save feature of vscode is quite handy, but can be a bit of a trouble some times.

And it will be very usefull if there’s a way to see previous versions of the file auto-saved

does vs code have such a feature?

2 Answers 2

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

No need for an extension with VSCode 1.66 (March 2022).
It now have:

Local history

Local history of files is now available from the Timeline view. Depending on the configured settings, every time you save an editor, a new entry is added to the list:

Each local history entry contains the full contents of the file at the time the entry was created and in certain cases can provide more semantic information (for example, indicate a refactoring).

From an entry you can:

There are new global commands to work with local history:

There are also new settings to work with local history:

A new filter action in the Timeline view toolbar allows you to enable or disable individual providers:

Note: Local history entries are stored in different locations depending on your use of VS Code.

Visual Studio Code скомпилировать при сохранении

Как настроить код Visual Studio для компиляции файлов машинописи при сохранении?

Обновление за май 2018 года:

Начиная с мая 2018 года вам больше не нужно создавать tsconfig.json вручную или настраивать tsconfig.json задач.

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

Оригинальный ответ:

Вы можете сделать это с помощью команд Build:

Создайте простой tsconfig.json с помощью «watch»: true (это даст указание компилятору просматривать все скомпилированные файлы):

Сконфигурируйте свою задачу ( Ctrl+Shift+P → Configure Task Runner ):

Компилятор будет автоматически компилировать файлы при сохранении. Чтобы остановить компиляцию, нажмите Ctrl+P – > Tasks: Terminate Running Task прекратить выполнение > Tasks: Terminate Running Task

Я создал шаблон проекта специально для этого ответа: typescript-node-basic

Если вы хотите избежать использования CTRL + SHIFT + B и вместо этого хотите, чтобы это произошло в любое время, когда вы сохраняете файл, вы можете привязать команду к тому же сокращению, что и действие сохранения

Это относится к вашему keybindings.json – (перейдите к этому с помощью File → Preferences → Shortcut).

Откройте командную строку Node.JS, замените каталог в корневую папку проекта и введите следующее:

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

Этот метод упоминается в сообщении в блоге;

Прокрутите вниз до пункта “Скомпилировать при сохранении”

Записать расширение

Теперь, когда vscode является расширяемым, можно подключиться к событию сохранения через расширение. Хороший обзор написания расширений для VSCode можно найти здесь:
https://code.visualstudio.com/docs/extensions/overview

Существующий расширение VSCode

Если вы хотите просто установить существующее расширение, вот что я написал в галерее VSCode:
https://marketplace.visualstudio.com/items/emeraldwalk.RunOnSave

Вместо того, чтобы создавать один файл и связывать Ctrl + S для запуска этой сборки, я бы рекомендовал запустить tsc в режиме просмотра, используя следующий файл tasks.json:

Это создаст весь проект, а затем восстановит файлы, которые будут сохранены независимо от того, как они будут сохранены (Ctrl + S, автоматическое сохранение,…)

Я реализовал компиляцию с сохранением с помощью задачи gulp, используя gulp-typescript и инкрементную сборку. Это позволяет контролировать компиляцию независимо от того, что вы хотите. Обратите внимание на мою переменную tsServerProject, в моем реальном проекте у меня также есть tsClientProject, потому что я хочу скомпилировать код клиента без указанного модуля. Как я знаю, вы не можете сделать это с помощью кода.

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

Текущее состояние этой проблемы:

обновленный

В вашем tsconfig.json

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

Надеюсь, это кому-нибудь поможет. Хотя это не постоянное решение, но оно работает, пока вы не получите лучшее решение.

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

если он показывает меньшее количество файлов, включая node_modules, откройте файл /etc/sysctl.conf с правами суперпользователя и добавьте

fs.inotify.max_user_watches=524288 в файл и сохраните

снова запустите команду cat, чтобы увидеть результат. Это будет работать! с надеждой!

Чрезвычайно простой способ автоматической компиляции при сохранении – ввести в терминал следующее:

где main.ts – это имя вашего файла.

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

Ответ для VisualStudio, а не VisualStudio-Code:

Как сохранить свертывание кода при сохранении в коде Visual Studio

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

Поскольку единственные настройки, которые я мог найти, были:

Вопрос в том, как сохранить свои складки при сохранении?

4 ответа

Как только это было отключено, складывание сохраняло свое состояние после сохранения.

Для тех, кто сталкивался с таким, как я, у меня не было более симпатичных, сортирующих импорт или одиноких. Я смог решить эту проблему, изменив настройку «стратегии сворачивания» с «auto» на «отступ», и это позволило сохранить мои сгибы постоянными благодаря сохранению и, в частности, в моем случае развертыванию кода с использованием расширения Salesforce CLI.

Is there a visual studio automatic save configuration setting?

I use the java IDE IntelliJ IDEA and one of the features I like is that there’s no saving. Everything’s always saved and you just use history navigation. I tend to have both editors open and I’m always forgetting to save in VS.

I’m running vs 2008 with resharper 4.5 but as far as I can tell this isn’t achievable or configurable. Any suggestions?

7 Answers 7

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

For VS 2019, the Auto Save File extension seems to work as expected.

It saves individual files on lost focus, can save all files when VS loses focus and can also save all after an inactivity delay.

In VS 2015, I used to use NoMorePanicSave2015.

It does an equivalent of Ctrl + Shift + S when Visual Studio loses focus, which saves all your files, including solution and projects.

Visual Studio Code – редактор кода для Linux, OS X и Windows

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

Mac OS X

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

Linux

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

Windows

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

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

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

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

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

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

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

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

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

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

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

Поиск

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

Подсказки IntelliSence

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

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

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

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

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

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

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

Отладка

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

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

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

Конфликты

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

Как отключить автоматическое сохранение кода Visual Studio

Вот и все! Теперь ваш проект будет компилироваться ТОЛЬКО после того, как вы нажмете «Сохранить».

Ответов (4) 4

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

Файлы: Автосохранение : Управляет автоматическим сохранением грязных файлов.
afterDelay

Files: Auto Save Delay : контролирует задержку в мс, после которой грязный файл сохраняется автоматически. Применимо, только если для параметра Files: Auto Save установлено значение afterDelay.
600000

Vscode версии 1.34 и более поздних версий просто зашел в меню «Файл» и нажал «Автосохранение», чтобы включить или отключить автосохранение.

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

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

Visual Studio Code – редактор кода для Linux, OS X и Windows

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

Mac OS X

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

Linux

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

Windows

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

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

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

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

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

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

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

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

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

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

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

Поиск

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

Подсказки IntelliSence

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

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

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

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

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

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

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

Отладка

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

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

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

Конфликты

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

Visual Studio Code – редактор кода для Linux, OS X и Windows

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

Mac OS X

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

Linux

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

Windows

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

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

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

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

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

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

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

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

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

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

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

Поиск

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

Подсказки IntelliSence

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

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

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

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

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

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

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

Отладка

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

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

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

Конфликты

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

Как включить автосохранение проекта или проверить включено или нет?

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

Как проверить, рабочий БП или нет?
как проверить рабочиё бп или нет. Заранее благодарен.

Как проверить, на главной я или нет?
Как проверить на главной странице я или нет, тоесть есть ли что-то после / окончания домена

Решение

Как проверить установлено соединение или нет
Здравствуйте! Нужно проверить установлено соединение или нет. Вот функция.

Как проверить включен bluetooth или нет?
Как проверить включен bluetooth или нет? Если да то одно действие а если нет то другое.

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

Как проверить живая вафля или нет?
У меня есть роутер ZyXEL Keenetic. Когда купил не смог его настроить под wi-fi из-за неопытности.

Как экспортировать настройки?

Как можно экспортировать все настройки и плагины Visual Studio Code и импортировать их на другой компьютер?

9 ответов

ОБНОВЛЕНИЕ:

Эта функция теперь встроена в VS Code, стоит перейти на официальную функцию. (https://stackoverflow.com/a/64035356/2029818)

Я установил плагин Settings Sync в Visual Studio Код для синхронизации некоторых настроек с Gist.

Если вы хотите использовать «Синхронизацию настроек», вы можете увидеть этот хороший пост:

Я сделал скрипт Python для экспорта настроек кода Visual Studio в один ZIP-файл:

Вы можете загрузить ZIP-файл на внешнее хранилище.

PS: Вы можете реализовать подкоманду vsc-settings.py import за меня.

Ваши пользовательские настройки находятся в

Если вас не беспокоит синхронизация и это одноразовый процесс, вы можете просто скопировать файлы keybindings.json и settings.json в соответствующую папку на вашем новом компьютере.

Ваши расширения находятся в папке

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

Сценарий

в последней версии Visual Studio Code (май 2016 г.) теперь можно указать установленное расширение в командной строке.

На Mac выполните что-то вроде:

Для установки используйте:

Описание: Portable Mode предписывает VSC хранить всю свою конфигурацию и плагины в определенном каталоге (называемом data / в Windows и Linux и code-portable-data в MacOS). В любой момент вы можете скопировать каталог данных и скопировать его на другую установку.

Теперь вы можете синхронизировать все свои настройки на разных устройствах с помощью встроенного Settings Sync VSCode. Он находится под Code > Preferences > Turn on Settings Sync.

Подробнее об этом читайте в официальных документах здесь

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

Visual Studio Code does not appear to save files until it is closed. #100433

Comments

MarcMenzel commented Jun 17, 2020

As I edit files in Visual Studio Code, I expect the files to be saved as I edit them. However, as I attempt to upload the files to the server, I find out that there are no changes to the file that I have updated. Only after I close Visual Studio Code do I see the files updated.

VS Code version: Code 1.46.0 (a5d1cc2, 2020-06-10T09:03:20.462Z)
OS version: Windows_NT x64 10.0.19041

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz (8 x 3598)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on oop_rasterization: disabled_off protected_video_decode: unavailable_off rasterization: enabled skia_renderer: disabled_off_ok video_decode: enabled viz_display_compositor: enabled_on viz_hit_test_surface_layer: disabled_off_ok webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	15.94GB (5.76GB free)
Process Argv
Screen Reader	no
VM	0%

Extensions: none (2 theme extensions excluded)

The text was updated successfully, but these errors were encountered:

info-needed Issue requires more information from poster (with bot comment) label Jun 18, 2020

vscode-triage-bot commented Jun 18, 2020

Thanks for creating this issue! We figured it’s missing some basic information or in some other way doesn’t follow our issue reporting guidelines. Please take the time to review these and update the issue.

MarcMenzel commented Jun 18, 2020

To recreate the issue, try saving an html file in Visual Studio Code and checking the Windows or File Explorer to see if the file write time has changed or try to view the html file in a browser to see if there any changes after modifying it in Visual Studio Code, if there are not any changes in the file try closing Visual Studio Code and then checking to see if there are any changes after exiting Visual Studio Code.

MarcMenzel commented Jun 18, 2020

I have made changes to html files in Visual Studio Code with AutoSave set on afterDelay. The problem is that when I view the html file in a browser, I don’t see any changes. If I open up Notepad to edit the html file and then save it Notepad, I see the changes that I made when I view the html file in a browser. I viewed the html file in the new Microsoft Edge browser.

bpasero commented Jun 18, 2020

To recreate the issue, try saving an html file in Visual Studio Code and checking the Windows or File Explorer to see if the file write time has changed or try to view the html file in a browser to see if there any changes after modifying it in Visual Studio Code

MarcMenzel commented Jun 18, 2020

I am running VS Code version: Code 1.46.0 on Windows_NT x64 10.0.19041 (basically Windows 10 Profession Edition Version 2004. I am not sure if it is an issue on my end or not. I will have to research it.

bpasero commented Jun 18, 2020

MarcMenzel commented Jun 18, 2020

If it is on my end, what could the problem be?

bpasero commented Jun 18, 2020

Is this a local file system or remote? Does it happen with every folder or only specific? Are you using OneDrive or any other thing?

MarcMenzel commented Jun 18, 2020

It is a local system.

MarcMenzel commented Jun 18, 2020

I am not using OneDrive for my html files that I edit. It has happened before with other folders.

MarcMenzel commented Jun 18, 2020

I wonder if it has to do with «EBADF: bad file descriptor, fdatasync». I am not sure what that is. I saw that on another GitHub issue report. form almost two years ago. It was working just a day or two ago.

bpasero commented Jun 18, 2020

@MarcMenzel yeah that error sounds suspicious and maybe points to issues on the file system or hard disk. We only try to fdatasync once and then give up. Possibly your disk is corrupt?

MarcMenzel commented Jun 18, 2020

I am not to sure.

provks commented Jun 22, 2020

Hi, The issue is the same, file not saved, UI is fine, it shows the file is saved. Although, I have enabled auto file save. But the terminal logs show that the older JS code is executed instead of the updated one.

To actually save the files. I need to close the VS Code and open it again. I am using Ubuntu 20.04. As I am still learning the Nodejs, it took me almost a week to finally realize the issue is with the editor not with my code. Facing this issue since the last VS Code update. Further details are attached below. I have installed VS Code from the snap store.

Version: 1.46.1
Commit: cd9ea64
Date: 2020-06-17T21:13:08.304Z
Electron: 7.3.1
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Linux x64 5.4.0-37-generic snap

VS Code version: Code 1.46.1 (cd9ea64, 2020-06-17T21:13:08.304Z)
OS version: Linux x64 5.4.0-37-generic snap

Flutter hot reload doesn’t work on autosave in VSCode

Flutter hot reloads every time VS Code auto-saves my project before. A few hours ago, I started experiencing this issue where auto-saving doesn’t hot-reload my app. Pressing Ctrl+S manually triggers hot reload but auto-saving does not. I’ve tried re-installing VS Code and Flutter SDK but the problem still exists.

My newly installed VS Code only has the following extensions and settings:

Dart: v3.19.1
Flutter: v3.19.0
Auto-save is set to afterDelay of 1000ms

How do I hot reload when autosaving in vscode? Another person had the same issue two hours ago: https://github.com/Dart-Code/Dart-Code/issues/3110

3 Answers 3

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

An update in Dart & Flutter’s VS Code extension is causing the issue.

===== Latest Version =====

3.42 and above: You can enable hot reload on autosave in the latest version by setting Flutter Hot Reload On Save to allIfDirty in your VSCode settings.

===== Old Versions =====

v3.41 and below: You can enable hot reload on autosave in the latest version by setting Flutter Hot Reload On Save to always in your VSCode settings.

v3.19: They disabled hot reload on autosave completely.

v3.18 and below: The extension hot reloads automatically when auto saving.

cyberspacedk/VScode-hotkeys

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

readme.md

Ctrl+Shift+P, F1 Показать палитру команд

Ctrl+P Быстрое открытие, переход в файл …

Ctrl+Shift+N Новое окно / экземпляр

Ctrl+Shift+W Закрыть окно / экземпляр

Ctrl+, Пользовательские настройки

Ctrl+K Ctrl+S Горячие клавиши

Ctrl+X Линия разреза (пустой выбор)

Ctrl+C Копировать строку (пустой выбор)

Alt+ ↑ / ↓ Перемещение строки вверх / вниз

Shift+Alt + ↓ / ↑ Копирование линии вверх / вниз

Ctrl+Shift+K Удалить строку

Ctrl+Enter Вставить строку ниже

Ctrl+Shift+Enter Вставить строку выше

Ctrl+Shift+\ Перейти к соответствующей скобке

Ctrl+] / [ Отступ / outdent линия

Home / End Перейти к началу / концу строки

Ctrl+Home Перейти к началу файла

Ctrl+End Перейти к концу файла

Ctrl+↑ / ↓ Строка прокрутки вверх / вниз

Alt+PgUp / PgDn Прокрутка страницы вверх / вниз

Ctrl+Shift+[ Скрыть (свернуть) область

Ctrl+Shift+] Развернуть (разворачивать) регион

Ctrl+K Ctrl+[ Сложить (свернуть) все субрегионы

Ctrl+K Ctrl+] Развернуть (разворачивать) все субрегионы

Ctrl+K Ctrl+0 Свернуть (свернуть) все регионы

Ctrl+K Ctrl+J Развернуть (разворачивать) все регионы

Ctrl+K Ctrl+C Добавить комментарий к строке

Ctrl+K Ctrl+U Удалить комментарий к строке

Ctrl+/ Переключить комментарий к строке

Shift+Alt+A Переключить комментарий блока

Alt+Z Переключить перенос слов

Ctrl+T Показать все символы

Ctrl+G Перейти к строке …

Ctrl+P Перейти к файлу …

Ctrl+Shift+O Перейдите к символу …

Ctrl+Shift+M Показать панель задач

F8 Перейти к следующей ошибке или предупреждению

Shift+F8 Перейти к предыдущей ошибке или предупреждению

Ctrl+Shift+Tab Навигация по истории группы редакторов

Alt+ ← / → Вернуться назад / вперед

Ctrl+M Переключить вкладку перемещения фокуса

F3 / Shift+F3 Найти следующий / предыдущий

Alt+Enter Выберите все вхождения поиска.

Ctrl+D Добавить выделение в следующий Найти совпадение

Ctrl+K Ctrl+D Перенести последний выбор на следующий Найти совпадение

Alt+C / R / W Переключить регистр-регистр / regex / целое слово

Мульти-курсор и выбор

Alt+Click Вставить курсор

Ctrl+Alt+ ↑ / ↓ Вставить курсор сверху / снизу

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

Shift+Alt+I Вставить курсор в конце каждой выбранной строки

Ctrl+I Выберите текущую строку

Ctrl+Shift+L Выбрать все вхождения текущего выбора

Ctrl+F2 Выбрать все вхождения текущего слова

Shift+Alt+→ Развернуть выбор

Shift+Alt+← Выбор термоусадочной пленки

Shift+Alt+(drag mouse) Выбор столбца (поле)

Ctrl+Shift+Alt+(arrow key) Выбор столбца (поле)

Ctrl+Shift+Alt+PgUp/PgDn Окно выбора столбца (окна) вверх / вниз

Ctrl+Space Предложение триггера

Ctrl+Shift+Space Триггерные подсказки параметров

Shift+Alt+F Формат документа

Ctrl+K Ctrl+F Выбор формата

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

Alt+F12 Определение Peek

Ctrl+K F12 Открыть определение в сторону

Ctrl+. Быстрая починка

Shift+F12 Показать ссылки

F2 Переименовать символ

Ctrl+K Ctrl+X Обрезать пробелы

Ctrl+K M Изменить язык файла

Ctrl+F4, Ctrl+W Закрыть редактор

Ctrl+K F Закрыть папку

Ctrl+\ Редактор разделов

Ctrl+ 1 / 2 / 3 Сосредоточьтесь на 1-й, 2-й или 3-й группе редакторов

Ctrl+K Ctrl+ ←/→ Фокус в предыдущей / следующей группе редакторов

Ctrl+Shift+PgUp / PgDn Переместить редактор влево / вправо

Ctrl+K ← / → Переместить активную группу редактора

Ctrl+N Новый файл

Ctrl+O Открыть файл…

Ctrl+Shift+S Сохранить как…

Ctrl+K S Сохранить все

Ctrl+K Ctrl+W Закрыть все

Ctrl+Shift+T Повторно открыть закрытый редактор

Ctrl+K Enter Сохранить редактор режима предварительного просмотра

Ctrl+Tab Открыть следующий

Ctrl+Shift+Tab Открыть предыдущий

Ctrl+K P Копировать путь к активному файлу

Ctrl+K R Показать активный файл в проводнике

Ctrl+K O Показать активный файл в новом окне / экземпляре

F11 Включить полноэкранный режим

Shift+Alt+1 Переключить макет редактора (горизонтальный / вертикальный)

Ctrl+ = / – Увеличение / уменьшение масштаба

Ctrl+B Переключить видимость боковой панели

Ctrl+Shift+E Показать проводник / переключить фокус

Ctrl+Shift+F Показать результаты поиска

Ctrl+Shift+G Показать контроль источника

Ctrl+Shift+D Показать отладку

Ctrl+Shift+X Показать расширения

Ctrl+Shift+H Заменить в файлах

Ctrl+Shift+J Переключить сведения о поиске

Ctrl+Shift+U Показать панель вывода

Ctrl+Shift+V Открыть предварительный просмотр Markdown

Ctrl+K V Открыть предварительный просмотр Markdown в сторону

Ctrl+K Z Режим Zen (Esc Esc для выхода)

Отлаживать код (debug)

F9 Переключить точку останова

F5 Пуск / Продолжить

F11 / Shift+F11 Ввод / выключение

Ctrl+K Ctrl+I Показать зависание

Ctrl+ Показать встроенный терминал

Ctrl+Shift+ Создать новый терминал

Ctrl+C Выбор копии

Ctrl+V Вставить в активный терминал

Ctrl+↑ / ↓ Прокрутка вверх / вниз

Shift+PgUp / PgDn Прокрутка страницы вверх / вниз

McRight/Auto-Save-VSCode

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Auto-Save on Window Change

With this extension you DON’T NEED TO press Ctrl + S anymore.

Whenever you Alt + Tab between windows your progress is automatically saved.

You can download it on the market.

You can type ext install mcright.auto-save in VS Code terminal.

Just find it on the VS Code’s Extensions tab.

Initial release of Auto-Save on Window Change

Run on Save

pucelle

Configure shell commands and related file patterns, commands will be executed when matched files were saved.

Features

You can specify status bar messages which will show before and after commands executing, such that they will tell you what’s happening and not distrub you much:

If you need to run VS Code’s commands change runIn option to vscode

Configuration

Command Options

Sample Configuration

Variable Substitution

Note that if forcePathSeparator specified, separators in these variables will be replaced.

For more details please refer to VSCode Tasks.

Name	Description
$	the path of the folder opened in VS Code.
$	the name of the folder opened in VS Code without any slashes (/).
$	the path of current opened file.
$	the basename part of current opened file.
$	the basename part without extension of current opened file.
$	the dirname path part of current opened file.
$	the relative dirname path part of current opened file.
$	the extension part of current opened file.
$	the shorter relative path from current vscode working directory.
$	the task runner’s current working directory on startup.
$	reference environment variables.

Commands

The following commands are exposed in the command palette

Visual Studio Code source control not showing changes

Visual Studio Code source control panel is empty when I click on it. Nothing to expand and nothing to click on.

Things I’ve tried:

25 Answers 25

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

Open your project with cmd.

It worked for me

I fixed it by doing the following:

Dude, just lost an hour because my SCM in VSCode randomly stopped showing anything today. I restarted everything, tried git init, everything on the forums. Made sure Git built in extension is enabled, mine was already enabled so I was totally lost.

All I had to do was disable and then reenable the built in Git extension. and it fixed it.

Go to Extensions.

Filter by «built in».

Click the gear icon by Git, and click disable.

Then click it again, and click enable.

The thing that I tried:

But the only solution that worked for me was:

Allow to set files.autoSave as language specific or folder setting #42170

Comments

yunyu commented Jan 25, 2018

(1 theme extensions excluded)

Steps to Reproduce:

Reproduces without extensions: Yes

The text was updated successfully, but these errors were encountered:

mjbvz commented Jan 25, 2018

Similar to #39051. Currently «files.autoSave» is not a supported language specific setting

tschaub commented Jan 26, 2018

I was just going to open the same issue. In my case, I’m finding it hard to configure VSCode for both JavaScript and Go development. For Go, files.autoSave is nice. For JavaScript, files.autoSave wreaks havoc with HMR or other bundle on change tools.

tschaub commented Feb 6, 2018

Can anyone provide guidance on how someone might fix this? Is there a commit or merge request that implements something similar that could be used as a starting point?

tschaub commented Feb 23, 2019

Maybe this override would look like

But I’m uncertain what model and resource would be in this context. I also have no idea how this would impact other configuration and am uncertain how folder overrides are handled. And it looks like there are a few other places where the files.autoSave configuration is accessed that would need updating.

Any suggestions from vscode contributors on whether this is the right direction? I imagine there are complications, but would be happy to get something started unless this is something that is not easily achievable with the way this configuration is handled.

zion commented Mar 22, 2019

@tschaub I came to the same conclusion as you. Setting overridable: true where you suggested did indeed remove the «Unknown editor configuration setting» error in the settings.json file. But I couldn’t figure out how to actually apply the settings.

I was testing this with a workspace, so that might be yet another variable here. I really want to have control over what files are auto saved. I have a workspace that has 2 project folders, one for api and one for front end. I suspect that many others do as well, this would be a great enhancement to Code.

Any guidance or insights you can offer us @bpasero?

rusnasonov commented Apr 5, 2019

It can be usefull for some sort of virtual FileSystemProviders when writeFile operation is very expensive.

Как вернуться к последней позиции курсора в Visual Studio Code?

С помощью какого сочетания клавиш можно вернуться к последней позиции курсора в Visual Studio Code?

10 ответов

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

Mac OS (MacBook Pro):

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

Ответ на ваш вопрос:

Вы можете узнать текущие привязки клавиш по этой ссылке

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

Вы можете найти здесь все ярлыки

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

Это будет отличаться для каждой ОС в зависимости от информации на https://code.visualstudio.com/docs/customization/keybindings

Вернуться: workbench.action.navigateBack Перейти вперед: workbench.action.navigateForward

Я использую Mac OSX, поэтому не могу ответить пользователям Windows:

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

Что касается принятого ответа, мне действительно интересно 🙂 Alt + ← / Alt + → перескакивает для меня пословно (что является стандартным для всех редакторов). Они действительно сделали это сопоставление для версии для windows?

How to automatically save changes before running a Python script in VS Code

6 Answers 6

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

The shortcut is added by the Code Runner extension, which has an option to save the current file before execution.

More options are available in the documentation

File > Preferences > Settings > Extensions > Run Code configuration > Save file before run.

(Visual Studio Code 1.32.3, extension Code Runner 0.9.8.)

I suggest using the extension macros as I suggested in my comment. It appears to be more powerful than the multi-command extension. macros will take command arguments and also work with your snippets for instance. It is not clear to me from the scant documentation that multi-command will do these things.

Allow to set files.autoSave as language specific or folder setting #42170

Comments

yunyu commented Jan 25, 2018

(1 theme extensions excluded)

Steps to Reproduce:

Reproduces without extensions: Yes

The text was updated successfully, but these errors were encountered:

mjbvz commented Jan 25, 2018

Similar to #39051. Currently «files.autoSave» is not a supported language specific setting

tschaub commented Jan 26, 2018

tschaub commented Feb 6, 2018

Can anyone provide guidance on how someone might fix this? Is there a commit or merge request that implements something similar that could be used as a starting point?

tschaub commented Feb 23, 2019

Maybe this override would look like

zion commented Mar 22, 2019

Any guidance or insights you can offer us @bpasero?

rusnasonov commented Apr 5, 2019

It can be usefull for some sort of virtual FileSystemProviders when writeFile operation is very expensive.

Как мы можем сохранить все файлы в (VSCode), как мы делаем в Visual Studio

5 ответов

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

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

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

в visual studio code на сегодняшний день Вы можете нажать Ctrl+K+S для сохранения всех несохраненных файлов, открытых в Редакторе.

A word of caution о сочетаниях клавиш, присутствующих в тексте описания пунктов меню:

единственный трюк, чтобы отметить здесь, что сочетание клавиш команды [Ctrl+K S] показано с текстом пункта меню создает впечатление, что вы должны нажать Ctrl ключ, сохранить Ctrl клавиша нажата, а затем нажмите клавиши K и S по одному в быстрой последовательности. Это не случае.

этой комбинации клавиш.в JSON переключатели Save All и Save ярлыков, так что Cmd + S обязан Save All :

для пользователя windows-код Visual Studio имеет Ctrl + K, S

это сохранит все измененные файлы за один раз. Релиз является основным моментом, как новый пользователь нажмите клавишу S с клавишей Ctrl, которая открывает файл ярлыков клавиш платы.

Восстановить удаленный файл в корзине кода Visual Studio

Используя Visual Studio Code версии 1.8.1, как восстановить удаленный файл в корзине?

14 ответов

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

В Windows вы найдете его в проводнике, в Linux — в Konquerer/Nemo/.

Если вы только что удалили файл, знайте, что VSCode 1.52 (декабрь 2020 г.) будет поддерживать:

Отменить файловые операции в Проводнике

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

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

Я знаю, что ОП говорит «Корзина». Что я делаю, так это воссоздаю файл, особенно если это один файл. И когда я в файле, я просто нажимаю CMD + Z (я на Mac), и я получаю свой файл обратно.

Работает на Ubuntu 18.04 с кодом VS 1.51.0

Мои удаленные файлы из VS Code находятся по адресу:

Для поиска удаленных файлов:

Если вы удалили файлы из смонтированной файловой системы ntfs, они будут расположены по адресу:

/path_to_mounted_fs/.Trash-$UID

Автосохранение файлов при изменениях с помощью VSCode

Вид выглядит так:

Ответов (5) 5

Есть пакет под названием Local History, который можно использовать для сохранения резервных копий ваших файлов вне контроля версий.

Вы должны это проверить.

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

1. Отметьте пункт « Автосохранение» в меню «Файл».

2: перейдите к настройке, затем найдите автосохранение и выберите опцию автосохранения (после задержки)

Да, VSCode может автоматически сохранять изменения в файлах по мере внесения вами изменений. Он также позволяет вам установить время задержки перед сохранением файла.

Вот ссылка, которая должна вам в этом помочь.

Или ярлык, вы можете просто перейти к настройкам VSCode и добавить следующее в свой settings.json

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

How to auto save file in VSCode on Esc when using Vim extension?

I wonder, how can I save current file automatically in VSCode after leaving insert mode in Vim by pressing Esc key?

2 Answers 2

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

Replacing with :w works, but this is probably a slightly more elegant solution (if you have other save commands you’d like to run for example).

You can add an insertModeKeyBinding to the Esc key in your settings.json like this:

Note that this will ONLY save if you go from insert mode to normal mode with the Esc key.

edit: After a bit of testing, I found out you need to stay in insert mode for around 2 seconds after your last change for it to work, otherwise it won’t see the keystroke as a single event.

Есть ли в Visual Studio 2017 функция автосохранения для устранения ошибок и сбоев?

Поэтому я недавно переключился на использование Visual Studio 2017 для разработки своих проектов на C ++ / MFC. (До этого я работал с несколько более старой VS 2008, которая раньше очень часто вылетала.) Но теперь VS2017 дает сбой почти каждый день. И если я забуду нажать «Сохранить», это буквально отнимает последние 10-15 минут моей работы, если не больше.

Я пытался сообщить об этом в Microsoft (летом 2018 года, 6 месяцев назад). Некоторые из моих отчетов были закрыты сразу же, когда им требовалось больше доказательств, и у меня не было времени разобраться с их ленью, чтобы прочитать весь пост, но некоторые, которые были приняты, все еще открыты и никогда не были исправлены. Итак, я закончил отправлять отчеты об ошибках через этот портал.

На данный момент я могу только спросить, есть ли в VS2017 «функция» автосохранения, похожая на ту, что сделала Adobe с их AfterAffects?

Решение

Вы можете найти плагин на рынке, который делает эту работу.

Как мне отключить автосохранение Visual Studio Code

Несколько месяцев назад я наблюдал что angular-cli или Visual Code это сохранение моих файлов после короткой задержки. Что вызывает перекомпиляцию проекта и рефреш страницы. Полезно но расстраивает немного ждать пару секунд каждый раз для рефреша. Даже после просто открытия файла. Так вот, решение которое как раз попало мне очень простое. Зайдите в Preferences/Settings, в Workspace Settings поставьте

Вот и всё! Теперь ваш проект будет компилироваться ТОЛЬКО после того как вы нажали save.

4 ответа

Как отключить автоскрытие solution explorer (Visual Studio 2017)? Каждый раз после запуска проекта, solution explorer делает автоскрытие. Как это отключить?

Как упомянул @Alex Varghese в своем ответе вы можете сделать это в настройках. Одно дополнение это даже если вы отключите опцию автосохранения в ваших настройках пользователя, что не перепишете опцию у вас под Workspace settings, поэтому вам придется делать изменения там так же.

Vscode версии 1.34 отсюда как раз добрался до меню файлов и нажать на «Auto Save», чтобы включить или отключить автосохранение.

Вместо того чтобы полностью отключить автосохранение я предпочитаю просто увеличить delay и сохранить его, e.g. через 10 мин. У вас есть полный контроль, когда его сохранять вручную, но если забыть, то он сохранит его через указанный длительный срок.

Файлы: Автосохранение : Контролирует автосохранение грязных файлов.
ПослеЗадержка

Файлы: Автосохранение задержки : Контролирует задержку в мс после чего грязный файл сохраняется автоматически. Только применяется когда у файлов: Автосохранение установлено в afterDelay.
600000

Секретные хаки VS Code

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

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

Улучшаем внешний вид

1. Material Theme & Icons

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

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

2. Zen Mode с центрированием

Возможно, вы уже знаете режим просмотра Zen, также известный как Distraction Free View (для тех, кто знает Sublime Text), где всё (кроме кода) удаляется, чтобы ничего не отвлекало от редактора кода. Вы знали, что можете центрировать расположение для того, чтобы прочитать код, как если бы использовали PDF viewer? Это помогает сосредоточиться на функции или изучить чужой код.

Zen Mode: [View > Appearance > Toggle Zen Mode]

Center Layout: [View > Appearance > Toggle Centered Layout]

3. Шрифты с лигатурами

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

Попробуйте использовать Fira Code. Он потрясающий и с открытым исходным кодом.

Так можно поменять шрифт в VSCode после его установки:

4. Rainbow Indent

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

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

5. Настройка строки заголовка

Я узнал об этом приеме в одном из уроков React&GraphQL которые проводил Wes Bos. В основном он переключал цвета заголовков на разных проектах, чтобы легко распознавать их. Это полезно, если вы работаете с приложениями, которые могут иметь одинаковый код или имена файлов, например, мобильное приложение react-native и веб-приложение react.

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

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

1. Оборачивание тегами

Если вы не знаете Emmet, то скорее всего, вам очень нравится печатать. Emmet позволяет набирать сокращенный код и получать соответствующие теги. Это делается путем выбора группы кода и ввода команды Wrap with Abbreviated, которую я связал с помощью shift+alt+.

Представьте, что вы хотите обернуть все это, но как отдельные строки. Вы бы использовали wrap с отдельными строками, а затем вставляли * после аббревиатуры e.g. div*

2. Balance Inwards and Outwards

Рекомендую посмотреть vscodecandothat.com

3. Turbo Console.log()

Никто не любит печатать длинные функции, такие как console.log(). Это реально раздражает, если вы хотите вывести что-то быстро, посмотреть значение и продолжить писать код.

Вы можете это сделать, используя расширение Turbo Console Log. Оно позволяет регистрировать любую переменную в строке ниже с автоматическим префиксом, следующим за структурой кода. Вы также можете раскомментировать/комментировать alt+shift+u/alt+shift+c всю консоль после добавления расширения.

4. Live server

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

5. Копипаст с несколькими курсорами

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

6. Breadcrumbs и outlines

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

The Outline View имеет различные режимы сортировки, опциональное отслеживание курсора. Он также включает в себя поле ввода, которое фильтрует имена при вводе. Ошибки и предупреждения также отображаются в представлении структуры, позволяя сразу увидеть место проблемы.

Другие хаки

Маленькие хитрости, которые меняют всё

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

Вы часто сталкиваетесь с привлекательными скриншотами кода с пользовательскими шрифтами и темами, как показано ниже. Это было сделано в VS Code с расширением Polar code.

Carbon — хорошая и более настраиваемая альтернатива. Однако Polacode позволяет оставаться в редакторе кода и использовать любой собственный шрифт.

3. Quokka (JS/TS ScratchPad)

Quokka — это площадка для быстрого создания прототипов для JavaScript и TypeScript. Он запускает код сразу по мере ввода и отображает различные результаты выполнения и журналы консоли в редакторе кода.

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

Он также может помочь вам изучить функции библиотеки, такие как Lodash или MomentJS, прежде чем вы перейдете к фактическому использованию.

4. WakaTime

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

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

5. VSCode Hacker Typer

Вы когда-нибудь печатали код перед толпой? Часто мы печатаем на автомате, параллельно разговариваем, из-за этого допускаем ошибки. Представьте себе предварительно набранный код, который появляется только тогда, когда вы имитируете набор текста, как в geektyper.

Jani Eväkallio принес в VS Code это расширение. Оно поможет записывать и воспроизводить макросы (код, написанный в вашем редакторе), делая вас более сосредоточенным при наборе текста для аудитории.

6. Exclude folders

Я научился этому трюку благодаря посту на StackOverFlow. Это быстрый трюк для исключения таких папок, как node_modules или любых других, из дерева проводника, чтобы помочь сосредоточиться на главном. Лично я ненавижу открывать утомительную папку node_module в редакторе, поэтому решил скрыть ее.

Чтобы скрыть node_modules, вы можете сделать это:

Хоткеи для VS Code: гифки с демонстрацией и шпаргалка

Любую команду в Visual Studio Code можно выполнить через командную строку (Ctrl + Shift + P), но сочетания клавиш помогают сильно экономить время. Достаточно только привыкнуть их использовать.

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

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

Время от времени заходить в настройки всё же приходится. Этот хоткей ускоряет процесс.

Показать список горячих клавиш: Ctrl + K Ctrl + S

Переключиться между средами разработки: Ctrl + R

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

Глобальный перенос по словам: Alt + Z

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

Перейти на строку: Ctrl + G

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

Перейти к файлу: Ctrl + P

Самый быстрый способ переключения между файлами (особенно если они ещё не открыты).

Перейти к следующей ошибке или предупреждению: F8

Отладка одной клавишей во плоти. Ещё можно переходить на предыдущую ошибку или предупреждение, используя Shift + F8.

Переключиться между вкладками: Ctrl + Tab

Быстрый способ переключения между уже открытыми файлами.

Поместить курсор в конец каждой выделенной строки: Shift + Alt + I

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

Выделить текущую строку: Ctrl + L

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

Выделить все вхождения текущего выделения: Ctrl + Shift + L

Хоткей сэкономит время, потому что теперь не нужно использовать Ctrl + D во всём файле.

Выделить все вхождения текущего слова: Ctrl + F2

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

Подсказки по параметрам: Ctrl + Shift + Space

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

Форматировать документ: Shift + Alt + F

Специально для тех, кому лень постоянно придерживаться правил форматирования.

Форматировать выделенную область: Ctrl + K Ctrl + F

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

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

Быстрый способ перейти к определению функции или переменной.

Показать определение: Alt + F12

Сочетание клавиш похоже на прошлое, но в этом случае курсор никуда не перемещается.

Переименовать переменную: F2

Незаменимый хоткей для рефакторинга кода.

Обрезать пробелы в конце: Ctrl + K Ctrl + X

Чтобы вручную не удалять лишние пробелы в конце строки. Работает при выделении нескольких строк.

Отобразить открытый файл в проводнике: Ctrl + K R

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

Замена в файлах: Ctrl + Shift + H

Если одного файла вам не достаточно.

Превью Markdown-файла: Ctrl + K V

Открыть предпросмотр Markdown-файла.

Включить Zen Mode: Ctrl + K Z

Не позволяйте навязчивым интерфейсам отвлекать вас от программирования. Хоткей поможет сконцентрироваться на коде.

Visual Studio Code – редактор кода для Linux, OS X и Windows

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

Mac OS X

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

Linux

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

Windows

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

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

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

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

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

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

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

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

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

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

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

Поиск

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

Подсказки IntelliSence

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

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

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

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

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

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

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

Отладка

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

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

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

Конфликты

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

Открывать файлы всегда в новой вкладке

Я использую Visual Studio Code 1.3.1 с новыми вкладками.

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

Как я могу избежать этого и заставить Visual Studio Code всегда открывать новую вкладку?

24 ответа

Чтобы открыть файл для редактирования (т. Е. Не открывать в режиме предварительного просмотра), дважды щелкните файл на боковой панели или щелкните его один раз на боковой панели, а затем дважды щелкните заголовок вкладки «Режим предварительного просмотра».

Подробнее о режиме предварительного просмотра Visual Studio Code можно узнать здесь.

Как указывает hktang выше:

Один щелчок открывает файл в режиме предварительного просмотра (текст заголовка выделен курсивом)

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

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

Вы можете сделать это через графический интерфейс

Найдите предварительный просмотр

Снимите флажки с опций Enable Preview и Enable Preview from Quick Open

Спасибо @jontem и @MattLBeck.

Включение использования графического интерфейса

Здесь Открыть файлы в новом окне в раскрывающемся списке выберите «Вкл», вот и все.

Мой VS Code версии 1.38.1

Затем в поле поиска введите Предварительный просмотр.

После этого выберите Workbench и найдите Включить параметры предварительного просмотра.

Фактически, VSCode показывает вам предварительный просмотр файла, когда вы его открываете. Если вы хотите открывать файлы в новой вкладке, просто отключите предварительный просмотр с помощью этого параметра (вставьте его в файл settings.json).

— вы можете сделать еще один шаг и использовать эту настройку

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

Вам нужно отредактировать файл setting.json,

Settings.json, расположенный по адресу

⚡ Фактически, VSCode показывает вам предварительный просмотр файла.

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

⬇️ В основном просто добавьте эти две настройки, и все готово.

По сути, есть три параметра, которые необходимо обновить (Предпочтения >> настройки):

workbench.editor.enablePreview: установите глобальное включение или отключить редакторы предварительного просмотра

workbench.editor.enablePreviewFromQuickOpen: включите или отключить редакторы предварительного просмотра при открытии из Quick Open

workbench.editor.showTabs: наконец, нужно установить это
в противном случае вкладки не будут отображаться, и вы просто будете
интересно, почему установка / отключение двух вышеупомянутых не работает

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

Для меня shift + enter сделали свое дело.

В моем случае мне также пришлось установить для свойства workbench.editor.showTabs значение true (в дополнение к workbench.editor.enablePreview )

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

Это так сбивает с толку. Все разработчики, которых я спрашивал, не оценили такое поведение по умолчанию.

Я использую cmd + P для открытия файлов проекта.

Меню Файл → Настройки → Настройки пользователя : добавьте эту строку «workbench.editor.enablePreviewFromQuickOpen»: false

Кроме того, двойной щелчок по вкладке также выводит ее из режима предварительного просмотра (проверено в vscode 1.44.0).

Для тех, кто использует ОС Windows:

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

Для справки посмотрите на снимок экрана ниже:

Быстро вывести файл из режима предварительного просмотра

Чтобы файл всегда был доступен в редакторе VSCode (т. Е. Чтобы перевести его из Preview Mode в нормальный режим), вы можете дважды щелкнуть на вкладке. Затем вы заметите, что имя становится не курсивом.

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

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

Базовые навыки использования и работы с VScode

Basics

Welcome and interactive playground

В справке в строке меню есть приветственная и интерактивная игровые площадки.

Command Palette

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

Keyboard reference sheets

У разных платформ могут быть разные.

Quick open files

Сочетание клавиш: ctrl + p

Navigate between recently opened files

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

Open multiple files from Quick Open

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

Navigate between recently opened folders and workspaces

Сочетание клавиш: ctrl + r

Command lines

Код VS имеет мощный интерфейс командной строки (Command Line Interface, CLI), с помощью которого вы можете взаимодействовать с внешним миром или изменять внутренние настройки программного обеспечения.

Status bar

Errors and warnings

Быстрый переход к ошибкам и предупреждениям проекта: ctrl + shift + m.
Циклический просмотр ошибок: F8 / shift + F8
Вы также можете фильтровать вопросы по типу или соответствию текста.

Change language mode

Сочетание клавиш: ctrl + k m.

Customization

Пользовательская настройка также возможна в VS-коде:

Change your theme

Сочетание клавиш: ctrl + k ctrl + t.
Вы можете загрузить и установить различные темы на торговой площадке расширений кода VS, а также можете установить и изменить тему значка файла.

Keymaps

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

Customize your keyboard shortcuts

Сочетание клавиш: ctrl + k ctrl + s

Вы можете настроить сочетания клавиш, отредактировав файл keybindings.json.

Tune your settings

По умолчанию VS Code отображает редактор настроек, вы можете найти перечисленные настройки в строке поиска, но вы все равно можете использовать команду «open settings (JSON)» для редактирования файла settings.json или изменения настроек по умолчанию с помощью рабочей среды. settings.editor settings Редактор настроек.
Откройте сочетание клавиш user settings.json: ctrl +,
Измените размер шрифта для разных элементов пользовательского интерфейса:

Измените уровень масштабирования:

Измените лигатуру шрифта:

Вы также можете использовать «Файл»> «Автосохранение» для автоматического сохранения.

Измените расстояние отступа символов табуляции:

Пробелы или табуляции:

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

Игнорировать файлы / папки:

Удалите файлы / папки из окна редактора:

Удалите файлы / папки из результатов поиска:

Language specific settings

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

Вы также можете создать определенные языковые настройки с помощью команды configure language specific settings.

Add JSON validation

По умолчанию включены многие типы файлов. Создайте свою схему и проверку в settings.json.

Или определите архитектуру в собственном рабочем пространстве:

Или пользовательская архитектура:

Extensions

Сочетание клавиш: ctrl + shift + x.

Find extensions

В представлении «Расширения» вы можете выполнить поиск в строке поиска, установить или создать собственное расширение.

Files and folders

Integrated terminal

Сочетание клавиш: ctrl + `.

Toggle sidebar

Сочетание клавиш: ctrl + b.

Toggle Panel

Сочетание клавиш: ctrl + j.

Zen mode

Сочетание клавиш: ctrl + k z.

Клавиша Esc для выхода.

Side by side editing

Сочетание клавиш: Ctrl + \.

Switch between editors

Сочетания клавиш: Ctrl + 1, Ctrl + 2, Ctrl + 3.

Move to Explorer window

Сочетание клавиш: Ctrl + Shift + e.

Create or open a file

Сочетание клавиш: Ctrl + щелчок.

Close the currently opened folder

Сочетание клавиш: Ctrl + F4.

Navigation history

Навигация по всей истории	Ctrl+Tab
назад	Alt+Left
вперед	Alt+Right

Preventing dirty writes

Editing hacks

Multi cursor selection

Добавьте курсор в любую позицию: используйте мышь, чтобы выбрать позицию, а затем используйте Alt + Click.

Установите курсор выше или ниже текущей позиции: Ctrl + Alt + Up / Ctrl + Alt + Down.

Добавьте курсор ко всем экземплярам текущего выделения: Ctrl + Shift + L.

Если вам не нужно добавлять курсор ко всем текущим выделениям, вы можете вместо этого использовать Ctrl + D. При этом будет выбрано только следующее событие, поэтому вы можете добавлять выборки один за другим.

Column (box) selection

Вы также можете удерживать Shift + Alt, перетаскивая мышь, чтобы выбрать текстовый блок.

Vertical rulers

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

Fast scrolling

Нажмите клавишу Alt для быстрой прокрутки в редакторе и проводнике. По умолчанию для быстрой прокрутки используется 5-кратная скорость, но вы также можете использовать параметр editor.fastScrollSensitivity для управления.

Copy line up/down

Сочетание клавиш: shift + alt + вверх / shift + alt + вниз.

В Linux команда Копировать строку вверх / вниз не привязана, потому что привязка ключей по умолчанию для VS Code будет конфликтовать с привязкой клавиш Ubuntu. Но вы можете передать команду

Editor.action.copyLinesUpAction и editor.action.copyLinesDownAction установлены как предпочтительные сочетания клавиш.

Move line up and down

Сочетание клавиш: alt + вверх / alt + вниз.

Shrink/expand selection

Сочетание клавиш: Shift + Alt + Left / Shift + Alt + Right.

Go to Symbol in File

Сочетание клавиш: Ctrl + Shift + O.

Вы можете группировать символы, добавляя @ :.

Go to Symbol in Workspace

Сочетание клавиш: Ctrl + T.

Outline view

Вид «схемы» в проводнике (по умолчанию свернутый внизу) показывает символ текущего открытого файла.

Вы можете отсортировать символы по имени, категории и местоположению в файле, а также быстро перейти к местоположению символа.

Navigate to a specific line

Сочетание клавиш: Ctrl + G.

Undo cursor position

Сочетание клавиш: Ctrl + U.

Trim trailing whitespace

Сочетание клавиш: Ctrl + K Ctrl + X.

Transform text commands

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

Code formatting

Текущий выбранный исходный код: Ctrl + K Ctrl + F.

Формат всего документа: Shift + Alt + F.

Code folding

Сочетание клавиш: Ctrl + Shift + [Ctrl + Shift +].

Сверните / откройте все области в редакторе: сложите все (Ctrl + K Ctrl + 0), разверните все (Ctrl + K Ctrl + J).

Сверните все комментарии к блокам: Сверните все комментарии к блокам (Ctrl + K Ctrl + /).

Select current line

Сочетание клавиш: Ctrl + L.

Navigate to beginning and end of file

Сочетание клавиш: Ctrl + Home / Ctrl + End.

Open Markdown preview

В документах Markdown сочетание клавиш: Ctrl + Shift + V.

Side by side Markdown edit and preview

В документах Markdown сочетание клавиш: Ctrl + K V.

IntelliSense

Ctrl + Space запускает виджет предложений.

Выберите символ и нажмите Alt + F12. Или воспользуйтесь контекстным меню.

Go to Definition

Выберите символ и введите F12. Или воспользуйтесь контекстным меню или нажмите Ctrl и щелкните.

Вы можете использовать команду «Перейти»> «Назад» или «Alt + Left», чтобы вернуться в предыдущее положение.

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

Go to References

Выберите символ и нажмите Shift + F12. Или воспользуйтесь контекстным меню.

Find All References view

Выберите символ, затем нажмите Shift + Alt + F12, чтобы открыть представление «ссылки» и отобразить все символы файла в специальном представлении.

Rename Symbol

Выберите символ и введите F2. Или воспользуйтесь контекстным меню.

Search and modify

Debugging

Configure debugger

Откройте палитру команд (Ctrl + Shift + P), затем выберите «Отладка: открыть launch.json», выберите среду, соответствующую проекту (Node.js, Python, C ++ и т. Д.). Это сгенерирует файл launch.json. Поддержка Node.js встроена, в других средах требуется установка соответствующих языковых расширений.

Breakpoints and stepping through

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

Data inspection

Проверьте переменные на панели «запустить» и в консоли.

Inline values

Установите «debug.inlineValues»: true для просмотра значений переменных в отладчике. Эта функция может снизить скорость шага, поэтому по умолчанию эта функция отключена.

Logpoints

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

Используйте команду «Добавить точку журнала» в поле редактора слева, чтобы добавить точку журнала, которая будет отображаться в виде значка ромба. Сообщение журнала представляет собой обычный текст, но может содержать выражения для вычисления в фигурных скобках (‘<>‘).

Task runner

Auto detect tasks

Выберите «Терминал» в верхней строке меню, запустите команду «Настроить задачи», а затем выберите тип задачи, которую хотите запустить. Это сгенерирует файл task.json со следующим содержимым:

Однако иногда возникают проблемы с автоматической генерацией.

Run tasks from the Terminal menu

Выберите «Терминал» в верхней строке меню, запустите команду «Выполнить задачу», а затем выберите задачу, которую хотите запустить. Завершите запущенную задачу, выполнив команду Завершить задачу.

Define keyboard shortcuts for tasks

Вы можете определить сочетания клавиш для любой задачи. В палитре команд (Ctrl + Shift + P) выберите Параметры: Открыть файл сочетаний клавиш, привяжите необходимые сочетания клавиш к команде workbench.action.tasks.runTask, а затем определите задачу как аргументы.

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

Интеллектуальная рекомендация

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

утилита jsp

Инструмент получения параметров.

Закрытие

Автоматически выполнять команду при загрузке / завершении работы под Centos

Давайте взглянемchkconfigНесколько уровней запуска. Уровень 0 означает: выключение. Уровень 1 означает: однопользовательский режим. Уровень 2 означает: многопользовательский режим командной строки без.

Страница «Автовосстановление», папка «Среда», диалоговое окно «Параметры»

Сохранять данные автовосстановления каждые [n] мин

Хранить данные автовосстановления [n] дн.

VS Code Live Server – How to Auto-Refresh Your Browser with this Simple Extension

Visual Studio Code is one of the most popular code editors out there. It’s free, it has a clean interface, and it has countless extensions which make programming easier and more fun.

I’m a frontend web developer and I use VS Code while I work and on my YouTube channel. I’ve had many people ask me how the browser gets refreshed automatically while I’m coding, without clicking the reload button.

Well, this is possible if you configure a useful extension in VS Code called live-server. In this post, I will explain the details of how it works and how to set up and configure a live server in your VS Code editor.

Why should I use the live-server extension?

Normally, when you make a change in your code or write something new, you need to refresh the page manually to see the changes.

In other words, if you make 100 changes in your code each day, you need to refresh the browser 100 times.

The live-server extension, however, automates this for you. After installing it, an automated localhost will be able to run in your browser, which you can start with a single button.

Once you make changes in your code or write something new, after saving it, the browser will auto-refresh itself. Then you will be able to see the changes quickly and automatically.

If you prefer, you can also watch the tutorial video below:

First, Install VS Code

You can skip this part if you have already installed VS Code on your computer. Otherwise, you can download it from its official website.

Visual Studio Code Official Website

After you’ve downloaded and installed VS Code, you are going to see the welcome screen:

On the left side, you should see a couple of icons. One of them (under the no bugs icon) is the extensions button:

Once you click on it a search bar will appear. Just type in “live server”.

You will see many options, so you can choose whichever one works for your system. I use Live Server by Ritwick Dey, so let’s continue with that one in this example:

Click on the install button and it will install the extension.

Create a New HTML Page

To start the live server, make sure you at least have an HTML page created. To do that, click on the file button at the very top, then choose the new file button and type index.html:

New File Icon with Plus Sign (2nd from left)

Configuration Issues

Now after you created an HTML page and installed the extension you should be able to see a “Go Live” icon right below in the blue field:

If you don’t see it just restart VS Code. Then it should be OK.

Click on the «Go Live» button and the localhost (assigned to a port number) should start on your default browser. You can start and stop your live server anytime by clicking on the same button.

If you have reached this step, congratulations! 🙂 Now you can work with the live-server. Otherwise, if you are still having issues, check out this post for more info.

Conclusion

I hope this post helps you install and configure the live server extension in VS Code. If you want to learn more about web development, feel free to visit my Youtube channel.

Thank you for reading!

Front-end Developer // Follow Me on Youtube: https://bit.ly/3dBiTUT

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit organization (United States Federal Tax Identification Number: 82-0779546)

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Как просмотреть HTML-файл в браузере с помощью Visual Studio Code

Как я могу просмотреть свой HTML-код в браузере с новым кодом Microsoft Visual Studio?

С Notepad ++ у вас есть возможность запускать в браузере. Как я могу сделать то же самое с Visual Studio Code?

Ответьте как на открытие определенного файла (имя жестко запрограммировано), так и на открытие ЛЮБОГО другого файла.

Шаги:

Используйте ctrl + shift + p (или F1 ), чтобы открыть палитру команд.

Не забудьте изменить раздел «args» файла tasks.json на имя вашего файла. Это всегда будет открывать этот конкретный файл, когда вы нажимаете F5.

Вернитесь к своему html-файлу (в данном примере это «text.html») и нажмите ctrl + shift +, b чтобы просмотреть свою страницу в веб-браузере.

VS Code имеет расширение Live Server, которое поддерживает запуск одним щелчком мыши из строки состояния.

Если у вас уже открыт Chrome, он запустит ваш html-файл в новой вкладке.

Если вы хотите выполнить перезагрузку в реальном времени, вы можете использовать gulp-webserver, который будет следить за изменениями ваших файлов и перезагружать страницу, таким образом вам не нужно нажимать F5 каждый раз на вашей странице:

Вот как это сделать:

Откройте командную строку (cmd) и введите

tasks.json

gulpfile.js

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

Вы также можете запустить свою задачу, просто введя Ctrl + P и набрав веб-сервер задачи

версия vscode: 1.10.2

Открыть боковую панель расширений ( Ctrl + Shift + X )

Щелкните правой кнопкой мыши свой html-файл и выберите «Открыть в браузере» ( Alt + B ).

Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:

Для работы на веб-сервере:

Обновленный ответ от 18 апреля 2020 г.

Щелкните значок управления слева внизу. Нажмите » Расширения» или «Сокращенный вариант» Ctrl+Shift+X

Теперь щелкните html файл правой кнопкой мыши, и вы увидите « Открыть в браузере по умолчанию» или «Ярлык», Ctrl+1 чтобы просмотреть html файл в браузере.

В Linux вы можете использовать xdg-open команду, чтобы открыть файл в браузере по умолчанию:

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

1. Установите Node.js

Если он еще не установлен, получите его здесь

Он поставляется с npm (менеджер пакетов для получения и управления вашими библиотеками разработки)

2. Создайте новую папку для своего проекта.

Где-нибудь на вашем диске создайте новую папку для вашего веб-приложения.

3. Добавьте файл package.json в папку проекта.

Затем скопируйте / вставьте следующий текст:

4. Установите веб-сервер.

В окне терминала (командная строка в Windows), открытом в папке вашего проекта, выполните эту команду:

Это установит lite-server (определенный в package.json), статический сервер, который загружает index.html в ваш браузер по умолчанию и автоматически обновляет его при изменении файлов приложения.

5. Запустите локальный веб-сервер!

(Предполагая, что у вас есть файл index.html в папке вашего проекта).

В том же окне терминала (командная строка в Windows) выполните эту команду:

Подождите секунду, и index.html загрузится и отобразится в вашем браузере по умолчанию, обслуживаемом вашим локальным веб-сервером!

lite-server наблюдает за вашими файлами и обновляет страницу, как только вы вносите изменения в любые файлы html, js или css.

И если у вас есть VS Code, настроенный на автоматическое сохранение (меню «Файл» / «Автосохранение»), вы увидите изменения в браузере по мере ввода!

Примечания:

Вот и все. Теперь перед любым сеансом программирования просто введите npm start, и все готово!

Первоначально размещено здесь, в msdn блоге. Кредиты принадлежат автору: @Laurent Duveau

Disable VSCode prompt: «Do you want to save your workspace configuration»?

Using the latest, released version of VSCode, at the time of this writing (2018-Jan-29; version 1.19.3), I see the following behavior (which is unnecessarily time-consuming, for my needs):

Whenever I attempt to close a window that has files open from multiple, disparate directories, I get the following prompt:

«Do you want to save your workspace configuration as a file?»

A set of buttons is also presented, offering me options.

This prompt does not come up if I try to close a window with a single file being open, or a single directory.

Here is an example of how to launch VSCode from an OS command prompt, to reproduce this prompt:

code path/to/DirectoryA path/to/DirectoryB

I rarely want, or need, to save a new workspace. I would rather this prompt never appear. I am ok creating workspaces through other means, if and when necessary.

Is there a way to disable this prompt via one or more setting(s) in VSCode?

See unsaved changes in vscode

My question: How can I see the diff between the saved version of a file, and the version in the editor window? I think it would be nicest just to have a «show diff» option in the dialogue, but for now I’m also happy with a command line diff command.

I’m using ubuntu 20.04.

3 Answers 3

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

I’m using VSCode version 1.52.1 on MacOS and I had a similar problem that may not be the same problem, but I’m guessing it will work for you as well.

When you’re in the Explorer view, in the upper left part of Explorer you have your «Open Editors.» If that shows a dot to the left indicating that the buffer has changes in it, you can right click the file name and select «Compare with Saved.» This will open another buffer to the side that will show you any unsaved changes.

To get rid of that window (it took me a bit to figure this out I’m sorry to say!), you can click the ‘X’ to the left of the extra buffer in «Open Editors.»

Hope this works for you!

A few bright notes for the keyboard players out there:

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

Бесплатный, мощный, очень популярный, с кучей дополнений, да что там говорить, сам Фейсбук выбрал его в качестве основного редактора!

Сегодня речь пойдет о редакторе кода Visual Studio Code или просто VS Code. Мы с тобой его установим, настроим, а также применим плагины, которые существенно упростят нам работу.

Если больше интересен редактор кода Sublime Text 3 по нему статья тут https://habr.com/ru/post/458206/

Содержание:

Удаление

В строке пути нужно дописать AppData, далее переходим в папку Roaming и здесь нужно удалить папку Code.

Установка

Отлично, теперь мы можем установить программу. Переходим на сайт code.visualstudio.com, секция Download. Здесь есть версия под Mac, Linux. Меня интересует Windows. Нажимаем и скачиваем себе на ПК. Кстати, сайт программы очень полезный, поэтому советую его изучить.

Программа скачана, запускаем инсталлятор и следуем инструкциям: принимаем, добавляем все галочки, далее, ждем пока программа установится на наш ПК.

Запуск на слабой машине

Когда программа установлена, можем ее запустить. Но запустится она не на каждом компьютере. Дело в том, что программа достаточно ресурсоемкая. Поэтому на слабой машине можно получить такой результат: вместо интерфейса программы черный экран, а процессор потеет на все 100%. Но выход есть — необходимо открыть контекстное меню ярлыка программы и дописать в пути к файлу вот такой флаг: —disable-gpu

Отлично, теперь программа запуститься даже на калькуляторе.

Установка языка

Программа запущена и мы можем приступить к знакомству с ней. А чтобы знакомится было проще, я установлю русский язык. Для этого я щелкаю на иконку расширений, В поле поиска начинаю писать russian, пока не увижу пакет Russian Language Pack for Visual Studio Code.

Жму на кнопочку Install. Далее программа попросит перезапуститься, делаем это. Отлично, теперь будет намного понятней. Но, если ты владеешь английским, то переходить на русский совсем не обязательно.

Экран Приветствия

Боковую панель я пока скрою, мы еще не раз к ней вернемся.
Первое, что мы видим — это экран приветствия. Здесь есть пункт, с помощью которого мы можем импортировать все настройки, клавиши из уже установленных редакторов, например Vim, Sublime, Atom и другие.

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

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

Интерфейс из коробки

Лень читать? Тут видео версия.

Все приготовления сделаны и теперь мы можем ознакомиться с интерфейсом программы и заодно посмотрим что может VS Code из коробки.

Вызовем окно Общие сведения об интерфейсе и посмотрим основные элементы программы.

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

Рассмотрим все подробнее.

Строка состояния

Проблемы

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

Чтобы открыть панель, нужно щелкнуть на эти иконки либо зажать Ctrl+Shift+М, здесь нам будет выводиться сам текст сообщений о проблемах.

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

Консоль отладки

Помимо вкладки вывода проблем в этой панели у нас еще есть Консоль отладки кода, к ней мы еще вернемся.

Вывод

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

Терминал

Последняя вкладка в этой панели — встроенный терминал. Вызвать его можно зажав Ctrl+`.

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

Например, у меня установлен GitBash. Выбрав его, добавляем новое окно терминала, у меня откроется именно этот интерфейс.Традиционно здесь можно развернуть панель на весь экран и закрыть ее.

Уведомления

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

Также в панели состояния будут появляться множество других элементов.

Контекстное меню

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

Также в этом же контекстном меню можем скрыть эту строку полностью.

Панель действий

По умолчанию в левой части редактора расположилась панель действий с 6 элементами:

Проводник

Начнем с Проводника, открыть его можно кликнув на иконку либо зажав Ctrl+Shift+E.

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

Тут мы видим 3 основные вкладки:

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

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

Сейчас у нас появилась пустая папка hello_vscode, а также некоторые элементы управления:

Давай создадим некоторые файлы, которые нам нужны для проекта. Нажимаем Создать файл, пишем например Index.html. Далее мы можем создать папку css и в ней создать файл style.css. Очень удобно пользоваться этим встроенным файл менеджером.

Также для создания файлов и папок можно пользоваться контекстным меню. Помимо этого здесь есть еще интересные функции, например показать папку в проводнике Windows.

Теперь мы можем перейти в Index.html и написать туда что-то интересное, например “Hello VC Code”.

Подсветка синтаксиса

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

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

В итоге у меня останется только папка с проектом.

Поиск

Поиск (Ctrl+Shift+F) — штука нужная. Пишем слово hello, которое мы указывали в нашем html файле. Поиск его сразу же нашел, подсветил, показал в каком файле. Тут же можно заменить это слово на какое-то другое.

Здесь удобно нам все это показывает, нажав здесь на иконку слово будет заменено.

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

Открыть вкладку можно кликнув на иконку либо зажав Ctrl+Shift+G. Для тех, кто уже знаком с системами контроля версий, например Git, тот оценит эту возможность. Немного позже я покажу как связать свой локальный проект с репозиторием на GitHub.

Отладка приложения

Следующий элемент панели действий — это Отладка приложения. Этот инструмент как самостоятельно так и с помощью сторонних плагинов позволяет нам анализировать выполнение того или иного программного кода.

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

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

Расширения

Тут у нас целый склад расширений и плагинов для нашего редактора. Мы уже использовали эту вкладку для установки языкового пакета. Кликаем на иконку либо зажав сочетание клавиш Ctrl+Shift+X мы увидим поле поиска расширений и три дополнительных вкладки:

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

Настройки

На панели действий у нас остался еще один элемент — шестеренка — меню основных настроек. Здесь мы можем вызвать палитру команд кликнув тут или Ctrl+Shift+P. Откроется такой блок, где мы можем найти и выполнить любую команду редактора или установленных плагинов.

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

Заканчивая с Панелью действий, стоит отметить, что можно быстро вызвать последнюю открытую вкладку сочетанием Ctrl+B. Также скрыв контекстное меню можно скрыть ненужный элемент. Например, Запуск и Отладка я скрою. В этом же контекстном меню можно скрыть всю панель действий целиком.

Область редактора

Лень читать? Тут видео версия.

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

Здесь есть дополнительное меню для управления всеми файлами.

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

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

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

Что тут можем мы настроить?

Как я уже показывал, окно редактора можно разделить на несколько частей, это удобно при работе с разными файлами. Для того, чтобы посмотреть разные варианты, нужно перейти в Вид > Макет редактора. Здесь есть куча вариантов, например две строки и мы можем какой-то файл переместить сюда и работать так. Также есть вариант Сетка 2х2. То есть, можно работать одновременно с 4 файлами.

Также можно быстро оформить нужное положение файлов, просто перетаскивая их. Я сразу сформировал себе нужный макет для работы. Также есть возможность настроить вид всей области редактора. Откроем Меню > Вид > Внешний вид.

Снизу есть возможность регулировать масштаб всей программы. Не путайте с размерами шрифта. Удобно пользоваться сочетаниями клавиш. Например, для увеличения элементов я нажимаю Сtrl+, для уменьшения — Ctrl-, для сброса настроек — Ctrl+0.

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

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

Режимы экрана

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

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

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

Чтобы выйти из него, нажимаю Escape.

Перенос текста

Далее в самом меню Вид мы можем включить или выключить перенос текста, это можно сделать зажав Alt + Z. Что это значит? Например, у нас есть очень длинный текст, который не помещается в область кода и появляется горизонтальная прокрутка. Если это кажется неудобным, можно нажать Alt + Z весь наш текст перенесется, чтобы поместиться в область кода.

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

Цветовая схема

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

Если ни одна из этих тем не подходит, мы можем установить свою. Для этого я возвращаюсь к вкладке Расширения, в поле поиска пишу название своей темы — SpaceOceanKit. Нахожу, нажимаю Install. Далее у меня есть выбор какую тему мне выбрать и я выбираю именно ее.

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

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

Иконки

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

Также установить дополнительные пакеты значков. Например, Matherial Icon Theme.

Параметры

Дополнительно настроить комфорт работу с кодом и в целом с редактором можно в Параметрах программы. Для этого переходим в Управление > Параметры или зажимаем Ctrl+,

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

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

Первая полезная опция — автосохранение файла. Для новичков очень крутая опция. Новички часто подходят ко мне с проблемой “Почему у меня ничего не работает?” Я смотрю, а там не сохранен файл.

Выбирайте для себя удобную опцию и двигаемся дальше.

Отображение кода

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

Я настраиваю размер отступа при табуляции. По умолчанию она составляет 4. Как по мне, слишком широкое поле при одном Tab, поэтому я меняю на значение 3, так мне кажется более компактно. Ты же указывай комфортное для тебя значение.

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

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

А то, каким образом определять вставку символов для новых открытых файлов отвечает опция Detect Indentation. Я галочку уберу, потому что хочу, чтобы для всех файлов работали именно мои настроенные параметры.

Скрыть подсказки

Ранее я показывал, что при наведении на элемент в коде всплывают подсказки, часто это может раздражать. Чтобы подсказки убрать, существует параметр Hover Enabled. Галочку можно снять и подсказки пропадут.

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

Мы можем сделать его полупрозрачным, ставятся значения rgba или вообще поменять цвет на другой. Если галочку Hover Enabled уберем, то эта функция тоже пропадает.

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

Mouse Wheel Zoom — поставив галочку, мы сможем в редакторе изменить размер шрифта зажав Ctrl и покрутив колесико мыши.

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

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

Следующая группа настроек отвечает за форматирование, которое уже встроено в редакторе VC Code. Что такое форматирование? Например, мы пишем структуру, в ней еще одну структуру, но по какой-то причине съехала табуляция. При зажатии Shift + Alt + F у нас все выстроится как надо.

Вернемся к нашим настройкам. Здесь мы можем поставить три галочки:

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

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

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

Для быстрого доступа ко всему, что мы настроили, зажимаем Ctrl+Shift+P и в строке поиска пишем Settings, пока не увидим Settings (JSON). Нажимаем и перед нами появятся наши настройки, их тут же можно менять.

В этом же файле будем настраивать и новое расширение.

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

Плагины

Лень читать? Тут видео версия.

Emmet

— этот плагин уже встроен в редакторе VS Code из коробки. И вправду, сегодня сложно себе представить жизнь без Emmet. Супер ускоряет набор кода. Например, именно благодаря ему, я так быстро создал начальный код для HTML файла написав только восклицательный знак и нажав Tab.

Вот еще пример. Нам нужно создать div с классом block для этого я пишу .block и нажимаю Tab. Готово!

Или например посложнее — нам нужно создать маркированный список на 10 элементов. Пишем ul>li*10 Tab. Готово!

То же самое применимо и к файлам стилей. Например, для тега body я хочу задать размер шрифта 20 пикселей. Для этого мне достаточно написать fz20. Нажав Tab я получу уже готовый параметр.

Лучше ознакомиться с возможностями Emmet можно на сайте этого дополнения.

Сниппеты

Но еще круче создавать свои сокращения-сниппеты для быстрого вызова того иного куска кода.
Переходим в Управление > Пользовательские фрагменты кода. Здесь есть выбор:

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

Набираю my, нажимаю и открывается файл my.code-snippets. Здесь есть всякая информация закомментированная, а также пример. Я его раскомментирую. Здесь заготовка сниппета для языка JavaScript.

Надпись означает название самого сниппета. Параметр scope — указываем языки для которых этот сниппет будет применяться. Это необязательный параметр, можно его убрать и сниппет будет применяться для всех языков. Префикс — это сокращения, то есть что мы будем набирать, чтобы вывелся нужный отрезок кода. В поле body мы и пишем наш кусок кода. Здесь будет выводиться console.log Ниже description, здесь можем указать описание.

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

Пишу — “Внешний отступ”, это же можно добавить и в описание. Языки вообще уберу, а префикс я поставлю например mm. В body нужно задать параметр «margin: 0px, 0px, 0px 0px;», я хочу чтобы при наборе mm у меня вывелся такой параметр. Сохраняем Ctrl+S и проверим.

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

Можем проверить тот снипет, который был задан изначально в качестве примера. Переходим в файл js, набираем log Tab.

Я думаю, мне не нужено объяснять, какой скорости можно добиться, грамотно настроив свои сниппеты.

Продолжаем установку плагинов. Зажимаем Ctrl+Shift+X и переходим во вкладку с расширениями.

Live Sass Compiler

Идеальное для тех, кто работает с препроцессорами SASS/SCSS. Ищем наше дополнение и нажимаем Install. Индикатор сверху показывает, что идет установка, Отлично, расширение установлено. Получаем информационное окошко, что все окей.

В строке состояния появляется кнопочка Watch Sass. И сейчас мы будем этот плагин настраивать.

Создадим папку с нашими scss файлами, так ее и назовем. Внутри создадим style.scss.
Напишем код:

У нас пока ничего происходить не будет, но мы можем включить кнопку Watch Sass и плагин начал следить за нашими scss\sass файлами. Рядом с ним автоматически скомпилировались два файла style.css и style.css.map.

Все отлично работает. Но, допустим, мы хотим, чтобы файлы создавались не рядом с файлом scss, а в папке css.

Удалим старые файлы и перейдем к настройкам. Зажимаем Shift+Ctrl+P, вызываем наш Settings (JSON). Можем вставить следующую настройку, обязательно ставим запятую и вставляем две настройки.

Я выключаю генерацию файла-карты, мап-файла. Следующие настройки для собственно самого компилятора. «format» — можно указать, каким именно способом будет генерироваться scss файл — развернутый, ужат, минифицирован и т.д.

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

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

По поводу файлов, которые мы будем включать в style.scss. Мы знаем, что файлы в scss можно импортировать какие-то другие файлы. Пишем, как обычно — import «header.scss»

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

Что происходит? Когда я сохраняю header.scss у меня создается файл header.css. Но мне нужно, чтобы у меня был один файл style.css, который включает в себя и header, и многие другие файлы, которые я туда подключу. Удаляем header, это неправильно. Чтобы этого не было, мне нужно переименовать файл header.scss, указать вначале имени подчеркивание, а здесь при подключении указать подчеркивание и вообще убрать расширение.

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

Live Server

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

В поиске набираем его название, у нас он уже есть, установлен автоматически вместе с Live Css Compiler. Об этом говорит кнопку в строке состояния Go Live. Мы работаем с нашими файлами, когда мы хотим увидеть результат, перейдя в index.html нажимаем на Go Live и у нас запускается Браузер.

Я редактирую свою html файл, пишу “Hello”, сохраняю, нажимаю GoLive и сразу вижу результат в браузере.

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

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

SCSS IntelliSense

Покажу еще несколько интересных плагинов для препроцессора SaSS. Установим SCSS IntelliSense, этот плагин подсказывает нам интересные штуки во время работы с scss, также удобно при работе именно с этим синтаксисом.

SCSS Formatter

Форматирование можно отдельно установить для конкретного синтаксиса. Этот плагин форматирует sсss файлы. Также его можно подстроить.

Auto Complete Tag

Мегаполезный плагин в который входят Auto Rename Tag и Auto Close Tab. Несмотря на то, что VS Code умеет закрывать теги, плагин Auto Close Tab — умеет закрывать теги не только в html, но и в многих других языках. Auto Rename Tag — изменяет закрывающий элемент автоматически, если переименовать открывающий. Например, мне нужно изменить открывающий элемент на span и мы видим, что закрывающий элемент изменит название автоматически.

Bracket Pair Colorizer

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

Indent Rainbow

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

Better Comments

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

Ставим для чего-то очень важного —! — текст окрашен в красный, для списка ToDO — оранжевый, для вопроса —? — синий.

Все цвета можно настроить, есть готовый код с настройками в информации, его можно перенести и там подправить цвета под наши задачи.

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

BEM Helper

Это помощник при работе с методологией BEM. Он умеет вставлять сразу новый элемент по методологии bem, учитывая родителя, учитывая блок. Может вставлять модификатор, помимо всего умеет формировать файл стилей, будь-то css или scss файл на основе bem-разметки в html коде.

Попробуем. Нажимаем Alt+B+E, у нас вставился объект, учитывая класс родителя, клас блока.

Как менять сочетания клавиш?

На примере этого плагина покажу как можно менять сочетания клавиш.
Допустим эти сочетания клавиш нас не устраивают. Мы копируем имя плагина, переходим в Управление > Сочетание клавиш и здесь ищем BEM Helper.

Например, мы хотим изменить сочетание клавиш для вставки элементов Insert Element. Кликаем два раза, можем указать тут любое сочетание клавиш, которое захотим.

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

eCSStractor

Плагин, который помогает копировать классы из html в css\scss\sass. Установим его и сразу создадим сочетания клавиш, чтобы делать все быстро. Переходим в Управление > Сочетание клавиш, ищем наш плагин eCSStractor, видим несколько команд. Меня интересует команда eCSStractor Run (With BEM Nesting).

Нажимаем на команду, на плюсик, придумываем свободное сочетание Ctrl+Alt+1, нажимаем Enter, наши горячие клавиши присвоились.

Тестируем: переходим в наш html файл, выделяем блок с классами, нажимаем Ctrl+Alt+1, получаем сообщение, что наши классы скопировались.

Переходим в файл стилей и вставляем. Видим, что все работает.

Что делать, если нам нужно скопировать просто классы, но без BEM? Возвращаемся сочетания клавиш и нам нужно назначить сочетание Ctrl+Alt+2 например.

Тестим, выделяем, вставляем. Готово, теперь у нас есть две комбинации клавиш — по BEM и без BEM.

CSS Navigation

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

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

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

Это же окошко можно вызвать сочетанием Alt + F12

Image Preview

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

Debugger for Chrome

Для отладки кода можно использовать не встроенный инструмент, а этот плагин и с его помощью делать отладку какого-то скрипта. При нажатии на F5 мы можем выбрать Chrome, вся отладка будет проводиться на основе этого браузера, Нужно его дополнительно настроить и пользоваться.

Vscode Google Translate или Google Translate

Позволяет переводить выделенный текст с одного языка на другой. Для его настройки переходим в плагин, ищем команду translate text.

Переходим в сочетания клавиш, вставляем команду, находим ее и задаем сочетание клавиш, допустим Shift+Alt+T.
Возвращаемся в наш html файл, выделяем слово hello, зажимаем Shift+Alt+T и получаем список языков. Далее выбираем язык, на который нужно перевести и получаем перевод.

Если нам нужно переводить только с русского на английский, то можем зайти в Параметры > Расширения, найти этот плагин, указать основной язык, на который нужно переводить, например английский.

Возвращаемся в сочетание клавиш, сбросить старое сочетание клавиш и добавляем это сочетание клавиш на эту команду (Preffered). У нас есть русское слово, зажимаем Shift+Alt+T и сразу получаем английское. Я этим пользуюсь постоянно и поэтому рекомендую этот плагин.

Project Manager

Незаменим, если ты работаешь с множеством проектов, папок и т.д. Установим его и в панели действий появится иконка папочек. Это и есть наш Project Manager.

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

Settings Sync

Настройка программы под себя дело не быстрое и требует усилий, и чтобы каждый раз не приходилось делать то же самое, например при переустановке Windows, существует плагин Settings Sync.

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

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

Нужно сохранить все то, что мы сегодня настроили. В информации о плагине есть сочетание Shift+Alt+U.

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

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

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

Я его выбираю. Мне нужно все мои настройки получить, смотрю, какое сочетание клавиш мне для этого нужно — Shift+Alt+D.

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

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

Вот общий (более широкий) список полезных плагинов:
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

Связать с GITHub

Лень читать? Тут видео версия.

Внимание! На ПК должен быть установлен Git.

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

Тут мы видим изменения которые нам нужно применить. Жмем на +, чтобы применить сразу все изменения.

Нужно написать комит, жмем на галочку, пишем что-нибудь, нажимаем на Enter. Далее нужно создать репозиторий на GitHub.Переходим по ссылке Создать новый репозиторий, пишем название, жмем кнопку Создать. Даже нас интересуют эти две команды:

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

Загрузки, готово. Теперь наш проект полностью связан с репозиторием Git. Если мы что-то начнем менять, мы увидим что здесь у нас появится значок 1, то есть изменен 1 файл в системе версий, опять нужно применить изменения, написать комит. Достаточно нажать Меню > Отправить и наш проект загрузится на репозиторий.

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

Дополнительно можно установить плагин GitLens, который существенно расширяет возможности системы управления контролем версий.

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

Обучайся, развивайся, и помни — живи, а работай в свободное время!

Источники:

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

How to toggle Auto Save in VS Code

4 Answers 4

Trending sort

Автосохранение файлов при изменениях с помощью VSCode

Страница «Автовосстановление», папка «Среда», диалоговое окно «Параметры»

How do I disable Visual Studio Code auto save

4 Answers 4

Trending sort

Not the answer you’re looking for? Browse other questions tagged visual-studio-code ide or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

Как отключить автосохранение кода Visual Studio

4 ответа

Как отключить автоматическое сохранение кода Visual Studio

VS Code auto-save file history / undo [duplicate]

2 Answers 2

Trending sort

Local history

Автосохранение файлов при изменениях с VSCode

6 ответов

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

Change the Auto Save Delay in Visual Studio Code

The Basics of Visual Studio Code

Files, Folders & Projects

Basic Layout

Side by Side Editing

Explorer

Working Files

Configuring the Editor

Save/Auto Save

Search Across Files

Command Palette

Quick File Navigation

File Encoding Support

Launching from the Command Line

Additional Command line arguments

Opening a Project

Window Management

Next Steps

Common Questions

Enable Auto Save in Visual Studio Code

Video Tutorial: Enable Autosave in Visual Studio Code

Step 1: Enable Autosave in Visual Studio Code

Ethix

AutoRecover, Environment, Options dialog box

Visual Studio Code – редактор кода для Linux, OS X и Windows

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

Mac OS X

Linux

Windows

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

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

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

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

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

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

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

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

Поиск

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

Подсказки IntelliSence

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

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

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

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

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

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

Отладка

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

Конфликты

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

Сохранение документа без изменения имени

Сохранение документа, связанного с настройкой на уровне документа

Чтобы сохранить активный документ

Сохранение документа, указанного по имени

Сохранение документа с новым именем

Сохранение документа, связанного с настройкой уровня документа с новым именем

Сохранение собственного документа с новым именем