2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Python、Go、Node.js開発を加速するVSCode拡張機能と基本ツール

Last updated at Posted at 2024-04-06

Visual Studio Code (VSCode) は、Python、Go(Golang)、Node.jsをはじめとする多様なプログラミング言語の開発に広く利用されています。ここでは、これらの言語に特化した開発をサポートする拡張機能と、開発効率を向上させる基本ツールの概要と設定例を紹介します。

基本ツールと拡張機能の概要

Git関連

  1. GitLens

    • コードに関するGitの情報を豊富に提供。編集履歴やコミットした人物、ブランチの情報などを簡単に追跡できます。
  2. GitHub Pull Requests and Issues

    • GitHubでの作業をVSCode内で直接行えるようにすることで、プルリクエストのレビューやイシューの管理が容易になります。

コードの可視化

  1. Indent-Rainbow

    • インデントの深さに応じて色分けし、コードの構造を視覚的に把握しやすくします。
  2. Trailing Spaces

    • 行末の不要なスペースを強調表示し、クリーンなコーディングを促進します。

言語別の拡張機能とその概要

Python

  • Python (Microsoft)

    • コード補完、リント、デバッグなど、Python開発に必要な機能を包括的に提供します。
  • Pylance

    • 高速なコード補完とリッチな言語サポートを提供し、Pythonコードの品質と開発速度を向上させます。
  • Jupyter

    • Jupyterノートブックを直接VSCode内で編集・実行でき、データサイエンスや機械学習プロジェクトに最適です。

Go

  • Go (golang.go)
    • Go言語の公式拡張機能で、コード補完、リント、デバッグ機能など、Go開発に必要な多くの機能をサポートします。

Node.js

  • Node.js Modules Intellisense

    • モジュールのインポート時に自動補完を提供し、Node.js開発の速度と正確性を高めます。
  • ESLint

    • コードの品質を向上させ、一貫したコーディングスタイルを保つために不可欠なツールです。
  • NPM

    • npmコマンドをVSCodeのコマンドパレットから直接実行でき、依存関係の管理やスクリプトの実行を簡単に行えます。

設定例

VSCodeでこれらの拡張機能を最大限に活用するための設定例を以下に示します。

{
    "python.linting.enabled": true,
    "python.linting.pylintEnabled": true,
    "python.languageServer": "Pylance",
    "[python]": {
        "editor.formatOnSave": true
    },
    "go.useLanguageServer": true,
    "go.formatTool": "gofmt",
    "javascript.validate.enable": false,
    "eslint.alwaysShowStatus": true,
    "editor.formatOnSave": true,
    "gitlens.hovers.enabled": true,
    "editor.renderWhitespace": "boundary",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "always",
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }
  • 各言語のリントやフォーマットの設定を有効化し、コード品質を維持します。
  • Git関連の機能を強化し、開発プロセスをスムーズにします。
  • スペースの可視化設定を通じて、コードの清潔さを保ちます。

これらの拡張機能とカスタム設定を利用することで、Python、Go、Node.jsの開発プロジェクトを効率的に進めることができます。

VSCodeの設定ファイルを記述する手順

以下に、VSCodeで設定ファイル(settings.json)を開き、編集する基本的な手順を説明します。

手順1: 設定ファイルを開く

VSCodeには、ユーザー設定とワークスペース設定の2種類があります。ユーザー設定はすべてのプロジェクトに適用され、ワークスペース設定は特定のプロジェクトにのみ適用されます。

  1. ユーザー設定を開く:

    • WindowsやLinuxでは Ctrl + ,(コンマ) を、Macでは Cmd + ,(コンマ) を押します。
    • 右上にある {} アイコン(「設定を開く(JSON)」と表示される)をクリックします。
  2. ワークスペース設定を開く:

    • プロジェクトフォルダをVSCodeで開きます。
    • 同じく Ctrl + , (Windows/Linux) または Cmd + , (Mac) を押します。
    • 「ワークスペース設定」タブが表示されるので、右上の {} アイコンをクリックします。

手順2: 設定ファイルを編集する

settings.json ファイルが開かれたら、必要な設定をJSON形式で記述します。例えば、以下のようになります。

    "python.linting.enabled": true,
    "python.linting.pylintEnabled": true,
    "python.languageServer": "Pylance",
    "[python]": {
        "editor.formatOnSave": true
    },
    "go.useLanguageServer": true,
    "go.formatTool": "gofmt",
    "javascript.validate.enable": false,
    "eslint.alwaysShowStatus": true,
    "editor.formatOnSave": true,
    "gitlens.hovers.enabled": true,
    "editor.renderWhitespace": "boundary",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "always",
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    }

設定を追加する際は、既存の設定と衝突しないように注意してください。JSONの形式に誤りがあると、設定が正しく適用されない場合があります。

手順3: 設定ファイルを保存する

設定を追記または変更したら、Ctrl + S (Windows/Linux) または Cmd + S (Mac) を押してファイルを保存します。VSCodeは設定ファイルを即時に読み込み、変更が自動的に適用されます。

補足: 設定の検索とGUIでの編集

  • 設定をJSONファイルで直接編集する以外に、VSCodeの設定UIを通じて設定を検索し、変更することもできます。これは、特に設定のキー名を正確に覚えていない場合に便利です。
  • Ctrl + , (Windows/Linux) または Cmd + , (Mac) で設定画面を開き、上部の検索バーに設定したい内容のキーワードを入力します。対応する設定項目がリストアップされるので、そこから直接変更できます。

VSCodeの設定ファイルを活用することで、コーディングの効率を向上させるだけでなく、より快適な開発環境を構築できます。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?