Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
722 lines (510 sloc) 23.8 KB

Visual Studio Code

.. seealso::

    https://www.visualstudio.com/ru-ru/products/code-vs.aspx

:l:`Visual Studio Code` отличный выбор для начинающего программиста, имеет необходимый минимум:

  • неплохую документацию
  • автодополнение кода (с использованием IntelliSense)
  • подсветка синтаксиса
  • встроенный отладчик
  • расширение функционала за счет плагинов
  • управление системой контроля версий git
  • кроссплатформенный
  • бесплатный, с открытым исходным кодом

Также редактор адаптирован для Веб-разработки и вполне подойдет для серьезных проектов как основной инструмент редактирования кода.

Установка

.. seealso::

    https://code.visualstudio.com/docs/setup/setup-overview

Linux

.. seealso::

    https://code.visualstudio.com/docs/setup/linux

  1. Скачиваем дистрибутив для своей ОС https://code.visualstudio.com/download

  2. Для Linux существуют два типа пакетов, самых популярных форматов, rpm и deb.

    Установка в Ubuntu/Debian:

    $ sudo dpkg -i <file>.deb

    CentOS/Fedora:

    $ sudo yum install <file>.rpm

    Fedora > 22 версии:

    $ sudo dnf install <file>.rpm
  3. После установки можно запустить редактор следующей командой:

    $ code

Nix

Пакетный менеджер :l:`Nix` работает на любом Linux дистрибутиве, содержит богатую базу уже готовых пакетов, в том числе и :l:`vscode`.

  1. Установка пакетного менеджера:

    $ curl https://nixos.org/nix/install | sh
  2. Установка :l:`Visual Studio Code`:

    $ nix-env -i vscode

Плагины

.. seealso::

    https://code.visualstudio.com/docs/editor/extension-gallery

Редактор имеет возможность расширения функционала за счет плагинов и удобный интерфейс их установки, доступный по нажатию кнопки:

/_static/999.additions/texteditor/extension-gallery_extensions-view-icon.png

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

/_static/999.additions/texteditor/extension-gallery_extensions-popular.png

Расширения можно искать введя название или ключевые слова в строке поиска, например Python.

/_static/999.additions/texteditor/extension-gallery_extensions-python.png

Существует огромное количество расширений для Go, C#, C/C++, Nix, Haskell, Python, JS, TypeScript и др.

Python

.. seealso::

    https://code.visualstudio.com/docs/languages/python

После установки плагина Python нам становятся доступны многие функции:

  • Автодополнение кода
  • Проверка синтаксиса
  • Отладка
  • Подсказки
  • Переход к определению функции, класса и прочее

Автодополнение

Работает при наборе по нажатию Ctrl + Space.

Проверка синтаксиса

Показывает ошибки в коде:

Работает если установлены Python пакеты Pylint, Pep8 или Flake8.

Tip

$ pip install -U --user pylint pep8 flake8

Отладка

.. seealso::

    https://code.visualstudio.com/docs/editor/debugging

Встроенный в редактор отладчик позволяет отлаживать код визуально, устанавливать точки останова мышкой и просматривать переменные в отдельном окне. Это похоже на отладку в различных IDE, таких как :l:`QtCreator` или :l:`Wingware`.

Также избавляет программиста писать мучительные строки типа printf или import pdb;pdb.set_trace();.

Настройки

.. seealso::

    https://code.visualstudio.com/docs/customization/userandworkspace

Настройки хранятся в формате JSON и доступны из меню File->Preferences->User Settings.

Шрифт

Шрифт задается в настройках File->Preferences->User Settings:

Автодополнение через <Tab>

Более привычно дополнять код по клавише . Для этого необходимо открыть настройки пользователя File->Preferences->User Settings и прописать опцию editor.tabCompletion:

Язык

.. seealso::

    https://code.visualstudio.com/docs/customization/locales

  1. Открываем командную строку Ctrl + Shift + P

  2. Вводим команду Configure Language

    /_static/999.additions/texteditor/locales_configure-language-command.png
  3. Меняем локаль на нужную, например ru:

    /_static/999.additions/texteditor/locales_locale-intellisense.png
    {
        // Defines VS Code's display language.
        "locale": "ru"
    }
    

Тема

Цветовое оформление задается в настройках File->Preferences->Color Theme.

Git

.. seealso::

    https://code.visualstudio.com/docs/editor/versioncontrol

Умеет подсвечивать изменения в файлах с предыдущего коммита, выполнять команды git и отслеживать состояние, например какая текущая ветка.

/_static/999.additions/texteditor/versioncontrol_merge.png

Python скрипты

.. seealso::

    http://trypyramid.com

:l:`Visual Studio Code` требует для отладки открывать не просто файл, а директорию. Это необходимо, чтобы в этом каталоге сохранить локальные настройки редактора. Такая директория будет считаться проектом для редактора.

