トモジ色々エディタがあるけど何使えば良いのかな？
パンク師匠□゙ ×∞●↔ー√゙ ×∫∑←∑゙ ⇨！
トモジVSCode一択ですか！
でもなんでVSCodeなんだろ〜?
本記事は、上記のような方に向けて記事を書いています。
こんにちは、トモジです。
私は33歳から独学でプログラミングを学び、中途採用を果たし現在フリーランスとして日々奮闘しております。
サクラエディタも人気ですが、Macでは使用できません。
一方、VSCodeは多くのプログラマーに利用されており、習得する価値があります。
本記事では、プログラマーにおすすめのエディタについて、簡潔に説明します。
オススメの理由
VSCodeをオススメする理由は以下の内容です。
- 使用率高い
- 豊富な拡張機能
- 軽量かつ高速
- Gitやターミナルが統合している
- リモート開発機能
- クロスプラットフォーム対応
軽量で高速なうえに、拡張機能や設定が豊富であることが、使用率の向上に繋がっている
オススメの拡張プラグイン
拡張プラグインはかなり多くの数存在しますので、代表的でオススメを紹介します。
※言語に偏るプラグインは除外
【オススメの拡張プラグイン】
- Japanese Language Pack for Visual Studio Code
- Auto Rename Tag
- Prettier
- CSSTree validator
- indent-rainbow
- vscode-icons
- zenkaku
- Git Graph
Japanese Language Pack for Visual Studio Code
・VSCode日本語化
Auto Rename Tag
・開始タグか終了タグのどちらかを変更した際に、タグの名前を自動で変換
Prettier
・コードの整形を自動化するツール(多くの言語に対応)
CSSTree validator
・CSSのエラーを教えてくれる
indent-rainbow
・インデントをカラフルに装飾
【表示内容】
インデントがカラフルに装飾される
vscode-icons
・エディタ内のファイルおよびフォルダのアイコンをカスタマイズ
zenkaku
・コード内にある全角スペースをハイライト表示
【表示内容】
上記の黄色枠により瞬時に全角スペースが分かる
Git Graph
・Gitリポジトリのコミット履歴をグラフィカルに表示
【表示内容】
オススメの設定変更
VSCodeでは、設定画面をカスタマイズでき、settings.jsonに設定内容を記述します。settings.jsonを検索して、該当ファイルをクリックすれば、設定ファイルを開くことができます。
【設定方法】
{
設定ルールを記述
}
vsode設定
// ===============================================================
// vsode設定
// ===============================================================
// 作業エリア設定 ------------------------------------------------
"editor.fontSize": 11, // エディタ作業エリアのフォントサイズ
"editor.tabSize": 5,
"editor.suggestFontSize": 11, // 候補ウィジェットのフォントサイズ
"editor.minimap.enabled": false, // ミニマップ
"editor.formatOnSave": true, //表示のフォント大きさ
"editor.mouseWheelZoom": true, // アイコンのインデント
"workbench.tree.indent": 10, // アイコンのインデント幅設定
"workbench.tree.renderIndentGuides": "always",
"explorer.sortOrder": "mixed", // ファイル名等の順番変更
// tabのカラー設定
"workbench.colorCustomizations": {
"tab.activeBackground": "#bbfeff56",
"tab.activeForeground": "#1d1d20",
"tab.inactiveForeground": "#848490"
},ターミナル設定
// ターミナル設定 ------------------------------------------------
"terminal.integrated.fontSize": 11, // 初期ズームレベル
"files.autoGuessEncoding": true, // ファイルの文字コードを自動判定prettier設定
"prettier.tabWidth": 2, // インデント幅
// "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.defaultFormatter": null,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[Sass]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[Laravel]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[TypeScript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},整形有無を上記で指定可能