VSCodeあれこれ

こんばんは。ゼロです。
今回はみんな大好きVSCodeの話です。

プログラミング するときに必須なものといえばブラウザ（Chrome）とエディタですよね。
僕はVSCodeを使ってます。

エディタの変遷としては
TeraPad→Brackets→Atom→VSCodeと辿ってきました。
結構迷走してるかな...?

プログラミングを始めた当時は自前のPCを持ってなくて大学はWindowsだったので、純粋に講義で推奨されたTeraPadを使ってました。（あの頃はマジでなんも知らなかった…そしてめっちゃ純粋だった笑）

タグとかもほぼ補完なしで手打ち。今思うと効率が終わってました。

確か、その当時担当してた先生が2年生の必修でBrackets使うから今のうちに使ってもいいよっていう感じでクリスマス頃からBrackets使ってたんですがデフォルトのダークテーマが嫌いでした笑

そっからProgateとかドットインストールやり始めてAtom使ってました。
それで1月中旬くらいに大学の先生に誘われて勉強会に行って知らないエディタ使ってるの見てカッコイイってなってVSCodeを知った感じです。

でも、しばらくAtomから離れられなくて（VSCode当時は書籍とかあんまなくてQiitaとか見るのもあんま慣れてなくて移行できなかった）

移行を決断したのは昨年5月ですね。10連休で暇だったのでVSCodeに慣れる意味でも開発しようって。

なので、VSCode歴？は1年ないです。
でも、今ではVSCodeがないと開発する気失せるくらいな中毒性があると思い込んでます。
大学の必修でもみんなは指定のBrackets使ってたけど、先生にVSCode使いたいって言ったら使わせてくれた。先生には感謝しかない。

それで、今はわざわざGist経由で設定とかをDLして使うくらい取り憑かれてるな。

今のエディタの雰囲気はこんな感じ。
HTML表示ね。テーマはSuper One Darkってやつ
元々Atom One darkが好きで似た感じにしたかったんだけど、下のステータスバー とかの雰囲気をいじってテーマの背景を黒じゃなくてAtom本来の色にしたらめっちゃイイ感じになった。（自己満足笑）
あと、ここには出てないけどidのカラーを青にしたらAtomのほぼまんまになるからそこだけカスタムしたい。

でも、黒よりもネイビーの方がVSCodeのカーソルとかも映えるから好きかな。
あとポイントとして下のステータスバーの色はVSCode色にしてる。（水色って言えばイイのかな）なんかこの爽やかな色好き。
フォルダ登録してないとデフォルトでは紫なんだけど、設定で全部この色にした。

拡張機能は全部で17個
結構厳選してる気がする。VueとかPHPをまだ本格化してないから少なめかな。

VSCodeの魅力
・emmetがデフォで使える
・自動保存ができる　いちいち⌘Sをしなくてイイ
・ショートカットやテーマ、拡張機能などの設定を弄れる（オンリーワンのエディタになる）
・付属のターミナルでも基本的なことは可能
・多機能だけど立ち上げとか全て軽い
・拡張機能を入れたり詳細を見たりするのが楽（一時期sublime使ってたこともあるけどだるい）
・ドキュメントが神　簡単な英語だし拡張機能とかの説明もわかりやすいものが多い
・Gist経由で設定などを複数のマシンで共有できる
・入力補完が正確＆速い　
・日本語化が簡単（インストール後に拡張機能でjapaneseと検索もしくポップアップに従う）

おすすめの拡張機能

・あんまり奇抜な？奴は入れてないんだけど、Activitus Barはおすすめ。
これはデフォだと左にあるアクティビティバーを左下に置く拡張機能。
13インチとかで開発してるとどうしてもスペースが狭いから効率化したくて、探したのがこれ。

これを使うと、左のバーが消えてすごく楽。
あとはショートカットキー駆使でも良さそう。

設定はこんな感じです（一部は個人情報あるのでカットしました）
全然整理してないので結構ごちゃごちゃしてますm(_ _)m

