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

https://medium.freecodecamp.org/here-are-some-super-secret-vs-code-hacks-to-boost-your-productivity-20d30197ac76
Не имеет значения, новичок вы или профессионал, удобные инструменты программирования важны для любого человека, который хочет писать код продуктивно.

image

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

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


1. Material Theme & Icons

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

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

image

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]

image

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

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

image

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

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

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

image

4. Rainbow Indent

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

image

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

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

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

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

image

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

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


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

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

Посмотрите.

image

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

2. Balance Inwards and Outwards

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

Вы можете выбрать целый тег в VS Code, используя команды balance inward и balance outward.Полезно связывать эти команды с сочетаниями клавиш, например, Ctrl+Shift+Up Arrow для Balance Outward и Ctrl+Shift+Down Arrow для Balance Inward.

image

3. Turbo Console.log()

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

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

image

4. Live server

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

Скачать можно здесь.

image

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

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

image

6. Breadcrumbs и outlines

Breadcrumbs (хлебные крошки) показывает текущее местоположение и позволяет быстро перемещаться между именами и файлами. Чтобы начать использовать Breadcrumbs, включите его с помощью команды View > Toggle Breadcrumbs или с помощью параметра breadcrumbs.enabled.

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

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

image

Другие хаки


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

1. Code CLI

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

image

Представьте, что у вас есть только git clone <repo-url> репозиторий и вы хотите заменить текущий экземпляр VS кода, который вы используете. code. -r сделает это без необходимости покидать интерфейс CLI.

2. Polacode

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

image

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

3. Quokka (JS/TS ScratchPad)

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

image

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

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

4. WakaTime

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

image

image

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

5. VSCode Hacker Typer

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

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

6. Exclude folders

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

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

  1. Перейдите в File> Preferences > Settings (или в Mac Code> Preferences> Settings)
  2. Найдите files.exclude в настройках
  3. Выберите добавить шаблон и введите **/node_modules
  4. Вуаля! node_modules исчезли из дерева проводника

Это были мои хаки, как писать код еще лучше. Делитесь своими в комментариях.
Share post

Similar posts

