VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft. Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.
![](https://habrastorage.org/r/w780q1/webt/w-/b1/qa/w-b1qa1gpw2nwgdt4ybwfx0rbq4.jpeg)
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/4ea/b97/c34/4eab97c34a5cb79527038b55ff4f90a1.png)
Для установки расширения воспользуйтесь в VS Code клавиатурным сокращением
Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/20f/884/bf4/20f884bf45565b307bfb4be6b1ced05c.png)
Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/220/1f4/844/2201f4844000675195e76d80a735af75.png)
Использование Better Comments
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/fc9/07c/fb7/fc907cfb709a2a67ed56f67105e73fcd.png)
Расширение Bookmarks — это настоящий спасательный круг для программистов. Особенно для тех, которые потерялись среди тысяч строк кода. Это расширение позволяет прикреплять к строкам кода закладки. Если у строки кода есть закладка — к этой строке можно легко перейти, воспользовавшись списком закладок.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/84d/ad0/4f7/84dad04f78ac04f32404a73fffcfb257.png)
Закладки в коде
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/1ed/248/42a/1ed24842ac701ddd9a9a91fcd292d624.png)
Расширение Bracket Pair Colorizer 2 позволяет раскрашивать скобки, что облегчает нахождение пар открывающих и закрывающих скобок. Это очень полезно в тех случаях, когда приходится работать с вложенными друг в друга программными конструкциями.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/9e4/ef5/0bc/9e4ef50bc3268f332234971eda100522.png)
Пары скобок выделены цветами
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/35c/e11/5c9/35ce115c9c7b028d4bacb79c87e70795.png)
Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.
![](https://habrastorage.org/getpro/habr/post_images/5c8/01c/dcc/5c801cdcc7d3d9144091a2f14c1eadfa.gif)
Работа с Format in Context Menus
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/02d/113/189/02d1131894d4ee621420e54be23fea17.png)
Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.
![](https://habrastorage.org/getpro/habr/post_images/840/1ed/f80/8401edf80d056f677dd14a89635c410d.gif)
Работа с Git Graph
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/a8d/b77/82f/a8db7782f15c7eb2f032e4a746929bc7.png)
Расширение GitLens помогает выяснять авторство кода с использованием аннотаций git blame и линз. Это расширение, кроме прочего, позволяет очень удобно просматривать содержимое репозиториев и узнавать полезные сведения о коде.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/e39/fe2/077/e39fe2077170febf195aab28d1a6d08e.png)
Работа с GitLens
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/b2d/06c/9ff/b2d06c9ffa43c14ead4e8be5a75b4a6c.png)
Расширение Indent Rainbow позволяет раскрашивать отступы, выделяя разными цветами отступы разных уровней. Это особенно полезно при работе с глубоко вложенными конструкциями в языках наподобие Python.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/a24/633/08b/a2463308b31404c75345d029b77a4b07.png)
Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.
![](https://habrastorage.org/getpro/habr/post_images/bb6/e27/566/bb6e27566e5bc5c306a5cdc890843580.gif)
Работа с Path Intellisense
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/1b6/e76/2e3/1b6e762e3243b67763a75e3337a4ca1a.png)
Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.
А какими расширениями для VS Code пользуетесь вы?
![](https://habrastorage.org/r/w1560/webt/a_/bs/aa/a_bsaactpbr8fltzymtkhqbw1d4.png)
![](https://habrastorage.org/webt/w-/b1/qa/w-b1qa1gpw2nwgdt4ybwfx0rbq4.jpeg)
1. Beautify
![](https://habrastorage.org/getpro/habr/post_images/4ea/b97/c34/4eab97c34a5cb79527038b55ff4f90a1.png)
Для установки расширения воспользуйтесь в VS Code клавиатурным сокращением
CTRL+P
, введите в открывшееся поле нижеприведённую команду и нажмите Enter
.ext install HookyQR.beautify
Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.
2. Better Comments
![](https://habrastorage.org/getpro/habr/post_images/20f/884/bf4/20f884bf45565b307bfb4be6b1ced05c.png)
ext install aaron-bond.better-comments
Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.
![](https://habrastorage.org/getpro/habr/post_images/220/1f4/844/2201f4844000675195e76d80a735af75.png)
Использование Better Comments
3. Bookmarks
![](https://habrastorage.org/getpro/habr/post_images/fc9/07c/fb7/fc907cfb709a2a67ed56f67105e73fcd.png)
ext install alefragnani.Bookmarks
Расширение Bookmarks — это настоящий спасательный круг для программистов. Особенно для тех, которые потерялись среди тысяч строк кода. Это расширение позволяет прикреплять к строкам кода закладки. Если у строки кода есть закладка — к этой строке можно легко перейти, воспользовавшись списком закладок.
![](https://habrastorage.org/getpro/habr/post_images/84d/ad0/4f7/84dad04f78ac04f32404a73fffcfb257.png)
Закладки в коде
4. Bracket Pair Colorizer 2
![](https://habrastorage.org/getpro/habr/post_images/1ed/248/42a/1ed24842ac701ddd9a9a91fcd292d624.png)
ext install CoenraadS.bracket-pair-colorizer-2
Расширение Bracket Pair Colorizer 2 позволяет раскрашивать скобки, что облегчает нахождение пар открывающих и закрывающих скобок. Это очень полезно в тех случаях, когда приходится работать с вложенными друг в друга программными конструкциями.
![](https://habrastorage.org/getpro/habr/post_images/9e4/ef5/0bc/9e4ef50bc3268f332234971eda100522.png)
Пары скобок выделены цветами
5. Format in Context Menus
![](https://habrastorage.org/getpro/habr/post_images/35c/e11/5c9/35ce115c9c7b028d4bacb79c87e70795.png)
ext install lacroixdavid1.vscode-format-context-menu
Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.
![](https://habrastorage.org/getpro/habr/post_images/5c8/01c/dcc/5c801cdcc7d3d9144091a2f14c1eadfa.gif)
Работа с Format in Context Menus
6. Git Graph
![](https://habrastorage.org/getpro/habr/post_images/02d/113/189/02d1131894d4ee621420e54be23fea17.png)
ext install mhutchie.git-graph
Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.
![](https://habrastorage.org/getpro/habr/post_images/840/1ed/f80/8401edf80d056f677dd14a89635c410d.gif)
Работа с Git Graph
7. GitLens
![](https://habrastorage.org/getpro/habr/post_images/a8d/b77/82f/a8db7782f15c7eb2f032e4a746929bc7.png)
ext install eamodio.gitlens
Расширение GitLens помогает выяснять авторство кода с использованием аннотаций git blame и линз. Это расширение, кроме прочего, позволяет очень удобно просматривать содержимое репозиториев и узнавать полезные сведения о коде.
![](https://habrastorage.org/getpro/habr/post_images/e39/fe2/077/e39fe2077170febf195aab28d1a6d08e.png)
Работа с GitLens
8. Indent Rainbow
![](https://habrastorage.org/getpro/habr/post_images/b2d/06c/9ff/b2d06c9ffa43c14ead4e8be5a75b4a6c.png)
ext install oderwat.indent-rainbow
Расширение Indent Rainbow позволяет раскрашивать отступы, выделяя разными цветами отступы разных уровней. Это особенно полезно при работе с глубоко вложенными конструкциями в языках наподобие Python.
9. Path Intellisense
![](https://habrastorage.org/getpro/habr/post_images/a24/633/08b/a2463308b31404c75345d029b77a4b07.png)
ext install christian-kohler.path-intellisense
Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.
![](https://habrastorage.org/getpro/habr/post_images/bb6/e27/566/bb6e27566e5bc5c306a5cdc890843580.gif)
Работа с Path Intellisense
10. Total Lines
![](https://habrastorage.org/getpro/habr/post_images/1b6/e76/2e3/1b6e762e3243b67763a75e3337a4ca1a.png)
ext install praveencrony.total-lines
Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.
А какими расширениями для VS Code пользуетесь вы?
Напоминаем, что у нас продолжается конкурс прогнозов, в котором можно выиграть новенький iPhone. Еще есть время ворваться в него, и сделать максимально точный прогноз по злободневным величинам.
![](https://habrastorage.org/webt/a_/bs/aa/a_bsaactpbr8fltzymtkhqbw1d4.png)