Для написания проектов я пользуюсь бесплатным редактором кода 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-ruvscode-icons
Расширение добавляет иконки в проводник для каждой папки или файла проекта.
Установка:
ext install vscode-iconsAll Autocomplete
Помогает быстрому написанию кода. При начале написания кода предлагает варианты автозаполнения.
Установка:
ext install Atishay-Jain.All-AutocompleteAuto Close Tag
Автоматическое закрытие тегов.
Установка:
ext install formulahendry.auto-close-tagBeautify
Помогает форматировать кода JS, JSON, HTML, CSS, SASS. Является дополнением к стандартному js-beautify. Но предлагает более детальную настройку форматирования через файл конфигурации .jsbeautifyrc
Установка:
ext install HookyQR.beautifyAuto Import
Добавления импорта функций из модулей при их использовании в файле.
Установка:
ext install steoates.autoimportCode 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-runnerAuto Rename Tag
Переименование открывающегося или закрывающегося тега при переименовании соответствующего.
Устновка:
ext install formulahendry.auto-rename-tagESLint
Плагин осуществляет анализ написанного кода на соответствие стандартам и выявляет ошибки в нем. Для работы плагина на машине должен быть установлен ESLint. Как его установить написано в статье — Установка и настройка ESLint.
Вы так же можете узнать про конфигурационный файл ESLint в статье — Из чего состоит конфигурационный файл ESLint.
Установка:
ext install dbaeumer.vscode-eslintJSHint
Данное расширение так же производить анализ кода JS на качество написания и выявляет ошибки написания. Для работы плагина в системе должен быть установлен JShint глобально или локально для проекта.
Команда установки в проект:
npm install -g jshint // для глобальной установки
npm install jshint // для локальной установки в проектУстановка:
ext install dbaeumer.jshintImport Cost
Отображает в проекте размер импортированного пакета.
Установка:
ext install wix.vscode-import-costJS (ES6) сode snippets
Добавляет сниппеты для быстрого написания кода. Какие бывают сниппеты и как их использовать, вы можете прочитать в инструкции к расширению — JavaScript (ES6) code snippets.
Установка:
ext install xabikos.JavaScriptSnippetsReactJS code snippets
Плагин добавляет сниппеты для React приложений. Более детальная информация описана на странице расширения — Reactjs code snippets.
Установка:
ext install xabikos.ReactSnippetsLive Server
Добавялет в VS Code возможность сервера для запуска пиложений написанных на HTML, JS, PHP. Так же имеет функцию автоматического перезапуска страницы при изменения кода. Не имеет возможности запуска приложенний работающих с базой данных и требующие осуществления запросов к БД.
Установка:
ext install ritwickdey.LiveServerPath Autocomplete
Плагин добавляют возмжность более быстро прописывать пути к файлам импорта модулей.
Установка:
ext install ionutvmi.path-autocompleteSass
Удобное расширение для работы с препроцессором SASS. Добавляет подсветку, автозавершение написания кода, а так же форматирования кода.
Установка:
ext install Syler.sass-indented