こんにちは、iimonでフロントエンドエンジニアをしています。ほでぃーです。 本記事はiimonアドベントカレンダー23日目の記事となります。
はじめに
今回はフロントエンド開発をする上で、普段使用している拡張機能と設定を紹介します。
拡張機能
開発共通
| プラグイン名 | 機能 |
|---|---|
| Japanese Language Pack for Visual Studio Code | Visual Studio Codeを日本語化する |
| TODO Highlight | TODOを分かり易く表示 |
| Code Runner | コードを簡単に実行することができる |
| Rainbow CSV | CSVを見やすくする |
| REST Client | VS Code上でHTTPリクエストを送信できる |
| Path Intellisense | ファイルやディレクトリパスのオートコンプリートが効く |
| Multiple cursor case preserve | 複数単語を変更時に大文字、小文字を保持する |
| Todo Tree | TODOコメントの一覧を表示 |
| Project Manager | 複数プロジェクトを簡単に開く |
| Trailing Spaces | 余計なスペースを表示する |
| indent-rainbow | インデント数の差を見やすくする |
| SVG Previewer | SVGをプレビュー表示する |
| Path Autocomplete | ファイルパスの補完 |
| Live Share | 編集画面を他人と共有、編集ができる |
| YAML | YAML言語をVSCodeでサポートしてくれる |
| Fig | ターミナルの自動補完 |
| Live Server | ローカルサーバーを起動 |
| Import Cost | importするライブラリのサイズをチェックする |
| Code Spell Checker | スペルミスを知らせてくれる |
| Error Lens | 警告やエラーをわかりやすく表示する |
| Jest Runner | クリックで個別でのテストが実行できる |
コードフォーマッティング・静的解析
| プラグイン名 | 機能 |
|---|---|
| Prettier | Node.js上で動作するコードフォーマッター |
| ESLint | JavaScriptやTypeScriptの静的解析ツール |
| Formatting Toggle | トグルで自動フォーマットのON/OFF切り替え |
JavaScript・React
| プラグイン名 | 機能 |
|---|---|
| ES7 React/Redux/GraphQL/React-Native snippets | Reactのスニペット |
| JavaScript Console Utils | JavaScriptのconsoleをショートカットで挿入 |
HTML・タグ
| プラグイン名 | 機能 |
|---|---|
| Insert <br> Tag | HTMLの<br>タグをショートカット入力する |
| Auto Close Tag | HTMLの閉じタグを自動補完する |
| Auto Rename Tag | 開始タグ名を変更時に閉じタグ名も自動で変更 |
| Auto Complete Tag | Auto Close TagとAuto Rename Tagの機能を合わせたもの |
| htmltagwrap | 選択した文字列をまとめてHTMLタグで囲む |
CSS
| プラグイン名 | 機能 |
|---|---|
| CSS Peek | 適用されてるスタイルをすぐ確認できる |
| Tailwind CSS IntelliSense | Tailwind CSSのclass名を自動補完 |
Git
| プラグイン名 | 機能 |
|---|---|
| Git Graph | コミットグラフの表示/ブランチ操作などができる |
| GitLens — Git supercharged | 行の最終変更履歴を確認したりなどができる |
| Gitmoji | gitのコミットメッセージに絵文字をつけることができる |
設定ファイル
| プラグイン名 | 機能 |
|---|---|
| ApacheConf | Apacheの設定ファイルにシンタックスハイライトが効く |
| DotENV | DotENVファイルにシンタックスハイライトが効く |
AI
| プラグイン名 | 機能 |
|---|---|
| GitHub Copilot | AIによってプログラミングを支援してくれる |
| GitHub Copilot Chat | AIを利用してコーディングの補完や提案を行う |
その他
| プラグイン名 | 機能 |
|---|---|
| Zenn Editor | Zenn CLIを VS Code に統合する |
フォント
| フォント名 | 特徴 |
|---|---|
| RictyDiminished-with-FiraCode | Ricty Diminished にFiraCodeのプログラミング合字（リガチャ）をミックスしたもの |
| 白源 | 視認しやすいフォント（0(ゼロ)や|(パイプ)がみやすい） |
設定
ホワイトスペースを削除
"files.trimTrailingWhitespace": true
ファイルツリーのインデントにガイドラインを表示する
"workbench.tree.renderIndentGuides": "always", "workbench.tree.indent": 15,
引数名を表示する
"javascript.inlayHints.parameterNames.enabled": "all", "typescript.inlayHints.parameterNames.enabled": "all",
文字間の調整
"editor.letterSpacing": -0.3,
行間の調整
"editor.lineHeight": 0,
カーソルのアニメーション
"editor.cursorSmoothCaretAnimation": true,
カーソルカラー設定
"workbench.colorCustomizations": { "editorCursor.foreground": "#fff", // カーソル "terminalCursor.foreground": "#fff" // ターミナルカーソル },
カーソルの点滅設定
"editor.cursorBlinking": "phase",
スクロール感度を変更
"editor.mouseWheelScrollSensitivity": 1,
ファイルを常に新しいタブで開く
"workbench.editor.enablePreview": false,
コメントの色を変更
"editor.tokenColorCustomizations": { "comments": "#3b7c31" },
最後に
最後まで読んでくださりありがとうございます！
この記事を読んで興味を持って下さった方がいらっしゃればカジュアルにお話させていただきたく、是非ご応募をお願いします。 Wantedly / Green
次のアドベントカレンダーの記事はクリぼっち確定のたいせいくんです！ 寂しい冬の夜に彩りを添えること間違いなし！！！！！！
