Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブvscode

2019年1月28日 By KD コメントを書く

Go言語のためのVisual Studio Codeの設定方法

Go言語のためのVisual Studio Codeの設定方法

今後流行るプログラミング言語の筆頭はGo言語です。今回は、Visual Studio CodeのGo言語のための設定方法を紹介します。

はじめに

Visual Studio Codeは人気のGo言語においても十分なコーディング環境が実現できます。しかもプラグインを入れるだけです。それでは、Go言語用の設定方法を紹介します

Visual Studio CodeのGo用設定

前提

以下が完了している必要があります。

  • Golangがインストール済みであること
  • Visual Studio Codeがインストール済みであること
  • Visual Studio Codeの基本的な設定が完了していること

Visual Studio Codeの基本設定は以前の記事を参考にしてください。

プラグインをインストールする

Visual Studio CodeでGoを扱うためにはGo用のプラグインを入れる必要があります。

NewImage

これでGoファイルを開くと以下のようにダイアログが表示され、「Install」をクリックすることで必要なモジュールがインストールされます。

NewImage

NewImage

「GOPATH」はデフォルトで「~/go」になります。

自動フォーマットのための設定

Visual Studio CodeでGoの2種類の設定方法を紹介します。一つは、よくあるファイルの保存時に自動的にフォーマットする設定方法で、もう一つは、ファイルを自動的に保存する設定方法です。

自動フォーマットにする設定は以下です。

{
...
  "[go]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": false,
    "editor.formatOnSave": true,
    "editor.formatOnPaste": false,
    "editor.formatOnType": false
  },
  "go.formatTool": "goreturns",
  "go.formatFlags": [
    "-w"
  ],
  "go.lintTool": "golint",
  "go.lintOnSave": "package",
  "go.vetOnSave": "package",
  "go.buildOnSave": "package",
  "go.testOnSave": false,
  "go.gocodeAutoBuild": true,
  "go.installDependenciesWhenBuilding": true,
...
}

設定可能なフォーマッタは「gofmt」、「goimports」、「goreturns」、「goformat」になります。

自動保存のための設定

Goはコンパイル言語のため、ファイルが保存されてコンパイルされた後でないと正しく動作しません。そのため、自動フォーマットの代わりに自動保存の設定をする場合があります。

自動保存の設定は以下です。

{
...
  "[go]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": false,
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false,
    "editor.formatOnType": false
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "go.formatTool": "goreturns",
  "go.formatFlags": [
    "-w"
  ],
  "go.lintTool": "golint",
  "go.lintOnSave": "package",
  "go.vetOnSave": "package",
  "go.buildOnSave": "package",
  "go.testOnSave": false,
  "go.gocodeAutoBuild": true,
  "go.installDependenciesWhenBuilding": true,
...
}

詳しくは公式ドキュメントを参照してください。

おまけ

Go用のプラグインのエラーの対処法

MacでGo用のプラグインを使う場合に以下のエラーが発生することがあります。

「could not launch process: debugserver or lldb-server not found: install XCode’s command line tools or lldb-server」

これは、以下を実行することで解決できます。

$ xcode-select --install

デバッグ用のライブラリのインストール

Go言語をデバッグするには「delve」というデバッガーをインストールする必要があります。

VSCode上からコマンドパレッドで以下のように検索します。

NewImage

「dlv」にチェックを入れて「OK」をクリックすればローカルにインストールされます。

NewImage

あるいは、以下のようにコマンドラインからインストールすることも可能です。

$ go get -u github.com/go-delve/delve/cmd/dlv

デバッグ方法は公式ドキュメントを参照してください。

最後に

いかがでしたか?これでVisual Studio CodeのGo設定ができたと思います。Go言語のコーディングを楽しみましょう。それでは。

環境

  • PC: macOS Mojava 10.14.2
  • Visual Studio Code: 1.30.1
  • Go: 1.11.4

カテゴリ : 技術 Tips & Tutorials タグ : golang, vscode

2018年11月12日 By KD コメントを書く

Docker上でPython FlaskのRESTアプリケーションを構築し、Visual Studio Codeからリモートデバッグする方法

Docker上でPython FlaskのRESTアプリケーションを構築し、Visual Studio Codeからリモートデバッグする方法

Docker上にアプリケーションを構築するのが一般的になってきた昨今、Dockerコンテナへのリモートデバッグはバグ解析には必須です。今回は、Visual Studio CodeでPythonのFlaskで作成したRES APIアプリケーションをリモートデバッグする方法を紹介します。

はじめに

FlaskはPythonでサーバーサイドアプリケーションを作る人気のフレームワークです。Visual Studio CodeはもとはJavaScript向けのエディタでしたが、今ではPythonの開発環境としても人気のエディタです。

