23 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

20 расширений VS Code, которые вам понравятся

20 расширений VS Code, которые вам понравятся

Перевод статьи «20 VS Code Extensions You’ll Actually Use».

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

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

Легкость чтения

Beautify – облегчает чтение HTML, CSS и JS путем де-минимизации и применения подходящих отступов в вашей ужасной разметке.

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

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

MetaGo – для быстрого перемещения курсора и выделения при помощи клавиатуры. Это расширение навсегда изменило мой подход к использованию VS Code. Серьезно.

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

Guides – теперь вам не нужно закрывать и открывать заново все элементы для определения их вложенности. Этот инструмент особенно хорошо работает с уже упомянутым Beautify и Rainbow Brackets, о котором говорится ниже.

Rainbow Brackets – подсвечивает текущий набор скобок, в котором вы находитесь, а для лучшего определения местоположения еще и расцвечивает прочие скобки в другие цвета. Это прекрасное расширение VS Code для JS-разработчиков.

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

GitLens – безусловно, одно из самых широко используемых расширений. GitLens это просто must have для VS Code. Он существенно улучшает работу с Git. Для лучшего покрытия можно использовать GitLens вместе с расширениями .gitignore и .diff.

Более быстрое написание кода

CSS Peek – вдохновением для этого расширения послужила похожая фича Brackets – CSS Inline Editors. Теперь одна из моих любимых функций Brackets есть и в VS Code.

Stylelint – мы контролируем наш JS на соответствие стандартам, так почему же не делать того же с LESS/SASS/CSS? Отличный инструмент для быстрой чистки небрежно написанного CSS.

Live Sass Compiler – конечно, у вас есть Gulp, Webpack, NPM, Grunt, но иногда вам нужно компилировать/транспилировать ваши SASS/SCSS файлы в файлы CSS в режиме реального времени, с «живой» перезагрузкой браузера. Для этого и нужен Live Sass Compiler.

Live Server – лучший локальный сервер разработки с функцией живой перезагрузки для статических и динамических страниц (даже PHP!).

Version Lens – обновление зависимостей до последней версии для определенного package.json.

DotENV – добавляет поддержку и подсветку .env-файлов. Я очень полагаюсь на это расширение VS Code, когда заливаю код на Heroku, Netlify и т. п.

Красивые скриншоты

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

Множественные экземпляры

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

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

Читать еще:  Официальные приложения meizu. Meizu для чайников. Приложение «Безопасность. Программа для управления телефоном meizu Андроид через компьютер

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

Использование VS Code как open source

Исходники VS Code доступны на GitHub. Тем не менее, когда вы загружаете готовую сборку, в игру вступает Лицензия Microsoft. И тогда ваш VS Code резко перестаёт быть open source продуктом. Оказывается, в данном случае решает процесс сборки.

Крис Диас, разработчик проекта VS Code, проводит аналогичный пример браузера Chrome и его open source проекта Chromium. VS Code действительно построен на базе решений с открытым исходным кодом. Однако официальная сборка от Microsoft настраивается с учетом специфических функций, включая товарный знак, галерею расширений, проприетарный отладчик C# и телеметрию. Но когда вы клонируете и создаете сборку самостоятельно, вы генерируете более «чистую» версию, которая называется Code-OSS (OSS означает программное обеспечение с открытым исходным кодом).

На практике различия между VS Code и Code-OSS минимальны. В частности, в VS Code работает телеметрия: то есть, Microsoft собирает данные об использовании продукта. Справедливости ради нужно отметить, что в наши дни существует множество продуктов, которые собирают такие данные.

Если вам нравится VS Code, но вы хотите рассмотреть «true» open source альтернативы, то вам определённо стоит читать дальше.

A few things to watch out for

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

Visual Studio’s C# compiler has some more features than Unity’s C# compiler currently supports. This means that some code (especially newer c# features) will not throw an error in Visual Studio but will in Unity.

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

Новости IT компаний
Обсуждения, Форум

  1. Главная
  2. Статьи
  3. 13 полезных расширений VS Code для фронтэнда

18 октября, 15:28

Visual Studio Code очень популярная IDE для разработчиков Javascript. VS Code имеет встроенную интеграцию с git и терминал, поэтому вам не нужно переходить из одного окна в другое.

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

1. HTML snippets

Вам не нужно тратить больше времени на написание каждого HTML-тега вручную; достаточно указать только имя тега, например, div и нажать ввод. Или вы можете даже добавить несколько тегов, которые вы хотели бы вложить, например, ul>li>a, и нажать Enter. Что важно, это расширение имеет все фрагменты HTML5.

2. JavaScript (ES6) code snippets

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

Здесь он работает аналогично, например, для создания кода класса экспорта по умолчанию ClassName <> достаточно поставить ecl и нажать tab.

3. CSS Peek

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

4. Angular / React / Vue

Многое зависит от того, какую платформу вы используете.

  1. Для Angular существует расширение, называемое Angular Snippets (версия 8). Он предоставляет нам фрагменты кода для Typescript и HTML.

  1. Для React.js существует отличное расширение фрагментов ES7 React / Redux / GraphQL / React-Native. Он предоставляет фрагменты кода для React и Redux с использованием ES7 и работает аналогично фрагментам JavaScript.

  1. Для разработки Vue.js существует отличное расширение Vetur. Он имеет почти 20 миллионов загрузок и содержит множество функций, таких как фрагменты кода, ссылки и проверка ошибок, форматирование, отладка или выделение синтаксиса.

5. ESLint

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

6. Prettier – Code formatter

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

