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

1. Красивее

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

Установка

npm install --save-dev --save-exact prettier

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

Например, возьмите следующий код:

foo(arg1, arg2, arg3, arg4);

Он помещается в одну строку, поэтому останется как есть. Тем не менее, мы все столкнулись с этой ситуацией:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

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

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

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

2. LiveShare

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

Установка

Запустите VS Code Quick Open (Ctrl+P), вставьте следующую команду и нажмите Enter.

ext install MS-vsliveshare.vsliveshare

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

3. Живой сервер

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

Монтаж

Запустите VS Code Quick Open (Ctrl+P), вставьте следующую команду и нажмите Enter.

ext install ritwickdey.liveserver

Действия по запуску/остановке сервера

  1. Откройте проект и нажмите Go Live в строке состояния, чтобы включить или выключить сервер.

2. Щелкните правой кнопкой мыши файл HTML в окне проводника и выберите Open with Live Server.

3. Нажмите (alt+L, alt+O), чтобы открыть сервер, и (alt+L, alt+C), чтобы остановить сервер (вы можете изменить сочетание клавиш). [На MAC, cmd+L, cmd+O и cmd+L, cmd+C]

4. Фрагменты кода ES6

Фрагменты кода для JavaScript в синтаксисе ES6 в стиле StandardJS.

Установка

Запустите VS Code Quick Open (Ctrl+P), вставьте следующую команду и нажмите Enter.

ext install xabikos.JavaScriptSnippets

Это расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора Vs Code (поддерживает как JavaScript, так и TypeScript).

Поддерживаемые языки (расширения файлов)

  • JavaScript (.js)
  • Машинописный текст (.ts)
  • Реакция JavaScript (.jsx)
  • TypeScript React (.tsx)
  • HTML (.html)
  • Вью (.vue)

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

5. ГитЛенс

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

Установка

Запустите VS Code Quick Open (Ctrl+P), вставьте следующую команду и нажмите Enter.

ext install eamodio.gitlens

GitLens — это расширение с открытым исходным кодом для Visual Studio Code.

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

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

Вот лишь некоторые из функций, которые предоставляет GitLens.

  • Линза кода авторства, показывающая самую последнюю фиксацию и количество авторов в верхней части файлов и/или в блоках кода.

Узнать больше о gitlens можно здесь.

Дорогой читатель, спасибо. ❤

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

Давайте свяжемся в Medium, Linkedin или Twitter.