hate_aaa3の技術備忘録メモ

自分用メモ(IT系)をストックしていきます。

端末のセットアップ(VSCode編)


プロジェクト移動やなんやでPCが変わったりするので、結構どこの案件でも使えそうな 設定情報やインストールしてるプラグインなんかを残しておこう。

実施環境:Windows10端末

目次

1.1. Pythonインストール

https://pythonlinks.python.jp/ja/index.html からダウンロードしてインストールする。

※インストールする時にはパスを通すにチェックをしてインストールすること。

1.2. VSCodeインストール

https://code.visualstudio.com/docs/?dv=win からダウンロードしてインストールする。

1.3. 追加プラグインインストール

インストール対象

No カテゴリ プラグイン 説明
1 共通 Japanese Language Pack for Visual Studio Code 日本語化
2 共通 Material Icon Theme アイコン
3 共通 Remote - SSH SSH接続
4 共通 Remote - SSH Editing Configuration Files SSH接続の設定ファイル
5 共通 draw.io AWS構成図の作成
6 コーディング全般 Trailing Spaces スペースがある時に目立つようにしてくれる
7 コーディング全般 EvilInspector 全角スペースを検知
8 コーディング全般 zenkaku 全角スペースを可視化
9 コーディング全般 Prettier コードの自動整形
10 CloudFormation CloudFormation Cloudformationコーディング
11 CloudFormation CloudFormation Linter CloudformationのLinter
12 CloudFormation YAML YAML
13 shell Bash IDE Bash コーディング
14 shell shellcheck shell構文解析
15 HTML Auto Rename Tag タグ名変更時の閉じタグ自動変換
16 HTML Auto Close Tag 開始タグ記述時に自動で閉じタグを生成
17 マークダウン Markdown All in One マークダウン作成
18 マークダウン Excel to Markdown table 表形式(エクセル/スプレッドシート)をマークダウン形式に変換
19 マークダウン Markdown Preview Enhanced マークダウンのプレビュー機能
20 マークダウン markdownlint マークダウンのプレビュー機能のLinter
21 マークダウン Text Tables マークダウン形式で表を作成支援


VSCodeのターミナルから以下を実行しプラグインをインストール

code --install-extension MS-CEINTL.vscode-language-pack-ja --force
code --install-extension PKief.material-icon-theme         --force
code --install-extension ms-vscode-remote.remote-ssh       --force
code --install-extension ms-vscode-remote.remote-ssh-edit  --force
code --install-extension hediet.vscode-drawio --force
code --install-extension shardulm94.trailing-spaces --force
code --install-extension saikou9901.evilinspector --force
code --install-extension mosapride.zenkaku --force
code --install-extension esbenp.prettier-vscode --force
code --install-extension aws-scripting-guy.cform --force
code --install-extension kddejong.vscode-cfn-lint --force
code --install-extension redhat.vscode-yaml --force
code --install-extension mads-hartmann.bash-ide-vscode     --force
code --install-extension timonwong.shellcheck --force
code --install-extension formulahendry.auto-rename-tag     --force
code --install-extension formulahendry.auto-close-tag      --force
code --install-extension yzhang.markdown-all-in-one --force
code --install-extension csholmq.excel-to-markdown-table   --force
code --install-extension shd101wyy.markdown-preview-enhanced --force
code --install-extension DavidAnson.vscode-markdownlint    --force
code --install-extension RomanPeshkov.vscode-text-tables --force

1.4. Cloudformation用lintの設定

VSCodeのターミナルから以下を実行しpipをインストール

python -m pip install --upgrade pip
pip install --user cfn-lint
pip install --user pydot

VSCodeのターミナルから以下を実行し現在の値を変数に格納する。 ※念のため、バックアップしておく。

[System.Environment]::GetEnvironmentVariable("Path", "User")
[System.Environment]::GetEnvironmentVariable("Path", "User") >> user_path.txt
$oldSystemPath = [System.Environment]::GetEnvironmentVariable("Path", "User")

VSCodeのターミナルから以下を実行しpythonのパスを確認。

pip show cfn-lint

・
・
Location:c:\users\hoge\appdata\roaming\python\python310\site-packages
・
・



VSCodeのターミナルから以下を実行し、現在の環境変数が格納されている文字列にpythonスクリプトパスを追加する。

※注意!前項で確認したパスの最後のフォルダを\site-packagesから\Scriptsに変更する必要があります。

$oldSystemPath += ";c:\users\hoge\appdata\roaming\python\python310\Scripts"


VSCodeのターミナルから以下を実行し環境変数を設定する。

[System.Environment]::SetEnvironmentVariable("Path", $oldSystemPath, "User")

VSCodeのターミナルから以下を実行し以下を設定し環境変数に設定されているか確認する。

Get-ChildItem env:PATH | ft -Wrap

1.5. 括弧の色付け

  1. VSCodeのメニューから[ファイル]→[ユーザ設定]→[設定]で画面を開く。
  2. ウィンドウの検索バーにbracketと入力する。
  3. [editor.bracketPairColorization.enabled]の項目にチェックを入れる。