Редактор исходного кода для всех разработчиков
После того как Microsoft выпустила Visual Studio Code в 2015 году, она мгновенно стала новой популярной IDE, с которой могут работать некоторые разработчики. Бесплатный редактор с открытым исходным кодом, построенный на кросс-платформе Electron, основанной на среде выполнения Node.js и Chromium. По умолчанию он поддерживает управление исходным кодом, выделение синтаксиса, автозавершение кода, фрагменты, несколько языков программирования и другие плагины для повышения производительности.
Существует множество инструментов для веб-разработки с использованием SCSS, таких как Gulp, Grunt и Webpack - лишь некоторые из их.
Во многих отношениях все эти инструменты доступны для повышения продуктивности разработки, и у каждого инструмента есть собственный рабочий процесс. Я перепробовал практически много рабочих процессов фронтенд-разработки с Gulp, Grunt, Webpack и Jekyll. Но что, если бы рабочий процесс разработки состоял только из файлов HTML, JS и CSS? Что ж, вместо этого вы можете сделать это только с помощью IDE Visual Studio Code. Да, на этот раз VS Code сэкономил мне массу времени и количество файлов проекта без пакетов node_modules в каждом корне проекта.
Я собираюсь продемонстрировать базовый рабочий процесс, который я использовал, просто используя IDE в Visual Studio Code для проекта статического веб-сайта. Проект содержит одну HTML-страницу с одним CSS-файлом, сгенерированным из файлов SCSS, изображений и JS-ресурса.
Инструменты расширения, которые я использовал в расширениях Visual Studio Code, были от Ritwick Dey:
1. Живой сервер
Статические ресурсы:
1. index.html
2. Javascript / jQuery, Bootstrap 4 SCSS и Font Awesome 5 SCSS.
Каталоги проектов, я использовал свой настоящий проект (Decorplus.id) для этих демонстраций:
- root /
- - - .vscode /
- - - - settings.json
- - - src /
- - - - assets /
- - - - assets / css /
- - - - assets / js /
- - - - assets / img /
- - - - assets / vendors /
- - - - assets / webfonts /
- - - index.html
- - - scss /
- - - - _base.scss
- - - - _variables.scss
- - - - main.scss
- - - scss / vendors /
- - - scss / vendors / bootstrap /
Visual Studio Code предоставляет файл конфигурации для каждого проекта или настройки рабочего пространства на .vscode / settings.json. Найдите в корне документа конфигурацию. vscode / settings.json или добавьте следующий файл json .vscode / settings.json в корень проекта:
{
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.fullReload": true,
"liveServer.settings.root": "/src",
"liveSassCompile.settings.includeItems": [
"scss/vendors/_base.scss",
"scss/vendors/_variables.scss",
"scss/main.scss"
],
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 3 version",
"Chrome >= 35",
"Firefox >= 38",
"Edge >= 10",
"Explorer >= 10",
"ie >= 10",
"iOS >= 8",
"Safari >= 8",
"Android 2.3",
"Android >= 4",
"Opera >= 12"
],
"liveSassCompile.settings.formats": [{
"format": "expanded",
"extensionName": ".css",
"savePath": "/src/assets/css"
}],
"liveServer.settings.port": 5503
}
После всех настроек для сервера Go Live и Watch SCSS с настройкой плагинов css autoprefixer все, что вам нужно сделать, это запустить механизм разработки, нажав сервер [Go Live] и кнопки [Watch Sass] в нижней части строки состояния VS Code.
VS Code запустит браузер Chrome, чтобы открыть действующий сервер с IP-адресом и портом. Вы можете начать создавать свой HTML вместе со всеми активами, SCSS и Javascript. Любые изменения файла в корневом каталоге ./src/ автоматически перезагружают открытый браузер.
Использование этого рабочего процесса из VS Code действительно помогло мне сократить время производства любых проектов, сэкономив много места на диске и файлы проектов небольшого размера. Любым другим способом вы все равно можете интегрировать другие инструменты в свои проекты VS Code, такие как Typescript и другие. Удачного фронтенд-кодирования! Ваше здоровье!