Comments 44

    0

    Неплохо. Если говорить о темах оформления, то мои две любимых — это Academie Syntax и Nord.


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


    Ещё мне нравится расширение scrolloff, которое запускает скролл ещё до того как курсор дошёл до последней видимой строки.

      +3
      ИМХО Плохая идея исключать node_modules, т.к. относительно часто нужно посмотреть исходники, а случайно открывается она очень редко.
        +1

        Перейти к исходникам можно по хоткею из своего кода.

        +1
        VSCode Hacker Typer — это просто находка )))
          0
          Может заодно подскажете, пожалуйста, нубу секретньій хак как улучшить подсветку синтаксиса для си-подобньіх язьіков в VSCode, а то не наглядно как-то относительно Atom-a, бился неделю не нашел решения.
          слева VSCode справа Atom, пример ардуиновской поделки
          image

            0

            То что у вас на скриншоте — это проблема встроенной подсветки синтаксиса для C в vscode с одной стороны и отсутствия поддержки в темах с другой. Поскольку правила для синтаксиса С в vscode напрямую взяты из того самого atom'а, то можно легко их обновить.


            1. Открываете ПР с обновлением встроенных правил для C на самую последнюю версию из atom'а;
            2. Открываете Issue для темы в которой вы хотели бы увидеть поддержку;
            3. Ждете релизов...
            4. Profit.

            Если сделаете первую часть — я с радостью добавлю поддержку в мою ayu.

              +1
              Если б я бьіл программистом и взаимодействовал с гитхабом и понимал как єто делается то так бьі и поступил. К сожалению, в данньій момент у меня нет возможности разбираться с єтим, и буду просто ждать обновлений.
              Но все одно спасибо огромное что показали куда копать, и, возможно, когда будет досуг поковьіряюсь или с єтими файлами или с Issue, что бьі понять как оно функционирует.
              Возможно так же, что с атомом у меня что-то не то, он с древних версий обновлялся с platformio и не вспомню какими еще плагинами.
                0

                Понял вас. Вообще есть шанс что сами разработчики vscode обновят правила в ходе плановой синхронизации с атомом.

            +2
            Для лигатур еще полезно вот это расширение: marketplace.visualstudio.com/items?itemName=CoenraadS.disableligatures
            Позволяет отключать лигатуры, когда курсор находится «внутри».

            А по поводу Turbo Console Log и логирования в целом еще бы добавил такую вещь как Logpoint'ы: code.visualstudio.com/docs/editor/debugging#_logpoints
              +1
              image

              Круто! Всегда мечтал писать на APL!
              image
                +1
                Но лигатуры это ненастоящие символы. А вообще посмотрите на GNU Emacs, он хорошо работает с Юникодом и отлично дополнит GNU APL :^)
                Заголовок спойлера
                image
              0

              Давно пользуюсь IDEA, но сейчас VS Code очень активно пиарится из всех щелей. Пару раз пробовал перейти — в целом всё круто, но к IDEA я уже очень давно привык — нужные хоткеи, инструменты, всё на месте. Но VS Code по-прежнему выглядит хорошо и достойно.
              Вопрос. На твой взгляд, товарищ комментирующий, есть смысл?
              Основные инструменты — JS, Scala

                +2

                Для JS — да, но для Scala — нет.

                  +2
                  Вот у меня похожая история. C# продолжаю писать в Студии. Typescript (Angular), несмотря на поддержку той же Студией, пишу в VSCode. Тормозит меньше, инфраструктура (командная строка для CLI, встроенный сервер с hot reload и т.п.) удобнее.
                  0

                  VSCode бесплатный, IDEA — платная

                    –1
                    Неправда, смотря для кого. IntelliJ Community полностью бесплатная и её хватает для для Java разработки.
                      +1
                      В исходном комментарии указаны нужные языки – JS и Scala. В Community Edition поддержки JS нет, так что она не подойдет.
                    0
                    Для привычных горячих клавиш есть плагин IntelliJ IDEA Keybindings.
                      +2

                      Редактор кода и IDE — это не одно и тоже.


                      Простой пример, недавно небольшой проект, который писался в vscode открыл в phpstorm, сразу начал показывать кучу deprecated и ещё кучу всяких штук, которые не обрабатывают расширения vscode.


                      В общем, это не одно вместо другого, это дополнение.


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


                      Или нужно что-то быстро поправить.


                      Или язык не тот, под который основная IDE.


                      В общем, vscode полезен во многих случаях, но никак не замена полноценного IDE.

                        –2

                        Иногда складывается мнение, что, основанная масса людей на Хабре сборище токсичных человечков, за что минусы данному господину? Что такого плохого он написал?

                          –3
                          На Хабре — немало людей с опухшим ЧСВ имеет минусомёты.
                            –2

                            Минусующие вас только подтерждают ваши слова)

                              0
                              Просто никто не любит нытиков)
                                0

                                При чем тут нытье? Человек выше задал обычный вопрос, а его заминусовали, за что? Мне без разницы на рейтинг, но кому-то он нужен, а тут минусуют ради минусов, при этом минусующие тешат свое чсв, считая себя какой-то элитой, ведь им можно минусовать на сайтике где некоторым нельзя, о боги

                                  0
                                  Сабж уже заплюсован обратно до нуля. Локальные флуктуации случаются. Комменты ниже заплюсованы обратно не будут.
                                    0

                                    Так говорите вроде это что-то меняет, я пишу об этом, потому-что такое почти в каждом топике есть и иногда пишешь что-то типа:"За что минусуете парня?" И потом сразу ему плюсиков накидывают, стадный инстинкт, не более.

                                      0
                                      А если не написать, то не прилетает?
                                        0

                                        Его коммент был в минусах 2 дня и не прилетало, после того как написал прилетело, улавливаете мысль?

                        –1
                        del
                          0
                          Рекомендую ещё вот эти три
                          auto-close-tag
                          auto-rename-tag
                          beautify
                            0
                            Любителям темных тем в копилочку:
                            marketplace.visualstudio.com/items?itemName=teabyii.ayu
                            Единственное, пришлось немного подкрутить контраст, а бледновато было, как по мне.
                              0

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

                                +1
                                Самая моя любимая тема — это www.monokai.pro, но она платная и надо либо купить или закрывать окошко каждый раз.
                                Однако Ayu, одна из лучших тем, на мой взгляд, очень и очень приятно выглядит.
                              +1
                              как настроить автоформатирование js, чтобы оно использовало настройки из проекта?
                                +1

                                Можно использовать prettier. Он имеет свои настройки. Чтобы их синхронизировать со стилем из eslint, то нужно ещё поставить prettier-eslint, и включить соответствующую настройку в prettier.

                                  0

                                  Инструментов много. Хочу узнать рецепт, как получить консистентное форматирование с исправлением ошибок. Сейчас автоформат в vscode живет какой то своей самостоятельной жизнью. Vs code форматирует по-своему, js refactor переделывает в процессе изменения кода, eslint --fix во время исправления ошибок, а prettier eslint при сохранении.

                                –1

                                Пробовал перейти после шторма на vscode, к сожалению очень слабо, даже нормального плагина автоформатирования для пхп не нашел, не говоря уже о том, что одна из самых важных фич go to definition работает или через раз или очень долго ищет. Есть у кого положительный опыт?

                                  +2
                                  Сначала прочитал название как «Секретные хаки против кода».
                                    +4
                                    Очень нехватает нормального power mode, как в Atom:
                                    Заголовок спойлера

                                      0
                                      Как это Вам помогает работать?)
                                        +4
                                        Так пишутся исправления для эпических багов, а деплоятся они вот этой кнопкой:
                                        Заголовок спойлера

                                        0
                                          +1
                                          Посмотрите обе гифки и увидите, почему в моем оригинальном сообщении слово «нормального» было выделено.

                                      Only users with full accounts can post comments. Log in, please.