7. GitLens

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

Читать еще:  Какие сайты посещает компьютер при выходе в интернет?

8. Auto import

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

9. Path autocomplete

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

10. Final newline

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

11. Bracket pair colorizer

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

12. Indenticator

Indenticator — это расширение для VS Code, которое визуально выделяет текущую целевую глубину. Это позволяет легко различать разные уровни разных блоков кодов. Глубина отмечена маленькими точками и линиями.

13. Debugger for Chrome

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

Сразу после установки VS Code им уже можно пользоваться. Но дополнительно настроить под себя его будет полезно. Этот процесс можно разделить на два этапа: установка необходимых расширений и настройка опций VS Code.

Иконка расширений: Для установки расширений необходимо кликнуть по кнопке слева или выбрать в меню View->Extensions. Далее можно искать нужные расширения. Звездочками помечаются рекомендуемые вам.

Поиск расширений:

17. Settings Sync

Терпеть не можете вручную прописывать настройки ваших плагинов? На помощь вам спешит – вот неожиданность! – еще один плагин – Settings Sync.

Все, что нужно, это аккаунт на gist/GitHub. Каждый раз, когда вы хотите сохранить свои настройки – включая горячие клавиши, сниппеты, расширения – просто нажмите SHIFT+ALT+U , и они будут загружены в вашу учетную запись. При следующем входе в систему или переносе на другой компьютер, вы можете вновь загрузить их комбинацией SHIFT+ALT+D .

Auto Close Tag & Auto Rename Tag

С приходом React и той популярностью, которую он набрал за последние несколько лет, HTML-подобный синтаксис, в виде JSX, стал последним писком моды. Любому веб-разработчику быстро надоест вручную писать теги в JS файлах. В таком случае, нам необходим инструмент, который сможет быстро и легко генерировать теги. Emmet — очень полезный плагин, решающий данную задачу. Однако, иногда нам хочется чего-то более простого и лаконичного. Нам бы пригодилось расширение, которое будет добавлять закрывающий тег к его открытой паре, и автоматически изменять закрывающий тег, когда вы изменяете открывающий. Существует два расширения, которые могут справиться с поставленными задачами.

Они также работают с JSX и множеством других языков (XML, PHP, Vue, JavaScript, TypeScript, TSX).

Auto Rename Tag

Auto Close Tag

Похожие расширения:

10 полезных плагинов Visual Studio Code

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

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

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

«Сперва мы меняем инструменты, а потом они меняют нас»
— Джефф Безос

Все плагины бесплатны и доступны на Visual Studio Marketplace.

Visual Studio Intellicode

Это самый часто скачиваемый плагин для Visual Studio (более 3 200 000 скачиваний). И, на мой взгляд, самый полезный.

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


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

Git Blame

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

Читать еще:  Как установить Windows 7 второй системой к Windows XP

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

Prettier

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

Prettier совместим с JavaScript, TypeScript, HTML, CSS, Markdown, GraphQL и другими современными инструментами и позволяет правильно форматировать код.

JavaScript (ES6) Code Snippets

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

The JavaScript (ES6) code snippets — удобный плагин, который предоставляет некоторые очень полезные фрагменты кода JavaScript для ленивого разработчика. Он связывает стандартные вызовы функций с горячими клавишами. Как только вы с этим разберетесь, ваша продуктивность увеличиться в разы.

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

Path Intellisense

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

Debugger for Chrome

Необязательно уходить из Visual Studio Code, если нужно дебажить JavaScript. Debugger for Chrome, выпущенный Microsoft, позволяет отлаживать исходные файлы непосредственно в Visual Studio Code

ESLint

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

SVG Viewer

Расширение SVG Viewer добавляет ряд утилит для работы с SVG в Visual Studio Code. Этот плагин позволяет отображать файлы SVG и просматривать их внешний вид, не выходя из редактора. Кроме того, этот плагин позволяет конвертировать файлы в PNG и создавать URI схемы данных.

Themes

Темы — последние в списке, но не по значимости. Поскольку вы будете смотреть на свой редактор каждый день, почему бы не сделать его максимально красивым? Существует множество плагинов для настройки, которые меняют цветовую схему и значки на боковой панели. Некоторые популярные темы доступны бесплатно: One Monokai, One Dark Pro и Material Icon.

Тонкая настройка IDE

IDE — это неотъемлемая часть любой разработки. Не важно, что вы используете: Visual Studio Code, WebStorm или Sublime Text. В каждой из них есть достаточное количество приёмов и хитростей, которые помогут сэкономить вам немного времени. Возможно, вы их уже знаете, либо они станут для вас небольшим открытием. Мы используем VS Code, поэтому расскажу про него.

Interactive Playground

Если вы начали работать с этим редактором недавно, то попробуйте интерактивную площадку, чтобы попробовать основные функции VS Code. Для этого переходите в Help → Interactive Playground.

Live Share

Не менее интересная функция — это возможность «расшарить» своё рабочее пространство для других разработчиков, чтобы редактировать в реальном времени один файл. По ссылке найдёте больше подробностей.

Плагины

Почти для всех современных IDE и редакторов существуют разнообразные плагины, и VS Code — не исключение. Вот немного полезных плагинов.

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

Polacode — создаёт классную картинку из выделенного кода, вдруг вы хотите ваш невероятный код показать коллегам.

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

Todo Tree — собирает все ваши TODO из проекта в одно дерево и позволяет очень удобно и быстро переходить по ним.

VS Code Material Icon Theme — очень крутой и красивый пак иконок для файлов в Material стиле.

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

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector