14 лучших расширений VS Code для разработчиков. Часть вторая

{"document": [{"text": [{"type": "string", "attributes": {}, "string": "Вторая часть "}, {"type": "string", "attributes": {"bold": true, "href": "https://pabliko.ru/@homedirtips/14_luchshih_rasshirenij_vs_code_dlja_razrabotchikov_chast_pervaja-35463/"}, "string": "статьи"}, {"type": "string", "attributes": {}, "string": ", посвящённой лучшим расширениям Visual Studio Code. Напомним, что Visual Studio Code, или VS Code, является одним из самых популярных редакторов исходного кода, используемых разработчиками."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.01.jpg", "filesize": 67115, "height": 1080, "pic_id": 126364, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.01.jpeg", "width": 1920}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "npm"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Если вы работаете над проектами "}, {"type": "string", "attributes": {"bold": true}, "string": "JavaScript"}, {"type": "string", "attributes": {}, "string": ", вы должны попробовать "}, {"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script"}, "string": "npm "}, {"type": "string", "attributes": {}, "string": "в качестве менеджера пакетов. Теперь, когда вам нужно перенести свою работу в редактор VS Code, вы можете это сделать. Потому что расширение "}, {"type": "string", "attributes": {"bold": true}, "string": "npm "}, {"type": "string", "attributes": {}, "string": "позволяет вам пользоваться поддержкой "}, {"type": "string", "attributes": {"bold": true}, "string": "npm "}, {"type": "string", "attributes": {}, "string": "в редакторе VS Code, как и в других "}, {"type": "string", "attributes": {"bold": true}, "string": "IDE"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Расширение npm для VS Code", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.02.jpg", "filesize": 41034, "height": 500, "pic_id": 126366, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.02.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вот некоторые из встроенных команд:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вызов последнего "}, {"type": "string", "attributes": {"bold": true}, "string": "npm"}, {"type": "string", "attributes": {}, "string": "-скрипта, который вы использовали после установки этого расширения;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Запуск скрипта "}, {"type": "string", "attributes": {"bold": true}, "string": "npm"}, {"type": "string", "attributes": {}, "string": ";"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Завершение работы всех запущенных скриптов;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Запуск "}, {"type": "string", "attributes": {"bold": true}, "string": "npm install"}, {"type": "string", "attributes": {}, "string": ";"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Это разработанное Microsoft расширение VS Code, которое зарегистрировало более 5 миллионов установок."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Project Manager"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Если вы являетесь менеджером проектов по разработке программного обеспечения и руководите несколькими DevOps-проектами на VS Code, вам стоит попробовать "}, {"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager"}, "string": "Project Manager"}, {"type": "string", "attributes": {}, "string": ". Этот инструмент позволяет вам получить доступ ко всем проектам с одного компьютера, независимо от того, где эти проекты находятся."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Дополнение для VS Code IDE Менеджер проектов", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.03.jpg", "filesize": 48719, "height": 500, "pic_id": 126371, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.03.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В расширении предусмотрено определение проектов, чтобы вы могли легко их организовать. Некоторые интересные функции:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Сохранение папок или рабочих пространств как проекты;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Отметка своих проектов для более глубокой организации;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Открытие всех проектов в новом или том же окне;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Легкое определение переименованных или удаленных проектов."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Кроме того, расширение было установлено более 2 миллионов раз."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "SonarLint"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode"}, "string": "SonarLint"}, {"type": "string", "attributes": {}, "string": " - это расширение Visual Studio с открытым исходным кодом, которое позволяет устранять проблемы кодирования до их появления. Дополнение выявляет уязвимости безопасности и ошибки в процессе написания кода в Visual Studio. Его интерфейс прост и работает так же, как приложение для проверки орфографии в любом текстовом редакторе. "}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Дополнение SonarLint VS Code", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.04.jpg", "filesize": 56632, "height": 500, "pic_id": 126372, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.04.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Кроме того, инструмент предоставляет вам четкое руководство по решению возникающих проблем. Таким образом, вы получаете возможность исправить код до того, как workflow зафиксирует программу. Более того, расширение VS Code поддерживает анализ различных языков программирования, таких как "}, {"type": "string", "attributes": {"bold": true}, "string": "C++"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "C"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "Java"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "HTML"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "PHP"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "JavaScript"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "TypeScript "}, {"type": "string", "attributes": {}, "string": "и "}, {"type": "string", "attributes": {"bold": true}, "string": "Python"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Stylelint"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Вы ищете автоматизированный инструмент, который будет отмечать ошибки кодирования, стилистические ошибки, ошибки и другие подозрительные конструкции в VS Code? Вы можете попробовать "}, {"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint"}, "string": "Stylelint "}, {"type": "string", "attributes": {}, "string": "- простое в установке расширение для VS Code. Помимо пометки ошибок, оно заставляет вашу команду разработчиков придерживаться заранее утвержденных соглашений по стилистике кода, чтобы избежать мусора в коде вашего программного обеспечения или приложения."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Stylelint - расширение для VS Code", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.05.jpg", "filesize": 50680, "height": 500, "pic_id": 126373, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.05.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Некоторые примечательные особенности: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Поддержка плагинов для персонализированного создания правил;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Для современных функций и синтаксиса CSS имеется 170+ встроенных правил;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Иногда автоматически исправляет проблемы в коде, когда понимает какой-либо паттерн."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "VS Marketplace показывает 700 тысяч установок для этого дополнения."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "CSS Peek"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Хотите избавиться от необходимости переходить к. css файлу, чтобы проверить свойства, связанные с идентификатором или классом? Вам нужно попробовать дополнение "}, {"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek"}, "string": "CSS Peek"}, {"type": "string", "attributes": {}, "string": " для VS Code. Оно позволяет просматривать наведенное изображение CSS-кода из HTML-файла."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Расширение CSS Peek", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.06.jpg", "filesize": 51981, "height": 500, "pic_id": 126374, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.06.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Расширение также преобразует идентификаторы и имена классов в гиперссылки. Таким образом, при нажатии на эти гиперссылки вы можете мгновенно получить доступ к определению ID и класса вашего CSS."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это дополнение зарегистрировало более 3 миллионов установок. Вы можете установить расширение в VS Code бесплатно."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Polacode"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=pnp.polacode"}, "string": "Polacode "}, {"type": "string", "attributes": {}, "string": "- это дополнение для VS Code, которое позволяет мгновенно создавать красивые скриншоты кода вашего программного обеспечения или приложения. Затем вы можете использовать полученный компонент, чтобы поделиться своей работой над кодом с коллегами, друзьями или клиентами. Самое приятное, что при этом сохраняются все существующие темы VS Code и шрифты кода. Дополнение просто помещает код в красивый макет, который выглядит профессионально."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Дополнение Polacode", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.07.jpg", "filesize": 48133, "height": 500, "pic_id": 126381, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.07.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Расширение поставляется с функцией перетаскивания для изменения размера контейнера или фрагмента кода. Вам нужно просто удерживать и перетаскивать правый нижний угол. Другие команды, которые вы можете использовать для управления внешним видом изображения, - "}, {"type": "string", "attributes": {"bold": true}, "string": "polacode. shadow"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "polacode. target"}, {"type": "string", "attributes": {}, "string": ", "}, {"type": "string", "attributes": {"bold": true}, "string": "polacode. backgroundColor"}, {"type": "string", "attributes": {}, "string": " и т. д."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "GitLens - расширение VS Code"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens"}, "string": "GitLens"}, {"type": "string", "attributes": {}, "string": ", бесплатное расширение VS Code, просто помогает кодерам лучше понять программные коды. Вы можете быстро узнать, почему, когда и кто изменил блок кода или строку кода."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Кроме того, вы можете просмотреть историю кода, чтобы получить действенную информацию о том, почему и как развивался тот или иной фрагмент кода. Таким образом, руководители проекта могут без труда изучить эволюцию или историю кодовой базы. "}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "GitLens - расширение VS Code", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.08.jpg", "filesize": 67108, "height": 500, "pic_id": 126392, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.08.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Расширение также доступно как GitLens+. Оно имеет два режима подписки. Вы можете либо войти в систему с бесплатной учетной записью и делиться данными с разработчиком GitLens+, либо открыть платную учетную запись. Бесплатный аккаунт можно использовать для публичных репозиториев, а платный - для частных репозиториев."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Import Cost"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost"}, "string": "Import Cost"}, {"type": "string", "attributes": {}, "string": " - это дополнение к VS Code, позволяющее визуализировать размер файла импортированной сторонней библиотеки. Оно показывает размер, как только вы импортируете библиотеку в редактор VS Code. "}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Расширение Visual Studio Import Cost", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.09.jpg", "filesize": 51164, "height": 500, "pic_id": 126393, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.09.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вы увидите размер библиотеки в строке, когда будете набирать код. Для просмотра размера файла импортированной библиотеки используется "}, {"type": "string", "attributes": {"bold": true}, "string": "webpack"}, {"type": "string", "attributes": {}, "string": ". Некоторые примечательные особенности:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Размер библиотеки для импорта всего содержимого;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Размер файла для импорта по умолчанию;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Совместимость с языками программирования Typescript и JavaScript."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Дополнение скачало более 1 миллиона установок. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Path Intellisense"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Обычно, при работе над проектом, вам приходится работать с несколькими файлами. При написании кода вам приходится вводить имя файла по памяти. Теперь, когда имена файлов содержат дефисы, их запоминание становится сложной задачей. Здесь вам может быстро помочь "}, {"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense"}, "string": "Path Intellisense"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "Дополнение Path Intellisense", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.10.jpg", "filesize": 54470, "height": 500, "pic_id": 126394, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.10.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это расширение, которое автодополняет имена файлов в кодовой базе. Инструмент мгновенно предлагает нужный файл, когда обнаруживает начальные буквы. Он также может помочь вам сделать скрытые файлы видимыми."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "JavaScript Debugger (Nightly)"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Это отладчик программ JavaScript на основе протокола адаптера отладки (DAP). Инструмент позволяет отлаживать программы Chrome, Node. js, WebView2, Edge, дополнения VS Code и многие другие. Начиная с версии VS Code 1. 46, "}, {"type": "string", "attributes": {"bold": true, "href": "https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly"}, "string": "JavaScript Debugger"}, {"type": "string", "attributes": {}, "string": " является отладочным дополнением по умолчанию. Microsoft также постепенно распространяет этот инструмент для Visual Studio IDE."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"caption": "JavaScript Debugger (Nightly)", "presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "15.08.2022.11.jpg", "filesize": 60882, "height": 500, "pic_id": 126395, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/08/15/15.08.2022.11.jpeg", "width": 1000}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это расширение VS Code является инструментом с открытым исходным кодом от Microsoft. Вы можете свободно использовать его в коммерческих или некоммерческих целях. К настоящему моменту зарегистрировано более 600 тысяч установок этого инструмента. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Заключение"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Итак, вы узнали о некоторых из лучших расширений VS Code, которые необходимо использовать, если вы любите работать в Microsoft Visual Studio Code. В зависимости от требований вашего проекта, вы можете установить любое из вышеперечисленных расширений VS IDE."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Этот список лучших расширений VS IDE поможет вам сэкономить время, которое вы потратили бы на поиск этих инструментов. Теперь вы можете посвятить больше времени своему проекту, поскольку вы уже знаете, какие расширения хороши."}], "attributes": []}], "selectedRange": [0, 7389]}