0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【VSCode】やっておきたい設定&入れておきたい拡張機能

Posted at

VSCodeにやっておきたい設定

※便利だったものを随時追加予定

設定ファイルは、「Code > 基本設定 > 設定」で開く。
jsonを直接編集する or フォームから単語検索!

インデントの強調

settings.json
highlightActiveIndentGuide: true

不要な行の削除

settings.json
"files.trimFinalNewlines": true

VSCodeに入れておきたい拡張機能

Bracket Pair Colorizer :各カッコの対応を色付きで表示する。

Path Intellisense :パスの入力補助。

Output Colorizer :出力結果を色付けする。

Trailing Spaces :行末の空白を強調表示してくれる。

settings.jsonを下記のように編集すると、コード保存時に末尾の空白を削除できる

settings.json
"files.trimTrailingWhitespace": true

Auto Rename Tag :片方のHTMLタグを修正するともう片方の自動で修正する。

indent-rainbow :インデントを色分けする。インデントずれも赤色で教えてくれる。

Regex Previewer :正規表現をエディタでチェックできる。
option + command + mで起動。

Todo Tree :TODO などのコメントを一覧表示する。

peacock :プロジェクトごとにワークスペースのカラーを変える。

Material Icon Theme :ファイルやフォルダにアイコンを表示。

pritter :コードフォーマッター(ソースコードを整形するツール)。
npm、yarnでもインストールできる。eslintと一緒に使うとよい。
prettier-eslintを使うことでprettierで整形した結果をeslint --fixに渡すことができ、コンフリクトしない。

Whitespace+ :スペースに色付けする。使いたい時に。

参考にさせていただいた記事

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?