привести код в порядок vs code

Форматирование кода с помощью Prettier в Visual Studio Code

Published on November 2, 2020

Введение

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

В этой статье мы настроим Prettier для автоматического форматирования кода в Visual Studio Code или VS Code.

Для демонстрации мы будем форматировать следующий код:

Если вы знакомы с форматированием кода, вы можете заметить некоторые упущения:

Предварительные требования

Для прохождения этого учебного модуля вам нужно будет загрузить и установить Visual Studio Code.

Шаг 1 — Использование команды форматирования документа

После установки расширения Prettier вы можете использовать его для форматирования вашего кода. Для начала выполним обзор, используя команду Format Document. Эта команда сделает ваш код более согласованным с отформатированными пробелами, переносами строк и кавычками.

Чтобы открыть палитру команд, вы можете использовать COMMAND + SHIFT + P в macOS или CTRL + SHIFT + P в Windows.

Выполните в палитре команд поиск по ключевому слову format и выберите Format Document.

Возможно, вам будет предложено выбрать формат для использования. Для этого нажмите кнопку Configure:

Теперь ваш код отформатирован с пробелами, переносами строк и единообразными кавычками:

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

Будет переформатирован как:

Мы изучили эту команду, и теперь посмотрим, как можно реализовать ее автоматическое выполнение.

Шаг 2 — Форматирование кода при сохранении

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

Чтобы изменить эту настройку, нажмите COMMAND + в macOS или CTRL + в Windows, чтобы открыть меню Settings (Настройки). Выполните в меню поиск Editor: Format On Save и убедитесь, что эта опция включена:

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

Шаг 3 — Изменение параметров конфигурации Prettier

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

Откройте меню Settings (Настройки). Выполните поиск Prettier. Вы увидите список всех параметров, которые вы можете изменить:

Вот несколько наиболее распространенных параметров:

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

Шаг 4 — Создание файла конфигурации Prettier

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

Вот пример простого файла конфигурации в формате JSON:

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

Заключение

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

Prettier обеспечивает согласованность форматирования кода и позволяет автоматизировать этот процесс.

Источник

Как форматировать код в Visual Studio Code (VSCode)

что эквивалентно Ctrl + K + F и Ctrl + K + D в Windows в Visual Studio для форматирования или» украшения » кода в редакторе кода Visual Studio?

30 ответов:

форматирование кода доступно в VS Code с помощью следующих ярлыков:

кроме того, вы можете найти ярлык, а также другие ярлыки, через поиск функциональность, предоставляемая в редакторе с Ctrl + Shift + P (или команда + Shift + P на Mac), а затем поиск документ в формате.

Контекстное Форматирование Кода:

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

Форматирование Кода В То Время Как Сохранение файла:

Visual Studio code позволяет пользователю настраивать параметры по умолчанию.

Если вы хотите автоматически форматировать содержимое при сохранении, добавьте этот фрагмент кода ниже в настройках рабочего пространства visual studio code.

Примечание: теперь вы можете автоматически форматировать файлы typescript проверить мое обновление

или Visual Studio как:

правильная комбинация клавиш shift + alt + f

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

VS Code 1.6.1 поддерживает «Формат При Сохранении » который будет автоматически подбирать соответствующие установленные расширения форматирования и форматировать весь документ на каждом сохранении.

включить «формат при сохранении», установив

и есть доступные сочетания клавиш (VS Code 1.7 и выше):

форматировать весь документ: Shift + Alt + F

только выбор формата: Ctrl K + Ctrl F

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

на ubuntu это Ctrl + Shift + Я

Источник

Расширения VS Code, благодаря которым я каждый день заново влюбляюсь в программирование

Перевод статьи «VS Code extensions that make me fall in love with programming each day».

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

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

И, раз уж заговорил о стиле кода, покажу, как выглядит мой VS Code в работе:

Расширения VS Code для повышения продуктивности

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

1. WakaTime

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

Говоря простым языком, WakaTime отслеживает всю вашу активность, связанную с кодингом. Сколько времени вы проводите за написанием кода, над какими проектами работаете, какие языки программирования используете и насколько хорошо вам это удается.

Всю собранную статистику можно просматривать на красивых диаграммах.

2. Visual Studio IntelliCode

Представьте технологию Intellisense с поддержкой ИИ, который может посоветовать, какой код писать. Представленная вами картинка практически воплощена в реальность!

Расширение Visual Studio IntelliCode предоставляет функционал разработки с применением ИИ для Python, TypeScript/JavaScript и Java. Расширение распознает контекст вашего кода при помощи машинного обучения.

Вот, как это работает:

3. Terminal Here

Если вы не пользуетесь IDE и предпочитаете писать код в текстовом редакторе, обратите внимание на это расширение: оно вам точно понравится!

Примечание автора: лично я не люблю кодить в IDE и отдаю предпочтение текстовому редактору VS Code. В основном я пишу на Java, при этом мне нравится поддерживать определенную структуру файлов (по одной папке на один вопрос). Как вы, вероятно, догадались, чтобы запускать выполнение файлов, мне приходилось каждый раз менять директории. Этот плагин — просто спасение!

Это расширение открывает в терминале VS Code текущую директорию. Разве не потрясающе?

4. Live Server

Как бы объяснить всю важность этого плагина.

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

5. ReactJS Code Snippets

Если вы React-разработчик и не пользуетесь этим плагином, вы теряете зря кучу времени! ReactJS Code Snippets позволяет создавать компоненты, используя готовые сниппеты кода.

6. Python

Вероятно, мне все равно не удастся описать весь функционал этого расширения в рамках одного поста, так что скажу кратко: оно позаботится обо всех ваших нуждах, связанных с написанием кода на Python!

Выбор интерпретатора Python в строке состояния в один клик:

Настройка дебаггера через Debug Activity Bar:

Конфигурация тестов путем запуска команды Configure Tests:

Быстрый запуск Jupiter notebook:

7. Path Intellisense

Очень полезный функционал для разработчиков. Будь то импорт зависимостей, включение изображений в HTML-документ, добавление JS-скриптов или подключение CSS-документов в HTML-файл — нам постоянно нужно указывать пути к файлам.

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

8. NPM Intellisense

Если вам понравилось предыдущее расширение, а сами вы — node-разработчик, я уверен, что этот плагин вы тоже установите. В конце концов, кто ж не захочет иметь автодополнение или подсказки при импорте npm-библиотек?

9. Markdownlint

Откройте наугад несколько open-source проектов на GitHub, и вы увидите, что у них есть нечто общее, а именно — стиль README.md.

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

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

Не ленитесь: установите себе этот плагин и поисправляйте свою markdown-разметку:)

10. Markdown Preview Enhanced

Возможно, вы, как и я, давно забросили MSWord и прочее ПО для текстовых документов, переключившись на использование markdown? Установите себе этот плагин, и вы сможете следить за тем, как выглядит ваш документ.

11. Auto Close Tag

Если вы веб-разработчик и при этом не пользуетесь автоматическим закрытием тегов, как вы вообще справляетесь? Закрывать теги вручную так муторно, что я не устаю благодарить небеса за то, что есть плагин, который делает это автоматически.

12. Auto Rename Tag

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

Расширения VS Code для лучшего стиля кода

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

1. Prettier

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

Между сторонниками отступов в 2 и 4 пробела идет постоянная, непрекращающаяся борьба (люди, которые ставят 8 пробелов, зачем вы это делаете?!). Но при помощи этого расширения код с отступами в 2 пробела можно легко конвертировать в код с отступами в 4.

Скажем, у вас есть кусок кода, найденный где-то на просторах интернета, а может, написанный вашим другом. И вы видите, что в нем вообще нет отступов. И что теперь? Расставлять их вручную? Используйте Prettier!

Это расширение предназначено для форматирования кода. Оно принудительно приводит код к заданному стилю.

2. Rainbow Brackets

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

При помощи этого плагина можно сделать круглые скобки одного цвета, квадратные — другого, а фигурные — третьего. Это имеет особенное значение для программистов, пишущих на Lisp или Clojure и, конечно, для JavaScript-разработчиков. Но остальным тоже не помешает;)

3. Snazzy Operator

Это расширение — моя любовь. Вы, может, думаете, что это просто еще одна тема VS Code, но я в нее просто влюблен.

И, кстати, не забудьте установить шрифт Operator Mono, прежде чем начать пользоваться этой темой.

4. vscode-styled-components

И, наконец, потрясающий плагин для подсветки синтаксиса и intellisense.

Но погодите! А вы заметили еще кое-что на самом первом скриншоте, который я показывал? Если нет, я вам его еще раз покажу:

А теперь заметили? А? Ладно, вот вам подсказка: посмотрите на мой терминал.

Если вы работаете на Linux или Mac, для вас это, может, и не новость. Но мои друзья, использующие Windows, могли заметить нечто интересное.

В общем, для своей WSL (подсистема Windows для Linux) я использую тему Oh-My-Zsh. Можете поискать инфу в гугле. Возможно, будет непросто найти пошаговое руководство, как установить эту тему именно в терминале VS Code, но вы постарайтесь.

Источник

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью чуть упростить себе жизнь в Visual Studio Code.

Быстро добавить комментарий

Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.

Перейти к строке под номером

Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G, введите номер строки и спокойно спасайте вселенную.

Поменять строку местами с соседними

Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.

Alt и стрелки меняют текущую строку местами с соседними.

Дублировать строку

Windows — Shift + Alt + ↓ / ↑

Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.

Перейти к парной скобке

Windows — Ctrl + Shift + \

Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl+Shift+\ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.

Переименовать переменную

Отформатировать документ

Windows — Shift + Alt + F

VS Code предложить установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки, скобки, и сделает строки кода читаемыми.

Перейти к объявлению переменной

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

Включить/выключить перенос слов

Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.

Включить дзен-режим

Windows — Ctrl + K Z

Лучшее решение для тех, кто входит состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться обратно в реальный мир, нажмите Escape.

На интерактивных курсах все клавиши станут горячими

Потому что оторваться вообще не получается. 11 глав бесплатно, и −30% на подписку в первую неделю обучения.

Нажатие на кнопку — согласие на обработку персональных данных

Источник

Используем VS Code для Веб-разработки

VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке, либо указав update.channel как «insiders» в настройках VS Code.

React и JSX

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

Последний, впрочем, может быть заменен на XO.

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

CSS, LESS, SCSS и Stylus

В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве «бекенда» он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

Другие полезные плагины в зависимости от языков, с которыми вы работаете

Сниппеты

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

Полезные расширения

Align

Beautify

Интерфейс к jsbeautifier.org. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

Темы оформления

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Бинды (сочетания клавиш)

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

Нет нужного расширения?

Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

Заключение

Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

Источник