Zenn
Closed6

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

VS Code
1zushun1zushun

モチベーション

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

Code Spell Checker

タイポの強調

Conventional Commits

VSCodeでCommitizenできる

https://zenn.dev/rik9228/articles/638e6396726700

Error Lens

エラーの強調

https://zenn.dev/sqer/articles/1ece0a41163b078cf6fd

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エラーの強調

https://zenn.dev/miruoon_892/articles/2fd9932115048b

Reload

VSCodeでリロードできる

Stylelint

必須

vscode-styled-components

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

1zushun1zushun

議事録_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を良くする）（好みの問題かも）

https://qiita.com/azu369yu/items/3d8e7df610fe35dc1ad3

優先度（中）

  • 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のスニペット一覧

https://github.com/ults-io/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

  • いいね5000以上の記事

https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234

TODO

  • ディスカッションの中で出た「ユーザースニペット」について調査する
  • .vscode/extensionsのアップデート
  • editorconfigについて調査する
1zushun1zushun
  • 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は入れるか悩みどころ、実際に入れてみたらバッティングした

https://qiita.com/naru0504/items/82f09881abaf3f4dc171

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

https://zenn.dev/miz_dev/articles/157a7aaad0bdcf

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