5 советов и хитростей для Visual Studio Code

Разберёмся, как добавить простую проверку типа JavaScript в Visual Studio Code. Посмотрите на этот JavaScript-пример, в котором намереваемся суммировать два числа:

Пример с неверным типом переменнойПример с неверным типом переменной

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

Добавьте комментарий @ts-check в начало файла. Вы увидите, что Visual Studio автоматически выделяет ошибки:

Эффект добавления <code в кодЭффект добавления @ts-check в код

В примере инициализируем переменную x как число, а затем пытаемся переназначить её с использованием недопустимого типа строки. Поэтому получаем ошибку.

Заметили, что мы до сих пор не решили изначальную проблему с проверкой при суммировании двух чисел?

Функция принимает два аргумента, пытается складывать их и должна бы выдать ошибку из-за невозможности прибавить строку к числу. Этого не происходит, потому что в первом случае переменную x инициализировали как число, на основании чего VS Code сделал заключение о типе. А функцию не инициализируем. Так что редактор на самом деле не знает, как интерпретировать типы параметров для функции добавления.

Чтобы сообщить VS Code типы параметров функции, используем документирование. Если набрать /** и нажать Enter , VS Code находит эту функцию, разбирает сигнатуру и создаёт JS doc:

Сгенерированная документация для функции <code />Сгенерированная документация для функции add</p>
<p>Добавим тип number для обоих параметров. Теперь посмотрим, как VS Code начал ловить ошибку, которая возникала из-за передачи строки в качестве второго аргумента:</p>
<p> <img decoding=Отображение ошибки после указания типа в JS doc

Если изменить аргумент на число, ошибка исчезает.

2. Рефакторинг с помощью переименования символов

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

Скажем, нам понадобилось изменить словарь или объект foo в counter , но он уже используется тысячу раз по всему проекту, в куче различных файлов. А также в планах переименовать ключ атрибута bark в value , чтобы получилось counter.value вместо foo.bark . Как этого добиться?

Примитивный способ – выполнить глобальный поиск и замену через панель поиска ( Shift + Cmd + F в Mac OS или Shift + Ctrl + F в Windows и Linux). Это быстро, но и небезопасно – если в проекте обнаружится переменная с именем food , то простая замена также затронет эту переменную. Получим counterd , ой!

Именованные объекты называются «символами». И самый простой и «правильный» способ сделать это – использовать функцию Rename Symbol в VS Code. Поместите курсор на «символы», которые собираетесь переименовать, затем нажмите F2 (также на Mac OS). Появится текстовое поле рядом с выбранным объектом. Таким образом, ссылки на это имя по всему проекту будут правильно переименованы. Если использовать это для компонента React, тег разметки JSX тоже переименовывается!

3. Создание фрагментов

Посмотрим, как использовать Snippets в Visual Studio Code. Благодаря этой опции вы сможете создавать пользовательские фрагменты кода. И не придётся полагаться на расширение или VS Code плагины с добавлением фрагментов.

Чтобы создать сниппет, нажмите Cmd + Shift + P и в строке поиска наберите User Snippets.

Поиск меню настройкиПоиск меню настройки

Откройте меню настройки пользовательских фрагментов Configure User Snippets и найдите конкретный язык, для которого создаёте фрагмент. В нашем случае это JavaScript, поэтому выбираем его и нажимаем Enter . После чего редактор выдаёт нам файл JavaScript или JSON. Вы можете легко создавать новое расширение в нём. В нашем случае продолжаем работать с полученным примером.

Пример фрагментаПример фрагмента

Видите? Фрагмент – в сущности объект, и у каждого объекта три свойства: prefix , description , body . Префикс сообщает VS Code, что этот фрагмент скоро будет активирован. Описание напоминает, что вы как разработчик активируете фрагмент, как только начинаете печатать этот конкретный префикс. Тело – собственно код, который генерируется после активации фрагмента. Если посмотрите внимательно, вы увидите два плейсхолдера, обозначенных как 1 и 2 . Чтобы понять, что они делают, посмотрим на этот фрагмент в действии.

Если открыть файл JavaScript и напечатать react-stateless , то после нажатия Enter вы увидите, как фрагмент генерируется.

Созданный фрагмент после ввода <code />Созданный фрагмент после ввода react-stateless</p>
<p>Главный момент – ComponentName . Посмотрите внимательно на тело фрагмента и поймёте, что ComponentName – первый плейсхолдер. Если изменить ComponentName на Todo и нажать Tab во фрагменте, курсор не добавит пробел, а перепрыгнет к аргументу log . И он также редактируется:</p>
<p> <img decoding=Фрагмент после редактирования

4. Горячие клавиши для редактирования

В редакторе разработчики не только набирают текст, но и перемещают его куски.

Замечали, что делает VS Code при нажатии стандартных горячих клавиш для копирования, вставки и вырезания без выделения символов? Применяет действие ко всей строке. Это отлично подходит для редактирования целых строк текста.

Рассмотрим другие шорткаты для дублирования и перемещения строк.

Alt + Up или Alt + Down перемещают строку, на которой сейчас курсор, вверх или вниз. Shift + Alt + Up или Shift + Alt + Down дублируют строку и располагают её выше или ниже текущей строки. Эти сокращения также работают при выделении нескольких строк. Однако в дистрибутивах Linux встречаются конфликты этих комбинаций с общесистемным сопоставлением клавиш по умолчанию. В таком случае придётся переназначить их в настройках VS Code.

Однако самая крутая фишка – Shift + Ctrl + Cmd + Right/Left (на Mac OS) для расширения или сокращения выделения блока. Попробуйте это внутри вложенного блока кода и поймёте, о чём речь! Эквивалент для Windows и Linux – Shift + Alt + Right/Left .

5. Преобразование кода в Visual Studio Code

Иногда для достижения целей нужна современная версия JavaScript, но из-за использования в проекте более старых версий перейти на новую становится крайне сложно. На помощь приходит VS Code опция, которая преобразует код в более новые версии, даже если вы писали его в старых.

Если нажать на следующую функцию-конструктор, VS Code подсвечивает подсказку в виде лампочки. Кликните по ней и увидите предложение преобразовать функцию в ES 2015 класс.

Подсказка для конвертации функции-конструктораПодсказка для конвертации функции-конструктора

Когда согласитесь конвертировать функцию в ES 2015 класс, VS автоматически определит методы-прототипы этой конкретной функции-конструктора и преобразует всё в класс.

Или представьте, что собираетесь преобразовать Promise в async и await . Нажмите на функцию, которая возвращает Promise и увидите подсказку, клик по которой откроет предложение конвертировать объект в функцию async .

Выбор преобразования функции с <code в <code />Выбор преобразования функции с Promise в async</p>
<p>Как только нажмёте на него, функция конвертируется в async с использованием await .</p>
<p> <img decoding=Результат преобразования

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Современный подход к разработке с использованием Next.js