Skip to content

Instantly share code, notes, and snippets.

@Kiyo510
Last active November 12, 2022 04:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kiyo510/808a24c669745f7f4139f55c9732c971 to your computer and use it in GitHub Desktop.
Save Kiyo510/808a24c669745f7f4139f55c9732c971 to your computer and use it in GitHub Desktop.
progaku_lecture

個人的におすすめなVSCodeの拡張機能 & ターミナルの設定やお便利ツールまとめ(初学者向け)

あなたは誰ですか?

  • エンジニア歴2年目のペーペーです
  • 現在業務ではLaravelでAPIやフロントの開発、AWS周りのお世話をしています(ECS/FargateとかTerraformの管理とかCI/CD周りとか)
  • プライベートでも業務でもメインエディターはJetBranin社のものを使っています(PhpStorm)
  • ターミナルは業務用Macでは色々使った結果Alacritty + Zellijを使っています。
    • プライベート用のUbuntuでは標準ターミナル(gnome-terminal) + tmux

前提(エディターについて)

  • そもそも下記の条件に当てはまる方は金出してとっととJetBrains社のものを使いましょう(過激派)。
    30日トライアルもあるので、自分が興味のある言語のエディターを使ってみると良いです!
    • インストールして即使えるオールインワンな最高の開発体験が欲しい
    • エディターのセッティングに時間を掛けたくない
    • これからゴリゴリ開発を行っていきたい
    • 拡張機能について調べるのめんどい

※ あくまでもVSCode、PhpStormどちらも使った上での個人的な感想です。

VSCodeにインストールしている拡張機能一覧

下記コマンドでextensionsというファイルに拡張機能の一覧をテキストで出力できます。
使っている言語由来のものが多く全部は紹介できないので、一部抜粋して紹介します。
気になるものがあったら自分で調べてみてください!

$ code --list-extensions

adpyke.vscode-sql-formatter
amiralizadeh9480.laravel-extra-intellisense
austenc.laravel-blade-spacer
bierner.markdown-mermaid
bmewburn.vscode-intelephense-client
bung87.rails
bung87.vscode-gemfile
codingyu.laravel-goto-view
darkriszty.markdown-table-prettify
dbaeumer.vscode-eslint
DeepInThought.vscode-shell-snippets
dsznajder.es7-react-js-snippets
eamodio.gitlens
esbenp.prettier-vscode
formulahendry.terminal
foxundermoon.shell-format
GitHub.github-vscode-theme
golang.go
hashicorp.terraform
jallen7usa.vscode-cue-fmt
marp-team.marp-vscode
mechatroner.rainbow-csv
mgmcdermott.vscode-language-babel
mhutchie.git-graph
mike-co.import-sorter
mikestead.dotenv
ms-azuretools.vscode-docker
ms-python.isort
ms-python.python
ms-python.vscode-pylance
ms-toolsai.jupyter
ms-toolsai.jupyter-keymap
ms-toolsai.jupyter-renderers
ms-toolsai.vscode-jupyter-cell-tags
ms-toolsai.vscode-jupyter-slideshow
ms-vscode-remote.remote-containers
ms-vscode.makefile-tools
ms-vsliveshare.vsliveshare
ms-vsliveshare.vsliveshare-audio
ms-vsliveshare.vsliveshare-pack
neilbrayfield.php-docblocker
nickgo.cuelang
octref.vetur
onecentlin.laravel-blade
onecentlin.laravel5-snippets
pmneo.tsimporter
rebornix.ruby
rexshi.phpdoc-comment-vscode-plugin
shufo.vscode-blade-formatter
sianglim.slim
spook.easysass
vscodevim.vim
wayou.vscode-todo-highlight
wingrunr21.vscode-ruby
xdebug.php-debug

Git

GitLens

Git Graph

ドキュメント作成

Markdown Preview Mermaid Suppor

シンタックスハイライト

Rainbow CSV

DotENV

TODO Highlight

その他

VSCodeVim

  • Vimのキーバインドが使える
    • 慣れるまで時間がかかるけど(毎日数時間使いつづけて1ヶ月ぐらい)

その他いい感じに使えそうな拡張機能がまとまっていた記事

https://zenn.dev/umi_mori/articles/dd121abf2a2f77

ターミナルの設定

こんなめんどうな事をしていませんか?

  • わざわざブラウザからGitHubのリポジトリやPRを探しに行っている
  • VSCodeでファイルやプロジェクトを開くときわざわざFinderを経由している
  • ディレクトリの移動をcdをつかって移動している

せっかくターミナルをつかうのであればなるべくターミナルからCLIでアクセスできたほうが開発体験も向上すると思いませんか?

全貌はこちらのdotfilesの.zshディレクトリ配下にあります。

コマンドを補完できるように

プラグインマネージャーはZinitをつかっています。 https://qiita.com/obake_fe/items/c2edf65de684f026c59c

# ##### 補完関連 #######
zinit ice wait'0'
# 補完
zinit light zsh-users/zsh-completions
autoload -Uz compinit && compinit
## 補完で小文字でも大文字にマッチさせる
zstyle ':completion:*' matcher-list 'm:{a-z}={A-Z}'
## 補完候補を一覧表示したとき、Tabや矢印で選択できるようにする
zstyle ':completion:*:default' menu select=1
# 補完候補に色つける
autoload -U colors
# colors
zstyle ':completion:*' list-colors "${LS_COLORS}"
# 単語の入力途中でもTab補完を有効化
setopt complete_in_word
# 補完候補をハイライト
zstyle ':completion:*:default' menu select=1
# キャッシュの利用による補完の高速化
zstyle ':completion::complete:*' use-cache true
# 補完リストの表示間隔を狭くする
setopt list_packed
# github-cliの補完
eval "$(gh completion -s zsh)"

# シンタックスハイライト
zinit light zdharma-continuum/fast-syntax-highlighting

# Ctrl+r でコマンド履歴を検索
zinit load zdharma-continuum/history-search-multi-word

リアルタイム検索

https://github.com/zdharma-continuum/history-search-multi-word

GitHub CLI

https://cli.github.com/

tmux

プライベート用のUbuntuでは標準ターミナル(gnome-terminal) + tmux

ディレクトリを自由に飛び周れる「z」

https://github.com/rupa/z

gitの差分をいい感じに表示できるやーつ!!

https://qiita.com/geeknees/items/8c60c66e72825f5bd8b3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment