Установка и настройка Visual Studio Code - SevenLines/university-map GitHub Wiki

Так как у нас мультиязычный проект, желательно и среду для разраотки иметь мультиязычную. Качаем Visual Studio Code https://code.visualstudio.com

и устанавливаем ничего не меняя.

Далее запускаем студию и устанавливаем два расширения для работы с Python и Vue, идем сюда

открывается список расширений, можно либо выбрать либо нажать маленькую зелененькую кнопочку [install]

затем находим расширение Vetur и тоже его ставим

потом можно посмотреть все установленные расширения

теперь идем открывать папку с приложением

Я кстати переключу тему на светлую (Ctrl+K, Ctrl+T либо File -> Preferences -> Color Theme)

собственно видим все что есть в папке. Для vscode я создал специальную конфигурацию которая позволит запустить две консолки под сервер и под клиентское приложение. Описание конфигурации находится в папке .vscode\tasks.json

Выглядит он так

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "python sever",
            "type": "shell",
            "command": "python server/app_server.py",  // команда для запуска питон сервера
            "options": {
                "env": {
                    "FLASK_DEBUG": "true"
                }
            },
        },
        {
            "label": "vue application",
            "type": "shell",
            "command": "npm run serve", // команда для запуска vue приложения
            "options": {
                "cwd": "${cwd}/client" // тут указываем из какой папки запускаем
            },
        },
        {
            "label": "Dev server", // а это комбинированная команда чтобы запускать одной командой
            "dependsOn": ["python sever", "vue application"],
            "group": "build",
            "problemMatcher": [
            ]
        }
    ]
}

Собственно как запустить. А очень просто

далее выбираем нашу комбинированную таску

откроется два терминала (доступ к которым можно получить через Ctrl+`)

и можно смело идти на http://localhost:8080