Bazaprogram.ru

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

Настройка visual studio code для javascript

Запустите JavaScript в коде Visual Studio

Есть ли способ выполнить javascript и отобразить результаты с помощью кода Visual Studio?

Например файл скрипта содержащий

Я предполагаю, что nodejs будет необходим, но не могу понять, как это сделать?

EDIT: под «Visual Studio Code» я подразумеваю новый редактор кода от Microsoft-не код, написанный с помощью Visual Studio

13 Ответов

Существует гораздо более простой способ запуска JavaScript, не требующий настройки:

  1. Установите расширение бегунка кода
  2. Откройте файл кода JavaScript в текстовом редакторе, затем используйте ярлык Ctrl+Alt+N или нажмите F1 , а затем выберите/введите Run Code , код будет запущен, и вывод будет показан в окне вывода.

Кроме того, вы можете выбрать часть кода JavaScript и запустить фрагмент кода. Очень удобно!

Это решение предназначено для запуска текущего открытого файла в узле и отображения выходных данных в VSCode.

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

Создайте каталог .vscode в корне вашего проекта и создайте в нем файл tasks.json . Добавьте это определение задачи в файл:

Тогда ты сможешь: press F1 > type `run task` > enter > select `runFile` > enter для запуска вашей задачи, но мне было проще добавить пользовательскую привязку ключа для открытия списков задач.

Чтобы добавить привязку ключа, в меню VSCode UI выберите ‘Code’ > ‘Preferences’ > ‘Keyboard Shortcuts’. Добавьте это в свои сочетания клавиш:

Конечно, вы можете выбрать то, что вы хотите, как сочетание клавиш.

UPDATE:

Предполагая, что вы запускаете код JavaScript для его тестирования , вы можете пометить свою задачу как тестовую , установив для ее свойства isTestCommand значение true , а затем привязать ключ к команде workbench.action.tasks.test для вызова одного действия.

Другими словами, ваш файл tasks.json теперь будет содержать:

и ваш keybindings.json файл будет содержать:

Я удивлен, что это еще не было упомянуто:

Просто откройте файл .js, о котором идет речь в коде VS, перейдите на вкладку ‘Debug Console’, нажмите кнопку отладки в левой навигационной панели и нажмите значок запуска (кнопка воспроизведения)!

Требует установки nodejs!

Ярлык для интегрированного terminal — это (ctrl+`), затем введите node .

Кроме того, вы можете создать задачу. Это единственный код в моем tasks.json:

Отсюда создайте ярлык. Это мой keybindings.json:

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

Именно с этой проблемой я столкнулся, когда впервые начал использовать VS-код с расширением Code Runner

Все, что вам нужно сделать, это установить путь node.js в настройках пользователя

Вы должны установить путь , как вы устанавливаете его в вашем Windows машине.

Для моего Это было «C:\Program Files\nodejs\node.exe»

Поскольку у меня есть пробел в имени каталога моего файла

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

Надеюсь, это вам поможет.

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

Это самый быстрый путь для вас на мой взгляд;

  • Откройте интегрированный terminal в коде visual studio ( View > Integrated Terminal )
  • тип ‘node filename.js’
  • нажать кнопку ввод

Примечание: требуется настройка узла. (если у вас есть homebrew просто введите ‘brew install node’ на terminal)

примечание 2: homebrew и узел настоятельно рекомендуется, если у вас еще нет.

Ну а чтобы просто запустить код и показать вывод на консоль, можно создать задачу и выполнить ее, примерно как @canerbalci упоминаний.

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

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

Поэтому вместо того, чтобы создать для него задачу, я изменил ее .vscode/launch.json файл в этом каталоге выглядит следующим образом:

Что это делает, так это то, что он запустит любой файл, в котором вы находитесь в данный момент, в отладчике VSC. Его установка на остановку при старте.

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

Это очень просто, когда вы создаете новый файл в коде VS и запускаете его, если у вас уже нет файла конфигурации, он создает его для вас, единственное, что вам нужно настроить, это значение «program» и установить его в путь вашего основного файла JS, выглядит так:

Я использовал Node Exec, никакой конфигурации не требуется, строит файл, который вы в данный момент заканчиваете или что когда-либо было выбрано и выводит внутри VSCode.

С небольшим количеством конфигурации вы можете добавить Babel, чтобы сделать некоторые на лету транспилирование тоже.

Теперь это может быть самым простым, начиная с v1.32:

Используйте свою собственную связку ключей.

С vscode v1.32 вы можете sendSequence к terminal, используя переменные, такие как $ , который является текущим файлом. Если вам нужен какой-то другой путь, замените $ вашим именем пути в привязке ключей выше.

u000D -это возврат, поэтому он будет запущен немедленно.

Я добавил ‘ s вокруг переменной _32, если в вашем пути к файлу есть пробелы, как c:UsersSome DirectoryfileToRun

Существует много способов запуска javascript в коде Visual Studio.

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

Обычно я создаю фиктивный файл, например test.js, где я делаю внешние тесты.

В папке, где у вас есть код, вы создаете папку с именем » .vscode «и создаете файл с именем» launch.json»

В этот файл вы вставляете следующее и сохраняете. Теперь у вас есть два варианта тестирования кода.

Когда вы выбираете «Nodemon Test File», вам нужно поместить свой код для тестирования в test.js.

Для установки nodemon и получения дополнительной информации о том, как отлаживать с помощью nodemon в VSC, я рекомендую прочитать эту статью, которая более подробно объясняет вторую часть о файле launch.json и как отлаживать в ExpressJS.

Другой вариант — использовать консоль средств разработчика в коде Visual Studio. Просто выберите «Toggle Developer Tools» в меню Справка, а затем выберите вкладку «Console» в всплывающих инструментах разработчика. Оттуда у вас есть те же dev tools REPL, что и в Chrome.

Другой способ-открыть terminal ctrl+ ‘ execute node . Теперь у вас есть узел REPL активный. Теперь вы можете отправить свой файл или выделенный текст в terminal. Для этого откройте VSCode command pallete ( F1 или ctrl+shift+p) и выполните >run selected text in active terminal или >run active file in active terminal .

Если вам нужен чистый REPL перед выполнением кода, вам придется перезапустить узел REPL. Это делается, когда в Terminal с узлом REPL ctrl+c ctrl+c нужно выйти из него и набрав node начать новый.

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

PS: node должен быть установлен и в вашем пути

Похожие вопросы:

Я хочу использовать VS-код, чтобы опробовать примеры книги JavaScript, но нет intellisense, или, по крайней мере, я не знаю, как его активировать. В Visual Studio эта функция работает из коробки .

Я открываю проект python в коде Visual Studio. Но я не мог получить способ увидеть символы в текущем открытом файле. Есть ли представление, доступное в коде Visual Studio. Я использую версию 1.4.0

Читать еще:  Java util comparator

Как установить пакет Nuget в коде Visual Studio? Я знаю, что в Visual Studio мы можем сделать это через консоль диспетчера пакетов Nuget, но как это сделать в коде VS?

У меня есть приложение, разработанное в стеке MEAN. У меня есть файл server.js, который использует модуль узла ‘ http’ для запуска сервера на порту ‘4030’ локально. Мой браузер chrome уже настроен с.

Я пытаюсь использовать Angular.js в коде Visual Studio. Но это не работает. В visual studio 2013 я могу получить IntelliSense, но не в коде Visual Studio.

Существует ли параметр IntelliSense в коде Visual Studio для filter по свойству, методу, методу расширения или шаблону, аналогичному поведению, обнаруженному в Visual Studio? Visual Studio 2015: Код.

Я только что присоединился к новому проекту и наткнулся на следующий синтаксис экспорта JavaScript (глобальный экспорт с псевдонимом): export * as actions from ‘./Something.actions.js’; Синтаксис.

Есть ли способ получить подсветку синтаксиса для грубых ошибок в JavaScript в коде Visual Studio? Под грубыми ошибками я подразумеваю такие вещи, как попытка использовать переменную, которой не.

Потому что.проблема безопасности js, я использую .расширение скрипта вместо .JS. Можно ли использовать javascript intellisense в коде visual studio при использовании .сценарий?

Расширения для VS Code и программирование на JavaScript

Одно из важнейших условий для продуктивной работы веб-программиста — хорошо настроенный редактор кода. Один из них — опенсорсный универсальный редактор Visual Studio Code, который замечателен не только тем, что он бесплатен, но и тем, как много полезного он умеет сразу после установки и минимальной настройки. Если речь идёт о том, чтобы использовать VS Code в какой-то конкретной сфере, вроде разработки на JavaScript, обычно стоит дополнить его несколькими расширениями, которые повышают производительность труда и упрощают жизнь программиста. Вокруг VS Code сложилось активное сообщество разработчиков расширений. Эти расширения легко искать и ещё легче устанавливать.

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

Расширения, которые обязательно стоит попробовать

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

▍ESLint — линтер

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

Применение ESLint в VS Code

Возможно, сейчас вы подумаете о том, что ESLint в VS Code — это, возможно, излишество, так как там уже имеется встроенная система IntelliSense, которая выдаёт отличные подсказки в ходе работы. IntelliSense, и правда, замечательно делает своё дело, но как быть, если не все в вашем проекте используют VS Code? А что делать, если вам нужны разные настройки, скажем — для JSX, для некоей конкретной версии чистого JS, который планируется выполнять в браузере, для среды Node.js, которая используется на сервере? Во всех этих случаях можно воспользоваться ESLint. Кроме того, ESLint можно встроить в систему проверки кода для запуска его перед отправкой материалов в репозиторий, для того, чтобы лишний раз убедиться в том, что все, кто коммитят в репозиторий, придерживаются единого стиля кодирования.

▍GitLens — работа с Git

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

Использование GitLens в VS Code

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

Краткие сведения о коде, выводимые GitLens

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

Тут я хочу дать одну рекомендацию, которая заключается в добавлении следующей строки в настройки VS Code.

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

▍TODO Highlight — подсветка важных комментариев

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

Расширение TODO Highlight в VS Code

Благодаря расширению TODO Highlight, если в комментарии содержится слово TODO или FIXME , оно будет автоматически выделено, что точно не даст такой комментарий пропустить. Это очень удобно.

▍Import Cost — сведения о размере импортируемых модулей

Import Cost — отличный плагин, который подойдёт тем программистам, которые склонны к самоистязанию. Всякий раз, когда вы импортируете в свой проект очередной модуль, Import Cost сообщает вам о его размере.

Использование расширения Import Cost в VS Code

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

Полезные расширения, которые могут пригодиться

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

▍Prettier — средство для форматирования кода

Расширение Prettier родственно вышерассмотренному ESLint в том плане, что его целью является обеспечение применения стандартизированного стиля кодирования. Благодаря Prettier код можно форматировать прямо в редакторе. Фундаментальная разница между Prettier и ESLint заключается в том, что вместо того, чтобы выводить сведения об ошибках, как это делает ESLint (хотя в ESLint есть и параметр —fix ), Prettier даёт программисту переформатированный вариант кода, выглядящего так, как он должен выглядеть в соответствии с заданными правилами. Он отлично показывает себя и при подготовке кода к отправке в репозиторий, так как способен автоматически переформатировать код и привести его к требуемому стилю перед каждым выполнением команды git commit .

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

Читать еще:  Ошибка 633 модем или другое устройство

▍Быстрое открытие страниц в браузере — расширение open in browser

Иногда, при работе над неким проектом, для просмотра страниц которого не требуется процесс сборки, может понадобиться открыть в браузере обычный HTML-файл. Раньше так делали постоянно, теперь всё иначе, но порой это может оказаться очень кстати.

Работа с расширением open in browser в VS Code

В подобных редких случаях вам пригодится расширение open in browser, благодаря которому, через контекстное меню, можно открыть страницу в браузере, заданном по умолчанию, или в каком-нибудь другом браузере, установленном в системе. В результате вам больше не придётся возиться с консолью для того, чтобы открыть единственный файл в браузере.

▍Расширение для React-разработчиков vscode-styled-components

Ранее мы рассматривали расширения, которые могут оказаться полезными для всех, кто пишет на JS. Теперь поговорим о vscode-styled-components. Это расширение имеет достаточно узкую область применения, а именно, оно предназначено для тех, кто пользуется библиотекой styled-components в React.

Работа с расширением vscode-styled-components в VS Code

Так как при работе с библиотекой styled-components используются тегированные шаблонные строки, многие средства для подсветки синтаксиса будут воспринимать соответствующие блоки кода как единое целое. Благодаря рассматриваемому расширению код будет воспринят правильно, а внутри шаблона можно будет легко различать его составные части.

▍Расширение VSCode Great Icons — иконки для редактора

Пожалуй, говоря о расширении VSCode Great Icons, достаточно сказать, что оно позволяет добавить в редактор более сотни отличных иконок для файлов.

Расширение VSCode Great Icons

▍Расширение Bookmarks — закладки

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

Работа с расширением Bookmarks

▍Тема One Monokai

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

Тема One Monokai

Стандартная тема оформления VS Code, на самом деле, не так уж и плоха. Однако, если код приложения, на который вы смотрите целый день, без особых трудностей можно сделать хотя бы немного симпатичнее, стоит этой возможностью воспользоваться. Конечно, существует огромное количество дополнительных тем для VS Code, но One Monokai — это как раз та, которая лично мне очень и очень понравилась. Безусловно, подобные вещи очень субъективны, нельзя говорить о том, что она понравится всем или хотя бы очень многим, но вы вполне можете поискать среди тем для VS Code ту, которая подойдёт именно вам.

Итоги

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

Уважаемые читатели! Пользуетесь ли вы VS Code? Если да — просим вас рассказать о том, какие расширения для этого редактора кажутся вам самыми полезными.

Как настроить VS Code для разработки на JavaScript

Создание удобного рабочего окружения.

Содержание

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

  • отладчик кода
  • встроенный терминал
  • удобные инструменты для работы с Git
  • подсветка синтаксиса для множества популярных языков и файловых форматов
  • удобная навигация
  • встроенный предпросмотр Markdown
  • умное автодополнение
  • встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

Для установки нового пакета зайдите во вкладку “Extensions” которая находится в выпадающем меню “View”, и введите название пакета в строке поиска, нажмите кнопку “Install”.

Babel и ES6

VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

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

  1. Установите Node.js используя пакетный менеджер вашей операционной системы.
  2. Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
  3. Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

jsconfig.json

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

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

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

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

Подробнее об отладке можно узнать на сайте VS Code.

Ссылки

Бесплатный курс по настройке окружения для работы в современной экосистеме JavaScript.

Hexlet — практические курсы по программированию.
Видео-курсы, настоящая практика, стажировка и сертификация.

27 супер плагинов VS Code для JavaScript разработчика

Думаете, что уже установили на свой VS Code все, что нужно? Вы просто еще не видели эти расширения! Срочно смотрите и устанавливайте!

Visual Studio Code (известный также как VS Code) – легкий, но мощный кроссплатформенный редактор исходного кода. Великолепно подходит для веб-разработки. У него есть множество встроенных плюшек вроде поддержки TypeScript и дебаггера Chrome. А кроме того – триллионы плагинов, с которыми любая сфера программирования станет намного проще.

Представляем топ-лист расширений для JavaScript разработчика!

1. Project Snippets

Великолепный плагин Project Snippets основан на встроенной в VSCode фиче user snippets. Эта удобная возможность позволяет сохранять фрагменты кода, а затем повторно их использовать – в текущем или новом проекте.

Как опытный JavaScript разработчик вы непременно обнаруживали, что набираете один и тот же код не в первый раз. Например, что-то подобное для React-проекта на TypeScript:

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

Пройдите по цепочке File > Preferences > User Snippets > New Global Snippets File . Редактор предложит вам ввести имя нового сниппета – typescriptreact.json . Сразу после ввода откроется новый json-файл, который вы можете использовать для React-приложений на TypeScript.

Сниппет будет выглядеть вот так:

Теперь воспользуемся им в деле. Создайте новый TypeScript файл с расширением .tsx , напечатайте в нем префикс, соответствующий только что созданному фрагменту – rsr . Умный редактор сразу же предложит вам сгенерировать сниппет. Для его вывода вы можете воспользоваться выпадающим меню или нажать клавишу tab .

Проблема в том, что этот фрагмент будет сохранен для всех ваших проектов. Иногда это очень здорово (для каких-нибудь базовых шаблонов). Но зачастую проекты по-разному сконфигурированы и для них требуются разные сниппеты.

Ваш глобальный файл настройки typescriptreact.json может выглядеть вот так:

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

Обратите внимание, что в трех шаблонах border test значения свойства обернуто в одинарные кавычки: border: ‘1px solid red’ . В JavaScript это абсолютно правильно, но что если в своем проекте вы используете styled-components? Такой синтаксис вам не подойдет, ведь styled-components работают с обычным CSS.

Вот здесь и восходит звезда расширения project snippets для VSCode. Оно дает вам возможность создавать фрагменты не только на глобальном уровне, но и на уровне проекта/рабочей области, чтобы они не мешали друг другу.

2. Better Comments

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

Сделайте ваши комментарии заметнее и понятнее с помощью плагина Better Comments, который раскрасит их в соответствии со значением:

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

3. Bracket Pair Colorizer

Этот плагин вам совершенно необходим! Bracket Pair Colorizer всего лишь раскрашивает разные пары скобок разными цветами – но эта мелочь потрясающе влияет на вашу продуктивность!

Программирование на JavaScript должно быть приятным, а не раздражающим.

4. VSCode Material Theme

Material Theme – легендарная тема оформления, доступная и для вашего VSCode.

Вполне возможно, что это лучшая из всех когда-либо существовавших тем – установите ее прямо сейчас!

5. @typescript-eslint/parser

Если вы активно используете TypeScript в разработке, то пора задуматься о переносе конфигураций TSLint в ESLint + TypeScript, ведь очень скоро поддержка этого инструмента будет прекращена.

Проекты постепенно готовятся к принятию @typescript-eslint/parser и связанных с ним модулей.

С новыми настройками вы по-прежнему можете использовать большинство правил ESLint. Сохраняется совместимость с Prettier.

6. Stylelint

Если вы еще не используете расширение stylelint для VSCode – какие у вас могут быть оправдания? Срочно установите, ведь оно:

  • помогает избежать ошибок в CSS;
  • контролирует соблюдение соглашений о стиле;
  • работает с Prettier;
  • понимает ванильный CSS, а также препроцессоры SCSS/Sass/Less;
  • поддерживает различные плагины, созданные сообществом.

7. Markdownlint + docsify

Многие разработчики любят делать заметки в markdown-файлах: это простой и понятный формат, его легко и писать, и читать.

Существует множество инструментов, которые делают процесс работы с markdown-разметкой еще приятнее. В их числе markdownlint, который следит за форматированием файлов.

А для генерирования документации используйте плагин docsify, который поддерживает Markdown.

8. TODO Highlight

Плагин TODO Highlight просто выделяет TODO-комментарии, которые JavaScript разработчик оставляет в коде. Теперь вы точно не забудете, что хотели исправить или улучшить.

9. Import Cost

Плагин Import Cost сообщает вам, сколько весит модуль, который вы собираетесь импортировать в проект.

Этот инструмент особенно полезен в первый период использования. Некоторое время (и много написанного кода) спустя, вы уже запоминаете размер основных пакетов. Тем не менее, попробуйте, это может оказаться хорошим опытом.

10. Highlight Matching Tag

Признавайтесь, часто теряетесь в веренице тегов? Highlight Matching Tag будет искать потерянный закрывающий дескриптор за вас.

11. vscode-spotify

Многие программисты предпочитают работать под музыку и часто используют для прослушивания композиций сервис Spotify. Когда нужно переключить песню, приходится отвлекаться от редактора (иногда даже сворачивать его), а потом бывает сложно вновь вернуться в прерванный на секунду рабочий процесс.

Плагин vscode-spotify позволяет использовать Spotify прямо внутри вашего VSCode! Теперь вы можете управлять своим плеером, не покидая редактора.

12. GraphQL for VS Code

GraphQL стремительно набирает популярность, и мы всё активнее используем его в JavaScript-проектах. Пора бы уже подумать об установке GraphQL for VSCode в ваш редактор.

Плагин умеет подсвечивать синтаксис, проверять и автоматически дополнять код.

13. Indent-Rainbow

Плагин Indent-Rainbow структурирует ваш код, выделяя отступы разными цветами. Теперь здесь намного проще ориентироваться:

14. Color Highlight

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

15. Color Picker

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

16. REST Client

Возможно, плагин REST Client не покажется вам супер полезным на первый взгляд по сравнению, например, с привычным Postman. Однако, поиграв с ним немного, JavaScript разработчик уже не сможет жить по-прежнему.

Это замечательный инструмент для тестирования API. Вы можете просто создать новый файл и написать в нем:

Теперь чтобы отправить HTTP GET-запрос, вам нужно просто выделить эту строку, открыть палитру команд ( CTRL+SHIFT+P ) и выбрать в ней Rest Client: Send Request . Данные полученного ответа будут показаны в новой вкладке – очень удобно и полезно!

Вы даже можете передать GET-параметры или тело POST-запроса, добавив всего пару строк кода:

Этот фрагмент соответствует POST-запросу с параметрами <"email": "someemail@gmail.com", "пароль": 1 >.

Это лишь крошечная часть возможностей REST Client. Вы можете узнать о нем больше, если интересно.

17. Settings Sync

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

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

18.Todo Tree

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

19. Toggle Quotes

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

20. Better Align

Вы можете выровнять ваш код без предварительного выделения с помощью плагина Better Align. Просто поместите курсор в нужное место, откройте палитру команд ( CTRL+SHIFT+P ) и вызовите команду Align .

21. Auto Close Tag

Эта небольшая полезная утилита закрывает за вами теги – ей не трудно.

22. Sort Lines

Специально для перфекционистов, которые не смогут уснуть, если массивы строк в их программе не отсортированы по алфавиту! Плагин Sort lines для VS Code сделает вашу жизнь проще.

23. VS Code Google Translate

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

24. Prettier

Все знают Prettier – это замечательный парикмахер для вашего JavaScript/TypeScript/и т. д. кода.

25. VS Code Material Icon Theme

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

26. IntelliSense for CSS Class Names in HTML

Плагин IntelliSense for CSS class names in HTML обеспечит умное автозавершение для CSS-классов в HTML-коде. Нам этого действительно не хватало!

27. Path Intellisense

Одно из самых полезных расширений VS Code. Path Intellisense умеет автоматически завершать имена файлов, которые вы набираете.

Ссылка на основную публикацию
Adblock
detector