VSCodeをPyCharmにする。

# はじめに

ぼく「Pythonistaのみんなは当然、日々の開発にエクセレントなIDEである**PyCharm**を器用に使いこなして爆速開発しとるやん？」

ぼく「かくいうワイもPythonistaの端くれとしてPyCharm沼にハマって早半年以上経ったで。」

ぼく「でもな、ここ最近。」

ぼく「みんなどうやらPyCharmのインテリジェンスっぷりをよく理解していないんか、無料だからーとVSCodeとかいうツールを使っとるしているで！！！」

ぼく「これはけしからん！！！！！我らがPyCharmはこんなにすごいんだぞ！！！！！と威張ってやろうと思っていたんですが調べてれば調べるほど…」

ぼく「あれ？プラグイン組み合わせたらVSCodeで十分じゃね…？しかもめっちゃ軽い…無料でいいのこれ…と、感じる日々…」

こうして、僕のVSCode→PyCharm化計画が始まった…

## 目次

<!-- TOC -->

- [目次](#目次)
- [VSCodeに求める機能](#vscodeに求める機能)
- [必要そうなプラグイン](#必要そうなプラグイン)
    - [python開発に必要なプラグイン](#python開発に必要なプラグイン)
    - [Djangoの開発に必要なプラグイン](#djangoの開発に必要なプラグイン)
    - [フロントエンドの開発に必要なプラグイン](#フロントエンドの開発に必要なプラグイン)
    - [エディター全般に必要なツール](#エディター全般に必要なツール)
    - [マークダウンに必要なプラグイン](#マークダウンに必要なプラグイン)
    - [gitを利用するのに必要なプラグイン](#gitを利用するのに必要なプラグイン)
    - [データベースを利用するのに必要なプラグイン](#データベースを利用するのに必要なプラグイン)
    - [PyCharmになるためのプラグイン](#pycharmになるためのプラグイン)
    - [その他便利なプラグイン](#その他便利なプラグイン)
- [python](#python)
    - [lintとformat](#lintとformat)
    - [インタープリタの設定](#インタープリタの設定)
- [終わりに](#終わりに)

<!-- /TOC -->

※大層なタイトルですが、この記事はただのプラグイン紹介記事です。

## VSCodeに求める機能

まだまだPyCharm歴半年とちょっとくらいなので皆さんとは意見が分かれるかもしれないけど、IDEに求めている機能は以下の通りかなって思います。（今後増える可能性あり）

- シンタックスハイライト
- lint・format
- インタープリタの選択（仮想環境）
- ファイル名及びコードの検索・置換
- コード補完
- 静的型解析
- リモートデバッグ
- リファクタリング
- テスト
- Docstringへの対応
- Github連携（diff・プルリク・プル・コミット・プッシュ・マージくらいできればとりあえず良い）
- DBへの接続（テーブルのエクセル風表示/修正・カラムやテーブルの追加/修正・csvのインポート/ダンプ）
- 実行・デバッグ構成の編集
- Djangoの開発環境
- Docker
- ついでにフロントエンド側のシンタックスハイライト・コード補完・リント・フォーマットなど
- さらについでにmarkdownとcsvの快適な編集環境

くらいが動作できれば十分かなと思っています。

つまりVSCodeでこれが出来ればPyCharmはいらない子…

ということで上記の条件を満たすのに必要そうなプラグインをひとまず調べてみました！

詳細は別記事で…

## 必要そうなプラグイン

### Python開発に必要なプラグイン

- [ms-python.python](https://marketplace.visualstudio.com/items?itemName=ms-python.python):IntelliSense、リンティング、デバッグ、コードナビゲーション、コードのフォーマット、リファクタリングなどの機能を含む、Pythonに必要な機能を一通り揃えたツール
- [magicstack.MagicPython](https://marketplace.visualstudio.com/items?itemName=magicstack.MagicPython):型注釈、f文字列、正規表現を含むすべてのPython3構文機能をハイライトしてくれるツール
- [njpwerner.autodocstring](https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring):docstringのスニペット生成ツール
- [brainfit.vscode-importmagic](https://marketplace.visualstudio.com/items?itemName=brainfit.vscode-importmagic):Pythonの自動インポートを行ってくれるツール
- [ms-pyright.pyright](https://marketplace.visualstudio.com/items?itemName=ms-pyright.pyright):きめ細かく設定できる高速な型チェッカー

### Djangoの開発に必要なプラグイン

- [batisteo.vscode-django](https://marketplace.visualstudio.com/items?itemName=batisteo.vscode-django):Djangoのテンプレート構文など
- [bibhasdn.django-snippets](https://marketplace.visualstudio.com/items?itemName=bibhasdn.django-snippets):Djangoのスニペット

### フロントエンドの開発に必要なプラグイン

- [VisualStudioExptTeam.vscodeintellicode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode):js/ts用のAI支援によるコード補完ツール
- [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint):JavaScriptのスタイルチェックツール
- [esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode):フロントエンド全般(HTML・css・js)のスタイルチェックツール
- [octref.vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur):vue.jsのLint・フォーマット・自動補完などを行ってくれるツール
- [stevencl.addDocComments](https://marketplace.visualstudio.com/items?itemName=stevencl.addDocComments):jsdocを自動生成するツール
- [formulahendry.auto-rename-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag):HTML・XMLの対応するタグを同時に修正してくれるツール
- [formulahendry.auto-close-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag):HTML・XMLの終了タグを自動的に生成してくれるツール
- [ecmel.vscode-html-css](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css):HTMLやCSSなどのクラス属性などを補完してくれるツール
- [ritwickdey.LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer):簡易ローカルサーバを立てることができるツール

### エディター全般に必要なツール

- [shardulm94.trailing-spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces):文末にスペースがある場合にハイライト表示するツール
- [mosapride.zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku):全角スペースをハイライト表示するツール
- [EditorConfig.EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig):異なるエディタでスタイルを統一できるツールのVSCode版
- [CoenraadS.bracket-pair-colorizer-2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2):対応するかっこや波かっこを色付けしてくれるツール
- [oderwat.indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow):インデントを色付けしてくれるツール
- [christian-kohler.path-intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense):ファイル名を自動補完してくれるツール
- [nickdemayo.vscode-json-editor](https://marketplace.visualstudio.com/items?itemName=nickdemayo.vscode-json-editor):JSONのプレビューを見やすく、編集をしやすくできるツール
- [ICS.japanese-proofreading](https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading):テキスト・マークダウンなどの日本語チェックをするツール
- [edb.vandelay](https://marketplace.visualstudio.com/items?itemName=edb.vandelay)：JavaScriptとPythonの自動インポートや不要インポートの削除を行ってくれるツール
- [alefragnani.Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks):コードの特定行にブックマークを付けられる機能

### マークダウンに必要なプラグイン

- [yzane.markdown-pdf](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf):マークダウンとPDFで出力するツール
- [yzhang.markdown-all-in-one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one):マークダウンのショートカット・自動プレビュー・補完など、一通りの機能を備えたツール
- [jebbs.markdown-extended](https://marketplace.visualstudio.com/items?itemName=jebbs.markdown-extended):エクセルやスプレッドシートのテーブルを貼り付けられるようにするツール

~~[AlanWalk.markdown-toc](https://marketplace.visualstudio.com/items?itemName=AlanWalk.markdown-toc):マークダウンから見出しを作成する~~
→上の`markdown-all-in-one`でできました！

- [bierner.markdown-preview-github-styles](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles):マークダウンのプレビューをGithubのスタイルに変更
- [DavidAnson.vscode-markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint):マークダウンのスタイルチェックツール
- [shuworks.vscode-table-formatter](https://marketplace.visualstudio.com/items?itemName=shuworks.vscode-table-formatter):マークダウンで、テーブル構文をフォーマットするツール

### gitを利用するのに必要なプラグイン

- [codezombiech.gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore):.gitignoreファイルの操作を支援ツール
- [donjayamanne.githistory](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory):Gitの履歴、検索などを支援するツール
- [eamodio.gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens):コードの変更・コミット履歴等のチェックツール
- [GitHub.vscode-pull-request-github](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github):プルリクエスト管理ツール
- [mhutchie.git-graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph):高機能なgitグラフ表示ツール

### データベースを利用するのに必要なプラグイン

~~[ckolkman.vscode-postgres](https://marketplace.visualstudio.com/items?itemName=ckolkman.vscode-postgres):PostgreSQL用のクエリツール~~
→sqltoolsの方が便利そうなので削除しました！
- [mtxr.sqltools](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools):複数の種類のDBに接続できるツール

### PyCharmになるためのプラグイン

- [garytyler.darcula-pycharm](https://marketplace.visualstudio.com/items?itemName=garytyler.darcula-pycharm):PyCharmのテーマ適用ツール
- [k--kato.intellij-idea-keybindings](https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings):IntelliJ IDEAキーバインディングを設定してくれるツール

### その他便利なプラグイン

- [fabiospampinato.vscode-todo-plus](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus):todo管理ツール
- [formulahendry.code-runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner):コードの実行ツール
- [GrapeCity.gc-excelviewer](https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer):csv及びエクセルファイル閲覧ツール
- [janisdd.vscode-edit-csv](https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv):csvをテーブル表示にして閲覧・編集できるツール
- [mechatroner.rainbow-csv](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv):csvやtsvなどをカラムごとに異なる色で表示してくれるツール
- [humao.rest-client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client):GraphQLにも対応したRESTクライアントツール
- [ms-azuretools.vscode-docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker):vscodeからdockerを立ち上げるツール
- [MS-CEINTL.vscode-language-pack-ja](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja):日本語にローカライズしてくれるツール
- [Shan.code-settings-sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync):vscodeの設定同期ツール？
- [Equinusocio.vsc-material-theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme):おしゃれなテーマ
- [PKief.material-icon-theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme):拡張子ごとにみやすいアイコンに設定してくれるツール
- [ms-vscode-remote.vscode-remote-extensionpack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack):sshでのリモートサーバーやコンテナのデバッグができるようになるツール

この中から、Pythonでの開発に間違いなく必須である公式のPython拡張機能をちょろっと紹介します！

## python

まずは[Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)をインストールしましょう！

VSCodeのPyCharm化はこれでほぼ解決します！！！！！！

具体的には

- シンタックスハイライト
- lint・format
- インタープリタの選択（仮想環境）
- ファイル名及びコードの検索・置換
- コード補完
- 静的型解析
- リモートデバッグ
- リファクタリング
- テスト

が出来るようになります！

公式すげぇ！！

インストールが終わったら、lintとformat、インタープリタの設定のみ取り扱います。

### lintとformat

とりあえずすぐ利用するために`flake8`と`autopep8`をインストールしておきましょう！

```console
$pip install flake8
$pip install autopep8
```

次に`Control + command + p`でコマンドパレットを開く→`open settings(JSON)`で検索しsettings.jsonを開きます。

以下の項目を追記・修正してください。

```json:settings.json
{
    ...
    "editor.tabSize": 4,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,

    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "python.linting.lintOnSave": true,
    "python.linting.pylintEnabled": false,
    "python.linting.pep8Enabled": false,
    "python.linting.flake8Enabled": true,
    "python.linting.flake8Args": [
        "--ignore=W293, W504",
        "--max-line-length=150",
        "--max-complexity=20"
    ],
    "python.formatting.provider": "autopep8",
    "python.formatting.autopep8Args": [
        "--aggressive", "--aggressive",
    ],
}
```

これでlintとformatterの設定終了です。

### インタープリタの設定

pipenvで仮想環境を作成することを前提にします。pipenvに関する記事はネットにたくさん転がっているので、何かエラーが発生した場合はそれらの素晴らしい記事を参考にしてください。

まずpipenvをインストールしていきましょう。

```console
$pip install pipenv
```

その後、以下のコマンドで仮想環境の作成・適用を行います。

```console
$pipenv install
$pipenv shell
```

こうすることで`/home/<ユーザー名>/.local/share/virtualenvs/<ディレクトリ名>-<ハッシュ値>/`のようなディレクトリが生成されているのが確認できると思います。

次に、`Control + command + p`→`open settings(UI)`を開き、設定の検索に`python.pythonpath`と入力してください。

出てきた項目に`/home/<ユーザー名>/.local/share/virtualenvs/<ディレクトリ名>-<ハッシュ値>/bin/python`を入れてpythonのバイナリファイルへのパスを格納します。

再度`Control + command + p`からインタープリタと検索すると設定項目が出てきますが、追加したインタープリタが選べるようになっているはずです。

## 終わりに

紹介したプラグインを入れて上記の設定をするだけで、ひとまずVSCodeでのチーム開発はある程度できるようになると思います！

紹介したいプラグインはたくさんあるのですが、執筆能力が追いつかないのでこのくらいにしておきます！
（特にPyCharmからなんらかの事情でVSCodeに移行する人にとっては`intellij-idea-keybindings`はとんでもないプラグインだと思うのでぜひ使っていただきたい）

ちなみに！ここまで書いておいてなんですが、VSCodeは無料で利用でき、多種多様なプラグインで自由に環境を構築できるのが素晴らしいです。

が、あくまで**Pythonでの開発**という点に的を絞った場合、PyCharmは紹介したほぼ全てデフォルトで利用でき、変更したい場合でもGUIから簡単にいじれます。

デメリットとして

- マークダウンの編集が弱い
- メモリめっちゃ食うのでスペックによってはPC全体の動作が遅くなる

などが挙げられますが、その分

- リアルタイム構文チェック
- DBとの強力な連携機能
- プロジェクト全体検索
- 変数名変更などのリファクタリング
- 使いやすいリモートデバッグ

の他にも、痒いところに手がととぐ使いやすさがあります。

ことPythonにおける開発において、すでにPyCharmを利用中の方がわざわざVSCodeに移行する意味はあまりないのかなと思いました!

お　し　ま　い

**5/10：[VSCode に必ず入れておきたい拡張機能](https://qiita.com/ucan-lab/items/e85931bf8276da43cc97)を拝見して、神プラグインたくさんあったのでいろいろ追加させてもらいました。**