リモートデバッグとは、リモート(ローカル以外)で稼働しているアプリケーションに対して、ローカルから接続して、デバッグすることです。Docker上にあるアプリケーションをデバッグするには、リモートデバッグで行う必要があります。

今回は、Docker上でFlaskで作ったREST APIアプリケーションを構築し、そのアプリケーションへVisual Studio Codeからリモートデバッグしていきましょう。

前提

以下の準備が整っている必要があります。

  • Dockerがインストールされている
  • Visual Studio Codeがインストールされている(Python用の基本設定は以前の記事を参照してください)
  • Python3がインストールされている

細かいバージョンは「環境」を参照してください。

Docker上に簡単なFlaskのREST APIアプリケーションを作る

ベースを作る

まずはデバッグする対象となるRESTアプリケーションを簡単に作成しましょう。FlaskでRESTなAPIを作ります。

$ mkdir flask-vscodea-app
$ cd flask-vscodea-app/
$ touch app.py
$ touch requirements.txt
$ touch Dockerfile
$ touch docker-compose.yml

Dockerの設定ファイルを作る

今回のアプリケーションはFlakeのアプリケーションからMongoDBを使う構成にします。

Dockerfile

以下のようにします。

FROM python:3-slim-stretch

WORKDIR /usr/src/app

COPY requirements.txt ./
RUN pip install --upgrade pip setuptools \
  && pip install --no-cache-dir -r requirements.txt

ENV PYTHONUNBUFFERED 1
ENV FLASK_APP app.py

COPY ./ ./

EXPOSE 5000

CMD python app.py

注意点としては、PythonのイメージとしてAlpineを選択するとビルドできないパッケージがあるという点です。Dockerに慣れているとAlpineを選択しがちですが、PythonではSlimを選択するのがベターです。

また、DockerでPython環境を構築する場合は、venvで仮想環境を構築する必要はなく、単にグローバルにパッケージをインストールして使います。

docker-compose.yml

FlakeのアプリケーションからMongoDBを使う構成になるように以下のように書きます。

version: '3'

services:
  web:
    build: .
    ports:
      - "3000:3000"
      - "5000:5000"
    environment:
      - FLASK_ENV=development
      - REMOTE_DEBUGGING=False
    volumes:
      - .:/usr/src/app
    links:
      - db

  db:
    image: mongo
    ports:
      - "27017:27017"

外部ポートは、Flaskアプリケーション用に5000ポート、リモートデバッグ用に3000ポートを開けてあります。

Flaskアプリケーションを作る

簡単なREST APIを作ります。

requirements.txt

インストールするパッケージのリストを書きます。

ptvsd
Flask
flask_restful
pymongo

app.py

Flaskのアプリケーションを書きます。

今回は環境変数として「REMOTE_DEBUGGING」のフラグを持たせることで、REMOTE_DEBUGGINGがTrueの場合にリモートデバッグができるようにしています。

注意点としては、リモートデバッグする時は、Flask実行時に「––no-debugger」(debug=False)と「––no-reload」(use_reloader=False)のオプションを有効にする必要があります。詳しくは公式ドキュメントを参照してください。

動作確認

それでは、APIの動作確認を簡単にしましょう。

OKですね。

Visual Studio Codeでリモートデバッグする

次に、Dockerへのリモートデバッグをやってみましょう。

ローカルにptvsdをインストールする

Visual Studio Codeでリモートデバッグする場合は、PTVSDをローカルとDockerコンテナの両方にインストールする必要があります。

Visual Studio Codeのデバッグ設定ファイルを作る

Visutal Studio Codeを開き、デバッグボタンから「構成の追加」をクリックします。

NewImage

「Python」を選択します。

NewImage

すると、ローカルに「.vscode/launch.json」のファイルが作成されます。

NewImage

launch.json

「.vscode/launch.json」にリモートデバッグ用の設定を以下のように追加します。

リモートデバッグ用のポートを3000に設定しています。今回のDockerの設定ですでに3000ポートは開けてありますね。

動作確認

それではリモートデバッグの動作確認をしていきましょう。

まずは、REMOTE_DEBUGGINGを有効にして、Dockerを起動します。

するとデータベースだけ起動して、以下のように接続待ち状態になります。

NewImage

Visual Studio Codeからデバッグで接続します。

NewImage

リモートデバッグの接続が完了するとFlaskアプリケーションが以下のように起動します。

NewImage

これでリモートデバッグの準備は完了しました。

次に、POSTしたデータを取得している箇所でブレークポイントを設定しています。

NewImage

コマンドラインからPOSTしてみます。

受信したデータがデバッグ画面に表示されています。

NewImage

これでリモートデバッグが動いていることが確認できました。

最後に

