DEVGRU

プログラミングと競馬予想について書きます

トップ > Programming > 私的開発環境改善計画 Ver. 2021-2

私的開発環境改善計画 Ver. 2021-2

Programming Visual Studio Code Python TypeScript

前の記事で開発環境を確認したので、次は改善を考えていく。

team-6.hatenablog.jp

広告

エディタ

Visual Studio Code から変える気はしばらくないので、これをどう便利にしていくか考える。

設定の同期

仕事と個人の環境で設定を同期しておらず、さらにこの前MacBookを新調したときに移行に苦労したので、設定の同期を有効化する。

AzureかGitHub アカウントで同期できるので、GitHubアカウントを選択した。

キーマップ

ずっと Awesome Emacs Keymap を使っていて、拡張機能の不都合はほとんどなかったが、そもそもCtrlキーの押し過ぎで小指が痛くなるという、キーバインディング自体の問題に直面したので、Vim キーバインディングに移行する。

拡張機能

適当に検索して出てきたものからピックアップして入れていく。

EditorCondig

プロジェクトで EditorConfig を使用しているため、対応する拡張機能を入れる。

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

indent-rainbow

Python をよく使うので、 インデントが見やすくなるように indent-rainbow を入れる

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

zenkaku

全角空白をハイライトするとのこと。Emacs 時代に同じことをしていたので、入れておく。

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

Code Spell Checker

スペルチェッカーとのこと。念の為入れておく。

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

change-case

Emacs の upcase とか downcase みたいなもののようだ。たまにしか使わなそうだが、入れておく。

https://qiita.com/ucan-lab/items/e85931bf8276da43cc97

TODO Highlight

TODO とか FIXME とかをハイライトしてくれる。 Emacs 時代にしていたので入れておく。

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

Trailing Spaces

行末の空白を表示してくれる。Emacs 時代にしていたので入れておく。

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

markdownlint

Markdown の Lint

https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

Markdown Emoji

:emoji: を絵文字にしてプレビューしてくれる。

https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji

Bookmarks

ファイルと行をブックマークしてくれる。

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

Git Project Manager

複数のGitリポジトリをプロジェクトとして開ける。

https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager

GitLink

現在開いているファイルのGitHub上のリンクをクリップボードにコピーできる。

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

JS Parameter Annotations

JavaScript/TypeScript の関数呼び出しに、各引数の対応する名前を表示する。

https://marketplace.visualstudio.com/items?itemName=lannonbr.vscode-js-annotations

Text Power Tools

テキスト処理コマンド詰め合わせ。

https://marketplace.visualstudio.com/items?itemName=qcz.text-power-tools

Typescript Destructure

TypeScript のデストラクチャリングを定義から作ってくれる。

https://marketplace.visualstudio.com/items?itemName=tusaeff.vscode-typescript-destructure-plugin

Auto Close Tag

HTMLタグを自動的に閉じてくれる。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Auto Rename Tag

対応する HTML タグの一方を変更したときに他方も更新してくれる。

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

ECMAScript Quotes Transformer

ECMAScript のクオートを変換してくれる。テンプレート文字列を使うときに便利そう。

https://marketplace.visualstudio.com/items?itemName=vilicvane.es-quotes

Bracket Pair Colorizer 2

対応するカッコをハイライトしてくれる。

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Auto Import

TypeScript で自動的にインポート文を挿入してくれる。

https://marketplace.visualstudio.com/items?itemName=steoates.autoimport

Dash

Dash を呼び出せる。

https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-dash

Highlight Matching Tag

対応するタグをハイライトする。

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

indent-rainbow

インデントを階層ごとにカラー表示してくれる。

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Quokka.js

コードに実行時の値を表示してくれる。

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Text Marker (Highlighter)

コード中の任意のテキストをハイライトしてくれる。

https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker

設定

インデントのガイドを表示

Guide を使っていたが、どうやら標準になったらしい。

"editor.highlightActiveIndentGuide": true

行末に改行を入れる

プロジェクト次第では避ける必要があるが、POSIX の仕様でテキストファイルは必ず改行で終わらせる必要があり、それを自動化してくれる設定を導入する。

"files.insertFinalNewline": true

制御文字の表示

制御文字 を可視化する模様。ログを見るときとか便利かもしれない。

"editor.renderControlCharacters": true

その他

ワークスペース推奨の拡張機能 で、リポジトリごとに推奨する拡張機能を追加できるようだ。

ターミナル・シェル

ターミナルについては iTerm2 、シェルは zsh とそれぞれ据え置きで、シェルのカスタマイズを考えていく。

Prezto