Для примера, создадим директорию hello1 и откроем в редакторе File->Open Folder....

Создадим в этой директории файл myapp.py:

/_static/999.additions/texteditor/vscode_add_file.png

Добавим в файл пример с сайта http://trypyramid.com

from wsgiref.simple_server import make_server
from pyramid.config import Configurator
from pyramid.response import Response

def hello_world(request):
    return Response('Hello %(name)s!' % request.matchdict)

config = Configurator()
config.add_route('hello', '/hello/{name}')
config.add_view(hello_world, route_name='hello')
app = config.make_wsgi_app()
server = make_server('0.0.0.0', 8080, app)
server.serve_forever()

Для запуска приложения, заходим в режим отладки по нажатию на кнопку:

/_static/999.additions/texteditor/vscode_debugicon.png

.

/_static/999.additions/texteditor/vscode_debug_noconfig.png

Пока у нас нет никаких настроек отладки/запуска проекта, но при первом запуске редактор предложит их выбрать из существующих шаблонов.

/_static/999.additions/texteditor/vscode_chose_dbg_template.png

Шаблон Python создает настройки в файле launch.json в локальной директории, которые выглядят примерно так:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python",
            "type": "python",
            "request": "launch",
            "stopOnEntry": true,
            "pythonPath": "${config.python.pythonPath}",
            "program": "${file}",
            "debugOptions": [
                "WaitOnAbnormalExit",
                "WaitOnNormalExit",
                "RedirectOutput"
            ]
        },
        {
            "name": "Python Console App",
            "type": "python",
            "request": "launch",
            "stopOnEntry": true,
            "pythonPath": "${config.python.pythonPath}",
            "program": "${file}",
            "externalConsole": true,
            "debugOptions": [
                "WaitOnAbnormalExit",
                "WaitOnNormalExit"
            ]
        },
        {
            "name": "Django",
            "type": "python",
            "request": "launch",
            "stopOnEntry": true,
            "pythonPath": "${config.python.pythonPath}",
            "program": "${workspaceRoot}/manage.py",
            "args": [
                "runserver",
                "--noreload"
            ],
            "debugOptions": [
                "WaitOnAbnormalExit",
                "WaitOnNormalExit",
                "RedirectOutput",
                "DjangoDebugging"
            ]
        },
        {
            "name": "Watson",
            "type": "python",
            "request": "launch",
            "stopOnEntry": true,
            "pythonPath": "${config.python.pythonPath}",
            "program": "${workspaceRoot}/console.py",
            "args": [
                "dev",
                "runserver",
                "--noreload=True"
            ],
            "debugOptions": [
                "WaitOnAbnormalExit",
                "WaitOnNormalExit",
                "RedirectOutput"
            ]
        },
        {
            "name": "Attach",
            "type": "python",
            "request": "attach",
            "localRoot": "${workspaceRoot}",
            "remoteRoot": "${workspaceRoot}",
            "port": 3000,
            "secret": "my_secret",
            "host": "localhost"
        }
    ]
}

Это универсальный шаблон, который добавляет несколько вариантов запуска приложений. Нас будет интересовать первый вариант Python, просто запускающий python файл.

/_static/999.additions/texteditor/vscode_python_dbg.png

Запущенное приложение останавливается на первой строчке, что позволяет нам продолжать выполнение программы по шагам.

/_static/999.additions/texteditor/vscode_python_run.png

После выполнения второй строки, интерпретатор выдаст ошибку ImportError: No module named pyramid.config. Это происходит из-за того что в нашем Python окружении не установлен модуль pyramid.

/_static/999.additions/texteditor/vscode_python_dbg_import_error.png

Решить эту проблему можно двумя способами:

  1. Установить Pyramid в глобальное окружение.

    $ pip install --user pyramid
  2. Создать виртуальное окружение, установить в нем Pyramid и прописать его в настройках :l:`Visual Studio Code`.

    .. seealso::
    
        Как создать :ref:`virtualenv`
    
    
    • Создаем виртуальное окружение:

      $ cd /path/to/hello1/
      $ pyvenv hello1_env
      $ source ./hello1_env/bin/activate
    • Устанавливаем Pyramid:

      (hello1_env)$ pip install pyramid
    • Прописываем путь до виртуального окружения в настройках проекта :l:`Visual Studio Code` (файл launch.json):

      /_static/999.additions/texteditor/vscode_python_venv.png

После этого появится возможность запускать наш скрипт в локальном виртуальном окружении. Запущенная программа будет доступна по адресу http://localhost:8080/hello/foo. В консоле отладчика можно наблюдать ее вывод.

/_static/999.additions/texteditor/vscode_pyramid_run.png