いかがでしたか?これでDockerコンテナ上にPythonでアプリケーションを構築した場合に、Visutal Studio Codeからデバッグできるようになりましたね。それでは。

環境

  • Visutal Studio Code: 1.28.2
  • Docker: Docker version 18.06.1-ce, build e68fc7a
  • Python: 3.7.1
  • pip: 18.1
  • ptvsd: 4.1.4

カテゴリ : 技術 Tips & Tutorials タグ : docker, flask, python, remote-debugging, vscode

2018年11月2日 By KD コメントを書く

PythonのためのVisual Studio Codeの設定方法

PythonのためのVisual Studio Codeの設定方法

Pythonは特にアカデミックな場で人気のプログラミング言語です。機械学習に注目が集まっている今、Pythonを学ぶことのメリットはさらに高まっています。今回は、PythonでコーディングするためのおすすめのエディタVisual Studio CodeでPythonの設定方法を紹介します。

はじめに

Pythonのためのエディタと言えば、プロ御用達の有料エディタであるPyCharmが有名ですが、今では無料のVisual Studio Codeでも十分なコーディング環境が実現できます。しかもプラグインを入れるだけです。それでは、Python用の設定方法を紹介します。

Visual Studio CodeのPython用設定

前提

以下が完了している必要があります。

  • Pythonがインストール済みであること
  • Visual Studio Codeがインストール済みであること
  • Visual Studio Codeの基本的な設定が完了していること

Visual Studio Codeの基本設定は以前の記事を参考にしてください。

Python用のVisual Studio Codeプラグイン

以下のプラグインをインストールしてください。

  • Python extension for Visual Studio Code

NewImage

Visual Studio CodeのPython設定

Visual Studio Codeの「基本設定 -> 設定」から設定ファイルを開きます。

NewImage

「ユーザ設定」にて、以下のように「[python]」を指定することで、Python用のコーディング設定ができます。リンターはflake8、mypy、pep8、pylama、pylintから選択できます。デフォルトではpylintが有効になっています。

Python用リンター「Pylint」のインストール

PylintはPython専用のLinterです。PythonファイルをVisual Studio Codeで開くと、以下のダイアログが表示されます。この時に「install」をクリックすればpipでpylintが自動でインストールされます。

NewImage

もちろん、コマンドラインから自分でインストールすることもできます。

これでPythonのソースコードでダメな書き方を指摘してくれます。

Python用フォーマッター「autopep8」のインストール

autopep8はPython専用のフォーマッターで、Pythonのスタイルガイド「PEP8」に準拠するようにフォーマットしてくれます。PythonファイルをVisual Studio Codeで開くと、以下のダイアログが表示されるので、「Yes」をクリックすればpipでautopep8が自動でインストールされます。

NewImage

もちろん、コマンドラインから自分でインストールすることもできます。

これでPythonのソースコードが自動的にフォーマットされます。

リモートデバッグ用の「ptvsd」のインストール

PTVSDはVisual Studio Code用のPythonのリモートデバッグツールです。最近はDocker上に開発環境を構築することが多いと思いますが、PTVSDを使うことでVisual Studio CodeでDockerコンテナ内のPythonサーバーをデバッグすることができます。

リモートデバッグの方法は公式ドキュメントを参照するか、Docker上のPythonアプリケーションをリモートデバッグする方法の記事を書いたので参考にしてください。

おまけ

Pylintで不要なルールを無効化する

Pylintのルールは全てのプロジェクトでフィットするわけではないので、不要なルールを無効にしましょう。

まず、対象のプロジェクト内で「.pylintrc」を作ります。

不要なチェックを「[MESSAGES CONTROL]の「disable」で無効化します。

ここでは、例としてE0401、C0111、C0103を無効化しています。

リンターをFlake8に変更する

Visual Studio CodeのデフォルトのリンターはPylintですが、ルールが厳しいため、「.pylint」ファイルを編集してカスタマイズして使うのが一般的です。一方で、バッドプラクティスのようなチェックは緩めにしてエラーになりそうな箇所だけしっかりキャッチしてくれればよいのであれば、Flake8はよい選択肢です。

設定を変更するには、「基本設定 -> 設定」から「ユーザ設定」を選択し、Pylint無効にして、Flake8を有効にすればよいです。以下のようになります。

この状態でPythonファイルを開けば、以下のようにダイアログがでるので、このままローカルにもFlake8をインストールすればOKです。

NewImage

もちろん、コマンドラインから自分でインストールしても構いません。

最後に

いかがでしたか?これでVisual Studio CodeのPython設定ができたと思います。Pythonのコーディングを楽しみましょう。では。

環境

  • Visual Studio Code: 1.28.2
  • Python: 3.7.1

カテゴリ : 技術 Tips & Tutorials タグ : python, vscode

  • 1
  • 2
  • 次のページ »

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes