みなさんはコーディングをするときにどんなエディタを使っていますか？
エディタもいろいろな種類があるので人それぞれ違うと思います。
そのエディタのなかでも使いやすいなと思ったのがvisual studio codeです。
無料でいて拡張機能も豊富にあるため自分の使いやすいようにカスタマイズすることができます。
今回はvisual studio codeの設定とおすすめの拡張機能を紹介していきたいと思います。
visual studio code
visual studio codeのインストール
visual studio codeをすでにインストールしている人は読み進めてください。
まだvisual studio codeをインストールしていない人は下記のページからダウンロードしてインストールしてください。
※visual studio codeはwindowsにもMacにも対応しています。
visual studio codeの便利な機能
同じ複数の単語や文字列を修正する
visual studio codeでは同じ単語が複数ある場合に一括で修正や削除することができます。
文字列にカーソルを合わせてショートカットキー「Shift + Ctrl + L」を押します。
これで一括で文字列を修正したり削除することが可能です。
文字列の置換
「Ctrl+H」または「Ctrl+Shift+H」で文字列を置換させることができます。
インデントの調整する
文字列を選択して「Shift + Alt + F」をクリックします。
おすすめの拡張機能
Japanese Language Pack for Visual Studio Code
visual studio codeをインストールした初期だと英語になっていてわかりにくいと思います。
こちらの拡張機能を入れることで日本語で表示されます。
Code Spell Checker
リアルタイムにスペルチェックを行ってくれます。
文字列でおかしいところがあれば波線で指摘をしてくれます。
これによってコードミスなどを見つけやすくなります。
zenkaku
全角スペースを強調して表示してくれる拡張機能になります。
全角スペースによって表示崩れや問題が起こることもあるのでこちらを入れておくことで問題を早く見つけることができると思います。
Path Intellisense
HTMLの終了タグを自動的に追加してくれる拡張機能になります。
Auto Rename Tag
閉じタグを自動で入力してくれる拡張機能です。
HTMLを書くときに多いのが閉じタグ忘れによるエラーです。
この拡張機能をいれておけば閉じタグのミスもなくなります。
Image Preview
画像アイコンをプレビュー表示してくれる拡張機能です。
ソースからだとわからない画像もプレビュー表示してくるので便利です。
change-case
単語の大文字や小文字変換をしてくれる拡張機能です。
vscode-reveal
社内で使う簡単なプレゼン資料などを作成できる拡張機能になります。
ESLint
ESLintは、JavaScriptなどの構文エラーを検知してくれる拡張機能になります。
普段、javascriptをよく記述するエンジニアにはおすすめの拡張機能です。
Live Server
簡易的なローカルサーバーを立ち上げてコーディングすることができるVSCodeの拡張機能になります。
この拡張機能のメリットとしてはライブリロードが使える点です。
ファイルの修正を自動で検知してページを更新してくれます。
とても便利で作業効率アップにはかかせない拡張機能です。
HTMLHint
HTMLHintはhtmlの文法チェックを行ってくれる拡張機能です。
多少htmlのスペルミスがあってもレイアウトが崩れないこともあるのでなかなかミスに気が付きにくいと思います。
そしたときでもhtmlのどこにミスや問題があるのかを素早く見つけることができるので便利です。
コメント