Zenn
🐥

VScodeの環境構築 【メモ】

2025/03/02に公開
VS Code
VS Code 拡張機能
tech

設定

setting.json
{
 "editor.guides.bracketPairs": "active",
 "editor.tabSize": 2,
 "files.autoGuessEncoding": true,
 "workbench.startupEditor": "none"
}

日本語化

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
拡張機能をインストール後、右下の出てくるボタンを押す。

表示

VScodeの表示関する部分の拡張機能一覧。

GitHub Theme

githubのダークテーマが好きなのでこちらを導入。
https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

Material Icon Theme

エクスプローラーに表示されるアイコンをカスタマイズする。
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

indent-rainbow

インデントに色をつける。pythonを書くときなどに便利。
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Rainbow CSV

CSVファイルに色をつけて分ける拡張機能。よくCSVをいじる人には便利。
https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

Trailing Speace

不要なスペースを赤くハイライトしてくれる。
https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

WordCounter

文字数などをカウントしてくれる。
https://marketplace.visualstudio.com/items?itemName=kirozen.wordcounter

setting.json
{
 "wordcounter.include_eol_chars": false,
 "wordcounter.side.left": ["char", "line"],
 "wordcounter.text.char": "文字",
 "wordcounter.text.chars": "文字",
 "wordcounter.text.line": "行",
 "wordcounter.text.lines": "行",
 "wordcounter.text.word": "単語",
 "wordcounter.text.words": "単語",
 "wordcounter.text.delimiter": "  ",
 "wordcounter.text.word_delimiter": ""
}

Better Comments

コメントを装飾できる。大事な部分やToDoを色分けで記載できるので便利
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

zenkaku

全角スペースをチェックしてくれる。
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

スペルチェック

スペルチェックや添削に関する拡張機能。

Code Spell Checker

英単語のスペルチェッカー。変数名を決めるときなどに便利。
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

テキスト校正くん

日本語の文章を添削してくれる。Docを書くときなどに便利。
https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading

HTMLHint

htmlの文法をチェックしてくれる
https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint

言語

各言語の拡張機能。

HTML CSS Support

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

Auto Rename Tag

タグ編集がやりやすくなる。
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

CSS Peek

HTMLファイル内でCSSを確認できる。
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

Live Server

HTMLなどをローカルサーバーを立ててリアルタイムで更新ができる。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

JavaScript (ES6) code snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Path Autocomplete

パスをオートコンプリートできる。
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

Tabnine

AIが予測して補完してくれる。
https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode

IntelliCode

AIが予測して補完してくれる。
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

フォーマッター

コードを整形するための拡張機能。

Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

setting.json
{
 "editor.defaultFormatter": "esbenp.prettier-vscode",
 "editor.formatOnSave": true,
 "prettier.singleQuote": false,
 "prettier.printWidth": 200
}

Discussion