これだけはやっとけ! VSCodeの設定
会社に新しく入ってくる人や、Visual Studio Codeを使い慣れていない人に向けて、個人的なVSCodeの設定をまとめてみました。
言語ごとの拡張を入れたりするとキリがないので、基本的な設定を中心にまとめています。
基本設定
設定画面からお好みに合わせて設定してください。
ここではデフォルトで有効設定になっていない項目のみ紹介します。
フォント (editor.fontFamily)
お好みのフォントをインストールし、設定しておきましょう
editor.fontFamily で検索すると、フォントを設定できます。
-
BIZ UDGothic
これでも十分 -
白源
オススメ - Bizin Gothic
- Moralerspace
- Ricty
- UDEV Gothic
などなど
ホワイトスペースの可視化 (editor.renderWhitespace)
editor.renderWhitespace で検索すると、ホワイトスペースの可視化を設定できます。
オススメは all(すべて可視化)で、好みによってboundary(単語間の1つのスペースは可視化しない)という感じ。
文書作成時のLint
テキスト校正くん を入れると、textlintによる日本語の文書校正ができます。
typoにも気づきやすくなりますし、日本語としてちょっとおかしい部分などを確認できます。
メモを書いたり、Markdownを書くときなどに便利です。
Git連携
VSCodeでGitを使うときに便利な設定です。
まずgitのエディタとしてVSCodeを使うように設定します。
$ git config --global core.editor 'code --wait'
さらに、VSCodeでGitの差分を見るときに、VSCodeのDiffエディタを使うように設定します。
$ git config --global diff.tool vscode
$ git config --global difftool.vscode.cmd 'code --wait --diff $LOCAL $REMOTE'
あとはマージツールとしてもVSCodeを使うように設定します。
$ git config --global merge.tool vscode
$ git config --global mergetool.vscode.cmd 'code --wait $MERGED'
そして、VSCodeに GitLens という拡張機能を入れると、Gitの情報を見やすく表示してくれるのでおすすめです。
rebaseをする際にも、見やすい画面でrebaseができるので、誤操作も減ります。ぜひ入れてみてください。
Markdown
Markdown All in One を入れるとMarkdownを書くときに便利です。
Markdown Preview Enhanced も入れると、プレビューがより見やすくなります。
icon
vscode-icons を入れると、ファイルのアイコンが見やすくなります。
EditorConfig
EditorConfig for VS Code を入れると、EditorConfigに従ってVSCodeの設定を変更してくれます。
EditorConfigGenerator を入れておくと、EditorConfigの設定ファイルを簡単に作成できます。
クォートのトグル
Toggle Quotes を入れると、クォートのトグルができるようになります。" -> ' -> ` の順でトグルできます。
まとめ
VSCodeは拡張機能が豊富で、自分好みにカスタマイズできるので、ぜひ自分好みにカスタマイズしてみてください。
特定の言語で開発する場合は、その言語に特化した拡張機能を入れると、より効率的に開発できるようになります。
他にも便利な拡張機能があれば、ぜひ教えてください。
Discussion