Closed2023/08/05にクローズ6

【key-front】おすすめのVScode拡張機能について議論してみた

モチベーション

毎週金曜日Slackのkey_frontチャンネルでハドル機能を使いお題に対してメンバー同士ディスカッションをする時間を15〜30分程度設けている
今回のお題は「VScodeの拡張機能」について
ファシリテーターは筆者ではないが、調査内容をスクラップに投げていく
開催日は8/4（金）で最終的に議事録として結論をまとめる

ゴールは.vscode/extensionsのブラッシュアップ
まずは使っているVSCodeの拡張機能を洗い出してみる

Code Spell Checker

タイポの強調

Conventional Commits

VSCodeでCommitizenできる

Error Lens

エラーの強調

ESLint

必須

GitHub Pull Requests and Issues

VSCodeでPRを管理できる

GitLens

VSCodeでソースを管理できる

Japanese Language Pack for Visual Studio Code

VSCodeをローカライズできる

Material Icon Theme

VSCodeのUIを良くする

Path Autocomplete

パスで入力補完を効かせる

Prettier

必須

Pretty TypeScript Errors

TSエラーの強調

Reload

VSCodeでリロードできる

Stylelint

必須

vscode-styled-components

CSS-in-JSで入力補完を効かせる

議事録_20230804

参加人数は5名（以下エビデンス）

色々話した結果下記のようになった優先順位をつけた

優先度（高）

ESLint（必須）
Stylelint（必須）
Prettier（必須）
GitHub Pull Requests and Issues（VSCodeでPRを管理できる）
Error Lens（エラーの強調）
GitLens（VSCodeでソースを管理できる）
Git History（VSCodeでソースの履歴を閲覧できる）
Japanese Language Pack for Visual Studio Code（VSCodeをローカライズできる）
Reload（VSCodeでリロードできる）
Live Server（ペアプロで使う）
Material Icon Theme（VSCodeのUIを良くする）（好みの問題かも）

優先度（中）

Auto Complete Tag（Auto Close Tag・Auto Rename Tag）（タグの入力補完を効かせる）
Path Autocomplete（or Path Intellisense）（パスの入力補完を効かせる）
Code Spell Checker（タイポの強調）
TODO Highlight（アノテーションコメントの強調）
indent-rainbow（インデントの強調）
Color Highlight（カラーコードの強調）

好みや案件による

GitHub Copilot（有料版だが一応入れておきたい）
vscode-styled-components （CSS-in-JS使う場合）
Pretty TypeScript Errors（TypeScript使う場合）
Conventional Commits（VSCodeでCommitizenしたい場合）
ES7+ React/Redux/React-Native snippets（Reactを使う場合）

補足

ES7+ React/Redux/React-Native snippetsのスニペット一覧

いいね5000以上の記事

TODO

ディスカッションの中で出た「ユーザースニペット」について調査する
.vscode/extensionsのアップデート
editorconfigについて調査する

extensions.jsonをアップデートした

extensions.json

{
  "recommendations": [
    "formulahendry.auto-close-tag",
    "formulahendry.auto-complete-tag",
    "formulahendry.auto-rename-tag",
    "streetsidesoftware.code-spell-checker",
    "naumovs.color-highlight",
    "usernamehw.errorlens",
    "dbaeumer.vscode-eslint",
    "GitHub.vscode-pull-request-github",
    "eamodio.gitlens",
    "donjayamanne.githistory",
    "oderwat.indent-rainbow",
    "MS-CEINTL.vscode-language-pack-ja",
    "ritwickdey.LiveServer",
    "PKief.material-icon-theme",
    "ionutvmi.path-autocomplete",
    "esbenp.prettier-vscode",
    "natqe.reload",
    "stylelint.vscode-stylelint",
    "wayou.vscode-todo-highlight"
  ],
  "unwantedRecommendations": []
}

導入するかは案件次第

{
    "vivaxy.vscode-conventional-commits",
    "dsznajder.es7-react-js-snippets",
    "GitHub.copilot",
    "yoavbls.pretty-ts-errors",
    "styled-components.vscode-styled-components",
    "redhat.vscode-yaml",
    "vue.volar",
    "yoyo930021.vuter"
}

editorconfigは入れるか悩みどころ、実際に入れてみたらバッティングした

ES7+ React/Redux/React-Native snippetsで色々カバーできそう

特定のテストを実行する

{
    "firsttris.vscode-jest-runner"
}

SVGのプレビューを表示する

{
    "SimonSiefke.svg-preview"
}

このスクラップは2023/08/05にクローズされました