現在は prezto で zsh をカスタマイズしているが、powerline テーマを設定しただけでそれ以上のことはしていない。さらに良くする余地がないか検討する。

module

prezto には module という仕組みがあり、これを追加すると機能が増えるようだ。

インストールして全くいじっていない .zpreztorc の module はこのような状態だ。

zstyle ':prezto:load' pmodule \
  'environment' \
  'terminal' \
  'editor' \
  'history' \
  'directory' \
  'spectrum' \
  'utility' \
  'completion' \
  'prompt'

デフォルトでインストールされるモジュールはここにある。

上から使えそうなものを拾っていく。

spaceship

spaceship なるものがあり、こちらを入れるのも悪くなさそうだ。多機能だが prezto の module と機能が衝突しそうなので、時間を取って試すのが良さそう。

zplug

Homebrew 的なパッケージマネージャとして zplug があるので、なにか入れるべきパッケージがあればこちらで導入していく。

かなりの量があるので、時間があるときに試していく。

とりあえず目についたものだけ。

永続化

シェルの設定がローカルにしかないので、きちんと永続化していく必要がある。

参考

サービス

ここを参考にしたが、あんまりいいのがなかった。next.js のために Vercel を使いたいぐらい。

ツール

参考

アプリ

Postman

https://www.postman.com/

開発用HTTPクライアント。

cUrl 派だったけど、込み入ったケースもありうるので入れておく。

clipmenu clipy

http://www.clipmenu.com/ja/

clipy

クリップボード履歴・スニペットマネージャ。

同僚が使いこなしていた。

hyperswitch

https://bahoom.com/hyperswitch

⌘+Tab の置き換え。

常々アプリケーションではなくウィンドウ単位での切り替えがしたいと思っていた。

Karabiner-Elements

https://karabiner-elements.pqrs.org/

キーボードカスタマイズユーティリティ。

いろんな事ができるのだが、一番嬉しいのは "Prevent unintended command-q" だ。よくやってしまう。

Unarchiver

https://theunarchiver.com/

圧縮ファイル解凍ソフト。機能がシンプルでいい。

Notion

https://www.notion.so/

Notionアプリ。

ブラウザで開くのと大差ないが、アプリ化されているとブラウザとの行き来が楽でいい。

Kawa

https://github.com/hatashiro/kawa

IMEスイッチのキーバインディングを設定できる。

外付けキーボードでは⌘+スペースでトグルしているのだが、それを任意に変えられる。

Choosy

https://www.choosyosx.com/

ブラウザセレクター。

URLなどの条件によって開くブラウザを切り替えられる。

Firefox をメインで使いつつ、認証の問題でGoogle Chromeを使う必要があるのでこれは捗る。

Alfred

https://www.alfredapp.com/

著名なタスクランナー。いろんな事ができる。いや本当にいろんな事ができる。

CheatSheet

https://www.mediaatelier.com/CheatSheet/

⌘長押しで現在のアプリのショートカットを表示してくれる。

Keycastr

https://github.com/keycastr/keycastr

キーストロークを表示してくれる。ライブプログラミングするときに必須。

DevUtils.App

https://github.com/DevUtilsApp/DevUtils-app

JSON フォーマットとかBase64デコードエンコードとか、よくウェブで単機能であるようなものを詰め込んでいる。

super-productivity

https://github.com/johannesjo/super-productivity

ToDo List, Time Tracker, JIRA のタスクマネージャ。

特に Time Tracker に期待している。

Dash

https://kapeli.com/dash

API ドキュメントマネージャとスニペットマネージャ。

MDN とか Python リファレンスをよく開くので、ブラウザを開く手間が省けるかもしれない。

Jasper

https://jasperapp.io/

GitHub Issue ビューワー。

プロジェクトはIssueで管理しているため、こちらで効率的に見たい。

TUI

lazygit

https://github.com/jesseduffield/lazygit

TUI Git アプリ。

Git は基本的にコマンドライン派だが、少しやり方を変えたくなった。

tson

https://github.com/skanehira/tson

JSON ビューワ。

JSON 見るのがしんどい時があるので、そのときに使う。

pst

https://github.com/skanehira/pst

プロセスモニタ。

ps → kill を簡略化できる。

CLI - Git, GitHub 関連

gh

https://github.com/cli/cli

GitHub 謹製のコマンド。

GitHub の各種操作が CLI から実行できる。

hub

https://github.com/github/hub

こちらも GitHub 謹製のコマンド。

gh と違って、こちらは git のラッパーとして動く。

ghq

https://github.com/x-motemen/ghq

Git リポジトリマネージャ。

~/work にリポジトリを集めていたが、こちらの管理に切り替える。

git-extras

https://github.com/tj/git-extras

Git 追加コマンド群。

git-standup

https://github.com/kamranahmedse/git-standup

直近のコミットを表示してくれる。

gitmoji-cli

https://github.com/carloscuesta/gitmoji-cli

コミット時に絵文字を選ばせてくれる。

git-open

https://github.com/paulirish/git-open

Git リポジトリからGitHubを開くことができる。

CLI - 既存コマンドの置き換え

mycli

https://www.mycli.net/

mysql コマンドの置き換え。

自動補完ができる。

bat

https://github.com/astaxie/bat

cat コマンドの置き換え。

コードハイライトがある。

dust

https://github.com/bootandy/dust

du の置き換え。

ディレクトリサイズをわかりやすく表示してくれる。

httpie

https://github.com/jkbrzt/httpie

curl の置き換え。

カラーハイライト、わかりやすいオプション体系など。

fd

https://github.com/sharkdp/fd

find の置き換え。

カラーハイライト、わかりやすいコマンド体系、そして高速。

ripgrep

https://github.com/BurntSushi/ripgrep

grep の置き換え。

カラーハイライト、わかりやすいコマンド体系、そして高速。

sd

https://github.com/chmln/sd

sed の置き換え。

分かりやすくて速い。

saws

https://github.com/donnemartin/saws

aws の置き換え。

自動補完、結果のカラーハイライト。

aws コマンドはサブコマンドが非常に多いのでこれは助かる。

lsd

https://github.com/Peltoche/lsd

ls の置き換え。

カラーハイライト、アイコン表示など。

delta

https://github.com/dandavison/delta

diff の置き換え。

シンタックスハイライトなど。

git diff をこれで置き換えると良さそう。

broot

https://github.com/Canop/broot

cd の置き換え。

ディレクトリツリーを表示して、そこに移動できる。

zoxide

https://github.com/ajeetdsouza/zoxide

こちらも cd の置き換え。

よく使うディレクトリを覚えておいて、サジェストしてくれる。

mclfy

https://github.com/cantino/mcfly

Ctrl + r (ヒストリのインクリメンタルサーチ) の置き換え。

画面に直近のコマンドを表示して、絞込める。

choose

https://github.com/theryangeary/choose

cut, awk の置き換え。

わかりやすい文法で行を処理できる。

CLI - その他

homeshick

https://github.com/andsens/homeshick

dotfiles の管理ツール。

googler

https://github.com/jarun/googler

コマンドラインからGoogle検索ができる。

csview

https://github.com/wfxr/csview

CSV Viewer。

skim

https://github.com/lotabout/skim

Fuzzy finder。

peco や fzf と同じ。

watchexec

https://github.com/watchexec/watchexec

ファイルやディレクトリの変更を監視して指定したコマンドを実行してくれる。

tealdeer

https://github.com/dbrgn/tealdeer

コマンドの使用例を表示してくれる。

emojify

https://github.com/mrowa44/emojify

:raising_hand: → 🙋 のような変換をしてくれる。

shallow-backup

https://github.com/alichtman/shallow-backup

エディタの設定やHomebrewのインストール済ファイルのバックアップを一括でしてくれる。

ブラウザ拡張

開発

OctoLinker

https://github.com/OctoLinker/OctoLinker

GitHub で表示しているソースコードの文法を解析してインポートしているモジュールへのリンクを作成する。

Refined GitHub

https://github.com/sindresorhus/refined-github/

非常に沢山の機能があって紹介しきれない。

Notifier for GitHub

https://github.com/sindresorhus/notifier-for-github

GitHub の通知をポップアップ表示してくれる。

OctoPermalinker

https://github.com/josephfrazier/octopermalinker

コミットへのリンクをブランチへのリンクに変換してくれる。

GitHub Issue Link Status

https://github.com/fregante/github-issue-link-status

Issue へのリンクに各々のステータスを表示してくれる。

Github-vscode-icons

https://github.com/dderevjanik/github-vscode-icons

ファイル一覧にVSCode Icon を表示してくれる。

Rubberduck

https://www.rubberduck.io/

サイドバーにリポジトリのファイルブラウザーを追加してくれる。

とりあえず列挙したものを入れて、開発環境を改善してみる。

その評価はまたしばらく後に。

Visual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック

Visual Studio Code実践ガイド —— 最新コードエディタを使い倒すテクニック

  • 作者:森下 篤
  • 発売日: 2020/02/21
  • メディア: Kindle版

GitHub実践入門──Pull Requestによる開発の変革 WEB+DB PRESS plus

GitHub実践入門──Pull Requestによる開発の変革 WEB+DB PRESS plus