Vs code настройка для javascript

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

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

Quokka.js

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

После установки расширения нажмите Ctrl/Cmd + Shift + P, чтобы отобразить командную панель редактора. Затем введите Quokka, чтобы увидеть список доступных команд. Выберите и запустите команду New JavaScript File. Также можно нажать Cmd + K + J, чтобы открыть файл сразу же. Все, что вы будете писать в этом файле, будет тут же проходить отладку.

• Code Runner — поддерживает разные языки, такие как C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6 и многие другие;
• Runner .

Bracket Pair Colorizer и Indent Rainbow

Круглые и фигурные скобки — неотъемлемая часть многих языков программирования. В таких языках, как JavaScript, на одной странице может быть множество таких скобок, при этом не существует простого механизма, который бы позволял соотносить открывающие и закрывающие скобки. С этим помогут справиться Bracket Pair Colorizer и Indent Rainbow . Это два разных плагина. Однако они очень хорошо работают вместе. Эти VS Code плагины наполнят ваш редактор множеством цветов, благодаря чему вам будет легче различать блоки кода и приятнее на них смотреть. Как только вы к ним привыкнете, без VSCode будет казаться пресным и скучным.

Сниппеты

Сниппеты — это сокращения в редакторе. Вместо того чтобы писать "import React from ‘react’;" , можно напечатать "imr" и нажать Tab, чтобы раскрыть это сокращение. Таким же образом "clg" превращается в "console.log" .

Существует большое количество сниппетов для многих вещей: Javascript (или любой другой язык), React, Redux, Angular, Vue, Jest. Лично мне удобнее всего пользоваться сниппетами для JavaScript, ведь я больше всего работаю на JS.

Хорошие расширения со сниппетами:

• JavaScript (ES6) code snippets ;
• React-Native/React/Redux snippets для es6/es7 ;
• React Standard Style code snippets .

Todo Highlighter

Часто бывает такое, что вы прописываете функцию и думаете, что наверняка есть лучший способ сделать то же самое. Вы оставляете комментарий: «// Нужно переделать позже» или что-то подобное. Затем вы забываете об этой заметке и отправляете код в использование. Надеемся, с Todo Highlighter такого не случится.

Этот плагин подсвечивает все заметки о том, что нужно сделать («TODO») или исправить («FIXME»), или любые другие комментарии в коде яркими цветами, чтобы их всегда можно было легко заметить. Одна из удобных функций — List Highlighted annotations. Она высвечивает все заметки в отдельном окне.

• Todo+ — более мощный плагин, чем Todo Highlighter, с большим количеством функций;
• Todo Parser .

Import Cost

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

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

REST Client

Веб-разработчикам часто приходится работать с REST API. Чтобы исследовать URL и проверять ответы, используются такие инструменты, как Postman . Однако зачем пользоваться отдельным приложением, если с той же задачей легко сможет справиться сам редактор? Познакомьтесь с REST Client . Он позволяет посылать HTTP-запрос и видеть ответ прямо в Visual Studio Code.

Auto Close Tag и Auto Rename Tag

С момента появления React и популярности, которую он набрал за последние годы, вновь стал использоваться синтаксис, похожий на HTML, в форме JSX. Нам вновь приходится кодить на JavaScript с применением тегов. Любой веб-разработчик расскажет, что теги прописывать очень сложно. Чаще всего нам нужен инструмент, который может быстро и легко генерировать теги и их «детей». Emmet — отличный пример такого приспособления, и он встроен в VSCode. Однако иногда хочется чего-нибудь простого и лаконичного: например, приложения, которое автоматически бы закрывало теги. Оно генерирует закрывающий тег после того, как вы напишете открывающий. Когда вы изменяете этот тег, закрывающий тег тоже автоматически меняется. Данные 2 расширения это и делают. Они также работают с JSX и многими другими языками, такими как XML, PHP, Vue, JavaScript, TypeScript, TSX.

Их можно скачать по ссылкам — Auto Close Tag и Auto Rename Tag .

• Auto Complete Tag — объединяет в себе функции Auto Rename и Auto Close Tag;
• Close HTML/XML tag .

GitLens

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

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

• Git History — отображает отличный график истории версий и т. д. Рекомендуем;
• Git Blame — позволяет увидеть информацию Git Blame в статусе выбранной строки. Похожая функция есть в GitLens;
• Git Indicators — позволяет увидеть затронутые файлы и то, сколько строк было добавлено или удалено, в статусе;
• Open in GitHub / Bitbucket / Gitlab / VisualStudio.com! — позволяет открыть репозиторий в браузере с помощью единственной команды.

Git Project Manager

Git Project Manager(GPM) позволяет открыть новое окно с git-репозиторием прямо из окна VSCode. По сути теперь вы сможете открыть еще одно хранилище, не закрывая VSCode.

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

• Project Manager — не пользовался им лично, но это расширение было установлено больше миллиона раз, так что обязательно попробуйте его применить.

Indenticator

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

VSCode Icons

Иконки, благодаря которым редактор станет выглядеть еще приятнее!

• VSCode Great Icons ;
• Studio Icons .

Dracula (Theme)

Тема, которая мне нравится.

Другие рекомендации

• Fira Code — моноширинный шрифт для связок в программировании;
• Live Server — локальный сервер с функцией загрузки статических и динамических страниц;
• Prettier for VSCode — инструмент форматирования кода;
• Settings Sync — позволяет сохранять пользовательские настройки, расширения и привязки клавиш в Gist, так что можно сделать новую VSCode за пару минут;
• Multiple clipboards for VSCode — превосходит обычные команды «копировать» и «вырезать», позволяя хранить выбранные участки в буфере обмена. Также добавляет возможность скопировать несколько блоков текста в один буфер;
• Path Intellisense — Visual Studio Code плагин, который автоматически заканчивает имена файлов;
• Version Lens — показывает информацию о версии пакета для npm, jspm, bower, dub и dotnet core в редакторе Visual Studio Code.

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

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

Содержание

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.

Думаете, что уже установили на свой 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 умеет автоматически завершать имена файлов, которые вы набираете.