Поставим точку останова внутри функции hello_world, в строке 6. Это позволит нам остановить программу при запуске этой функции. После запуска, программа будет нормально работать, пока мы не зайдем по адресу http://localhost:8080/hello/foo, в этом случае запустится функция hello_world и выполнение программы прервется, до тех пор пока мы ее не продолжим вручную.

/_static/999.additions/texteditor/vscode_pyramid_breakpoint.png

Примерно так выглядит процесс разработки и отладки программ на Python. Осталось только инициализировать git репозиторий и выложить проект на https://github.com.

  1. Инициализируем репозиторий:

    /_static/999.additions/texteditor/vscode_git_init.png
  2. Добавим файл .gitignore:

    Для этого нам потребуется скопировать содержимое https://www.gitignore.io/api/visualstudiocode,python в файл .gitignore и добавить туда директорию hello1_env, чтобы она не участвовала в процессе создания версий.

    /_static/999.additions/texteditor/vscode_gitignore.png
  3. Создаем первый коммит

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

    /_static/999.additions/texteditor/vscode_git_commit.png
  4. Отправляем изменения на https://github.com

    • Добавляем плагин Git Easy в проект
    • Создаем репозиторий на :l:`GitHub`
    /_static/999.additions/texteditor/github_create_repo.png
    • Прописываем путь до гитхаба в нашем проекте, при помощи команды Git Easy:Add Orign

      /_static/999.additions/texteditor/vscode_giteasy_add_orign.png /_static/999.additions/texteditor/vscode_git_origin.png
    • Отправляем изменения на GitHub, при помощи команды Git Easy:Push Current Branch to Origin

      /_static/999.additions/texteditor/vscode_git_push.png

      При успешном выполнении команды, мы должны увидеть сообщение типа:

      To github.com:uralbash/hello1.git
      * [new branch]      master -> master
      
      /_static/999.additions/texteditor/vscode_git_push_ok.png

      Файлы будут доступны по адресу https://github.com/uralbash/hello1

      /_static/999.additions/texteditor/github_hello1.png

Для того чтобы проверка синтаксиса заработала, необходимо создать файл .vscode/settings.json и переопределить в нем глобальные настройки для нашего проекта:

{
    "editor.fontSize": 18,

    //Python
    "python.pythonPath": "${workspaceRoot}/hello1_env/bin/python",

    // Whether to lint Python files using pylint.
    "python.linting.pylintEnabled": true,

    // Whether to lint Python files using pep8
    "python.linting.pep8Enabled": true,

    // Whether to lint Python files using flake8
    "python.linting.flake8Enabled": true
}

Pyramid

.. seealso::

    http://docs.pylonsproject.org/projects/pyramid/en/latest/narr/project.html

Фреймворк Pyramid имеет несколько стартовых шаблонов, которые нужны для того, чтобы не начинать писать код с нуля. Рассмотрим как создать шаблон с БД sqlite + SQLAlchemy и настроить его в :l:`Visual Studio Code`.

Для начала создадим директорию hello2 и виртуальное окружение hello2_env:

$ mkdir hello2
$ cd hello2/
$ pyvenv hello2_env
$ source hello2_env/bin/activate
$ pip install pyramid
.. seealso::

    http://docs.pylonsproject.org/projects/pyramid/en/latest/pscripts/index.html

После установки Pyramid, в окружении появляется команда pcreate. С ее помощью создадим проект по шаблону:

$ pcreate -t alchemy .
$ ls
CHANGES.txt  development.ini  hello2  hello2_env  MANIFEST.in  production.ini  pytest.ini  README.txt  setup.py

Устанавливаем его как Python пакет:

$ pip install -e .
$ pserve development.ini
Starting server in PID 17311.
Serving on http://localhost:6543

После запуска, становится доступен адрес http://localhost:6543

/_static/999.additions/texteditor/pyramid_home.png

Но так-как БД еще не создана, отображается страница с подсказкой как ее инициализировать:

$ initialize_hello2_db development.ini

Теперь мы увидим стартовую страницу шаблона alchemy.

/_static/999.additions/texteditor/pyramid_home2.png

Проект на пирамиде запускается при помощи утилиты pserve. Добавим конфигурацию для Pyramid в файл настроек launch.json, чтобы можно было запускать/отлаживать приложение из редактора:

Попробуем запустить:

/_static/999.additions/texteditor/vscode_pserve_run.png

Поставим точку останова в функции my_view в файле hello2/views/default.py.

/_static/999.additions/texteditor/vscode_pyramid_dbg.png

После обновления страницы http://localhost:6543 в браузере, программа остановит свое выполнение в этой точке, а браузер будет ждать пока мы не закончим отладку и не продолжим выполнение вручную.

JavaScript

/_static/999.additions/texteditor/vscode_js.png