Какие расширения VS Code я использую

от | 16 Сен 2020 | Программирование

Для написания проектов я пользуюсь бесплатным редактором кода VS Code. Данный редактор был разработан компанией Microsoft и является «легким» редактором. Работает под платформами Windows, Linux, MacOS. Имеет возможность увеличения своего функционала через плагины. Расширения VS Code используются для более гибкой настройки среды разработки под личные нужды каждого программиста. Поддерживает большое количество языков программирования.

В своей работе я использую расширения, информация о них описана ниже:

  • All Autocomplete
  • Auto Close Tag
  • Auto Import
  • Auto Rename Tag
  • Beautify
  • Code Runner
  • ESLint (использую при работе с React)
  • JSHint (использую при работе с JS)
  • Import Cost
  • JS (ES6) сode snippets
  • ReactJS code snippets
  • Live Server
  • Path Autocomplete
  • Russian LP for VS Code
  • Sass
  • vscode-icons

Расширения VS Code устанавливаются через их поиск по названию в MarketPlace (панель Расширения (CTRL + SHIFT + X)) или с помощью ввода команды установки в командной строке (CTRL + P). Команда установки будет прикреплена ниже для каждого плагина.

Давайте разберем каждый из этих плагинов, для чего они нужны!

Russian LP for VS Code


Название плагина говорит само за себя — это рязыковой пакет русского языка для VS Code.

Установка:

ext install MS-CEINTL.vscode-language-pack-ru

vscode-icons


Расширение добавляет иконки в проводник для каждой папки или файла проекта.

Установка:

ext install vscode-icons

All Autocomplete


Помогает быстрому написанию кода. При начале написания кода предлагает варианты автозаполнения.

Установка:

ext install Atishay-Jain.All-Autocomplete

Auto Close Tag


Автоматическое закрытие тегов.

Установка:

ext install formulahendry.auto-close-tag

Beautify


Помогает форматировать кода JS, JSON, HTML, CSS, SASS. Является дополнением к стандартному js-beautify. Но предлагает более детальную настройку форматирования через файл конфигурации .jsbeautifyrc 

Установка:

ext install HookyQR.beautify

Auto Import


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

Установка:

ext install steoates.autoimport

Code Runner


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

C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran и т.д.

Установка:

ext install formulahendry.code-runner

Auto Rename Tag


Переименование открывающегося или закрывающегося тега при переименовании соответствующего.

Устновка:

ext install formulahendry.auto-rename-tag

ESLint


Плагин осуществляет анализ написанного кода на соответствие стандартам и выявляет ошибки в нем. Для работы плагина на машине должен быть установлен ESLint. Как его установить написано в статье — Установка и настройка ESLint.

Вы так же можете узнать про конфигурационный файл ESLint в статье — Из чего состоит конфигурационный файл ESLint.

Установка:

ext install dbaeumer.vscode-eslint

JSHint


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

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

npm install -g jshint // для глобальной установки
npm install jshint // для локальной установки в проект

Установка:

ext install dbaeumer.jshint

Import Cost


Отображает в проекте размер импортированного пакета.

Установка:

ext install wix.vscode-import-cost

JS (ES6) сode snippets


Добавляет сниппеты для быстрого написания кода. Какие бывают сниппеты и как их использовать, вы можете прочитать в инструкции к расширению — JavaScript (ES6) code snippets.

Установка:

ext install xabikos.JavaScriptSnippets

ReactJS code snippets


Плагин добавляет сниппеты для React приложений. Более детальная информация описана на странице расширения — Reactjs code snippets.

Установка:

ext install xabikos.ReactSnippets

Live Server


Добавялет в VS Code возможность сервера для запуска пиложений написанных на HTML, JS, PHP. Так же имеет функцию автоматического перезапуска страницы при изменения кода. Не имеет возможности запуска приложенний работающих с базой данных и требующие осуществления запросов к БД.

Установка:

ext install ritwickdey.LiveServer

Path Autocomplete


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

Установка:

ext install ionutvmi.path-autocomplete

Sass


Удобное расширение для работы с препроцессором SASS. Добавляет подсветку, автозавершение написания кода, а так же форматирования кода.

Установка:

ext install Syler.sass-indented