{
   "editor.fontSize": 20,
   "editor.wordWrap": "on",
   "markdown.preview.markEditorSelection": false,
   "markdown.preview.scrollPreviewWithEditor": false,
   "markdown.preview.scrollEditorWithPreview": false,
   "editor.tabCompletion": "on",
   "workbench.statusBar.feedback.visible": false,
   "debug.showInStatusBar": "always",
   "workbench.startupEditor": "newUntitledFile",
   "workbench.activityBar.visible": false,
   "editor.renderIndentGuides": true,
   "editor.links": true,
   "workbench.iconTheme": "file-icons",
   "editor.copyWithSyntaxHighlighting": false,
   "editor.codeInsets": true,
   "editor.hideCursorInOverviewRuler": true,
   "editor.parameterHints.enabled": false,
   "editor.formatOnPaste": false,
   "editor.formatOnSave": false,
   "editor.formatOnType": false,
   "editor.folding": false,
   "extensions.showRecommendationsOnlyOnDemand": true,
   "C_Cpp.updateChannel": "Insiders",
   "workbench.statusBar.visible": true,
   "workbench.sideBar.location": "left",
   "bracketPairColorizer.forceUniqueOpeningColor": true,
   "bracketPairColorizer.forceIterationColorCycle": true,
   "liveServer.settings.donotShowInfoMsg": true,
   "emmet.triggerExpansionOnTab": true,
   "emmet.variables": { // Emmet で展開される HTML の言語を変更
       "lang": "ja"
   },
   "[html]": {
       "editor.defaultFormatter": "vscode.html-language-features",
   },
   "[ruby.intellisense]": "rubyLocate",
   "ruby.useLanguageServer": true,
   "solargraph.definitions": true,
   "solargraph.diagnostics": true,
   "editor.tabSize": 2,
   "solargraph.formatting": true,
   "Missing top-level class documentation comment.": false,
   // JavaScriptでのみ保存時フォーマットを有効化
   "[javascript]": {
       "editor.formatOnSave": true,
       "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[HTML]": {
       "editor.formatOnSave": true
   },
   "[CSS]": {
       "editor.formatOnSave": true
   },
   // prettierのシングルクオーテーションオプションをon
   "prettier.singleQuote": true,
   "git.enableSmartCommit": true,
   "terminal.integrated.fontFamily": "Ricty Diminished",
   "terminal.integrated.fontSize": 22,
   "terminal.integrated.cursorBlinking": true,
   "editor.suggestSelection": "first",
   "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
   // [markdown] 言語に対して上書きされるエディター設定を構成します。
   "[markdown]": {
       "editor.wordWrap": "on",
       "editor.quickSuggestions": true
   },
   "emmet.includeLanguages": {
       "erb": "html"
   },
   "git.autoRepositoryDetection": false,
   "editor.renderWhitespace": "all",
   "[json]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[css]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeLens": false,
   "[erb]": {},
   "files.autoSave": "afterDelay",
   "sync.autoUpload": true,
   "sync.autoDownload": true,
   "editor.hover.sticky": false,
   "terminal.integrated.shell.osx": "/usr/local/bin/zsh",
   "editor.fontFamily": "Ricty Diminished",
   "editor.hover.enabled": false,
   "editor.colorDecorators": false,
   "forceIterationColorCycle": true,
   "git.autorefresh": false,
   "git.confirmEmptyCommits": false,
   "git.countBadge": "off",
   "peacock.favoriteColors": [
       {
           "name": "Angular Red",
           "value": "#b52e31"
       },
       {
           "name": "Auth0 Orange",
           "value": "#eb5424"
       },
       {
           "name": "Azure Blue",
           "value": "#007fff"
       },
       {
           "name": "C# Purple",
           "value": "#68217A"
       },
       {
           "name": "Gatsby Purple",
           "value": "#639"
       },
       {
           "name": "Go Cyan",
           "value": "#5dc9e2"
       },
       {
           "name": "Java Blue-Gray",
           "value": "#557c9b"
       },
       {
           "name": "JavaScript Yellow",
           "value": "#f9e64f"
       },
       {
           "name": "Mandalorian Blue",
           "value": "#1857a4"
       },
       {
           "name": "Node Green",
           "value": "#215732"
       },
       {
           "name": "React Blue",
           "value": "#00b3e6"
       },
       {
           "name": "Something Different",
           "value": "#832561"
       },
       {
           "name": "Vue Green",
           "value": "#42b883"
       }
   ],
   "workbench.colorTheme": "Super One Dark",
   "workbench.colorCustomizations": {
       "editor.background": "#2c2c34",
   },
   "highlight-matching-tag.styles": {
       "opening": {
         "name": {
           "underline": "#047CD4"
         }
       }
     }
}

また、面白いTips見つけたら更新します〜