公式サイトからダウンロードして解凍し起動。
以下が設定した内容
基本設定
ATOMから使用している設定。この設定に慣れているのでこの設定をそのまま使う。
一覧
コアな設定
| 設定名 | 値 | メモ |
|---|---|---|
| Editor: Font Family | Menlo, Monaco, 'Courier New', monospace | |
| Editor: Font Size | 10 | |
| Editor: Insert Spaces | ON | プロジェクト毎に要確認 |
| Editor: Tab Size | 2 | プロジェクト毎に要確認 |
| Files: Eol | auto | Windows: CRLF(\r\n), Mac: LF(\n) プロジェクト毎に要確認 |
その他
こちらの方の設定をベースに作成
Visual Studio Code の初期設定と最低限必要な拡張機能 - フロントエンド向け - - Qiita
{ "diffEditor.renderSideBySide": false, // Git の差分を行内に表示 "editor.fontSize": 10, // フォントサイズ "editor.wordWrapColumn": 120, // WordWrapされる文字数 "editor.colorDecorators": false, // カラーデコレーターを非表示 "editor.formatOnPaste": true, // ペースト時に自動でフォーマット "editor.formatOnSave": true, // ファイル保存時に自動でフォーマット "editor.formatOnType": true, // 入力した行を自動でフォーマット "editor.minimap.renderCharacters": false, // ミニマップの表示文字をブロックに変更 "editor.minimap.showSlider": "always", // 表示領域をミニマップで常にハイライト "editor.multiCursorModifier": "ctrlCmd", // マウスでの複数選択時の修飾キーを変更 "editor.renderControlCharacters": true, // 制御文字を表示 "editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト "editor.renderWhitespace": "all", // 半角スペースを常に表示 "editor.snippetSuggestions": "top", // Emmet などのスニペット候補を優先して表示 "editor.tabSize": 2, // タブのサイズ変更 "editor.wordWrap": "on", // エディターの幅で折り返し "emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示 "emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開できるようにする "emmet.includeLanguages": { "erb": "html", "ruby": "html" }, // "emmet.variables": { // Emmet で展開される HTML の言語を変更 // "lang": "ja" // }, "explorer.confirmDelete": false, // ファイル削除時の確認を表示しない "files.associations": { // ファイルと言語の関連付けを変更 ".*lintrc": "json" }, "files.exclude": { // エクスプローラーから非表示にするファイル "**/*.map": true, "**/node_modules": true }, "files.insertFinalNewline": true, // ファイルの保存時に末尾を改行 "files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング "files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング "[markdown]": { "files.trimTrailingWhitespace": false // Markdown のファイルは行末の空白をトリミングしない }, "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // タグ内の記述はフォーマットしない "html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない "html.format.unformatted": null, // フレージング・コンテンツ（旧インライン要素のようなタグ）はフォーマットしない "html.format.wrapLineLength": 0, // 行の文字数制限を無くし自動で改行させない "search.showLineNumbers": true, // 検索結果に行番号を表示 "search.exclude": { // 検索対象外にするファイル設定（ files.exclude のファイルも含む） "**/tmp": true }, "window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウインドウで開く "window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定 "workbench.colorTheme": "One Dark Pro", "workbench.editor.labelFormat": "short", // タブに表示する文字列の設定 "workbench.editor.tabSizing": "shrink", // タブの表示設定 "workbench.startupEditor": "none" // Welcome Page を表示しない }
Rails用 Emmet設定
Emmetはデフォルトで使用できるが、
erb拡張子でEmmetを使用するには以下の設定が必要
１）設定 => 拡張機能 => Emmetを選択
２）Include Languagesより以下を設定
"emmet.includeLanguages": { "erb": "html", "ruby": "html"}
３）Trigger Expansion On Tabを有効化
以上で、キーワードを入力後、Tabを押せばEmmetが動作する。
How to configure Emmet in VS Code for erb files | by Nick Haralampopoulos | Medium
UI設定
・テーマ
Atomのデフォルト配色である「One Dark」と同じものが使用したかったので
拡張機能から「One Dark Pro」という拡張機能をインストールして設定
・Material Icon Theme: ファイル毎に固有のアイコンを設定してくれる。vscode-iconsもあるが個人的にはこっちのほうが好み
=> デフォルトのアイコンで十分なので、結局消した。
JavaScript用 (TypeScript用）拡張機能
・Visual Studio IntelliCode => JavaScriptやTypeScriptの入力補完
・JavaScript (ES6) code snippets => ３文字のスニペット打つだけ！clgとかめちゃ使う。
・Prettier => フォーマッター
・ESLint => 静的解析
Ruby用 拡張機能
・Ruby => Ruby言語をサポート
・RailsとRuby on Rails => Railsをサポート
・Rails DB Schema => DB Schemaに沿って、モデルのカラム名を補完
・endwise => endを自動挿入
その他の便利な拡張機能
・Path Intellisense => パス補完
・Git Lens => 以前の状況との比較がしやすい。行ごとに「いつ、だれがコミットしたのか」を見ることができる。
・Git History => ログが読みやすい
・TODO Highlight => TODOやFIXMEがハイライト表示される。
・Todo Tree => TODOやFIXMEなどのコメントタグを検索し、エクスプローラーペインのツリービューに表示してくれる拡張機能
・Rainbow CSV => CSVが列ごとに色付けされて、列がみやすくなる。
・zenkaku => 全角の空白文字を可視化
・HTML CSS Support => CSS定義からHTML入力の際にclass名やID名を補完してくれる
・Bracket Pair Colorizer 2 => {}や()のカッコに色をつけてくれる。
・Autoprefixer => ベンダープレフィックスをファイル保存時に自動でつけてくれる。
・CSSTree validator => CSSの構文チェッカー。間違っているところに波線がつく
・SCSS Formatter => Scssのフォーマッター
・Project Manager => 複数プロジェクトを簡単に開ける
・SFTP => FTPソフトを使わずにVScodeからサーバーにアップロードができる。設定によってはファイルを保存した瞬間にサーバー側のデータも書き換えることも可能。
・Code Spell Checker => スペルミスを検出してくれる拡張機能
・Partial Diff => 選択範囲の差分を手軽に確認できる
・gitignore => 言語毎に定番のgitignoreファイルテンプレートをダウンロードできる。
・DotENV => DotENVのファイルに色付けしてくれる
オプション設定
・プロジェクト毎に色を付ける。
Visual Studio Codeエディタの色をプロジェクトごとに違うものにする - Qiita
・日本語化
拡張機能から「Japanese Language Pack for Visual Studio Code」をインストールし設定
