夢みるゴリラ

VScode（VisualStudioCode）とは軽量かつ高速で動作する高機能エディタ。WindowsでもMacでも動作し、無料とは思えない機能の豊富さ、動作の軽さから多くのプログラマーから選ばれているエディタの１つです。今回紹介する内容は以下の方が対象になります。これからVScodeを始めたいとりあえず基本的な設定を整えたい余計な拡張機能はいれたくないgitのインストールができている説明する環境は以下の通りです。macOSMojarv10.14.6VisualStudioCodev1.39.2VScodeのおすすめ初期設定と最低限の拡張機能初期設定をしていきましょう。これからVScodeを始める方はまずは以下の設定を試してみてください。初期設定をするVScodeを立ち上げます。そしたら画面上にあるツールバーから、【Code>基本設定>設定】の順に選択します。そしたら以下の画像にある部分をクリック。その開かれたページに以下のコードをコピペします。コピペできたらファイルを保存します。{"workbench.iconTheme":"vscode-icons",//拡張機能vscode-iconsを有効化"diffEditor.renderSideBySide":false,//Gitの差分を行内に表示"editor.colorDecorators":false,//カラーデコレーターを非表示"editor.defaultFormatter":"esbenp.prettier-vscode",//拡張機能Prettierを有効にする"prettier.printWidth":360,//拡張機能Prettierの改行する文字数を３６０文字に変更"editor.formatOnSave":true,//ファイル保存時に自動でフォーマット//"editor.formatOnPaste":true,//ペースト時に自動でフォーマット（今のところ必要ない）//"editor.formatOnType":true,//入力した行を自動でフォーマット（今のところ必要ない）"editor.hover.enabled":false,//ホバーしたときに出る解説を消す"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.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.exclude":{//検索対象外にするファイル設定（files.excludeのファイルも含む）"**/tmp":true},"window.openFoldersInNewWindow":"on",//新規ワークスペースを別ウインドウで開く"window.title":"${activeEditorMedium}${separator}${rootName}",//ウインドウ上部に表示する文字列の設定"workbench.editor.labelFormat":"short",//タブに表示する文字列の設定"workbench.editor.tabSizing":"shrink",//タブの表示設定"workbench.startupEditor":"none",//WelcomePageを表示しない"html.autoClosingTags":false//終了タグが自動で生成されるのを防ぐ}これで初期設定は終わりです。どのプロジェクトでもここで設定した内容が反映されるようになります。最低限の拡張機能をセットする次にVScodeに入れておくと便利な拡張機能（プラグイン）をセットしていきます。以下のとおり、拡張機能を検索できる画面まで移動します。拡張機能の検索欄に以下を１つずつ選んでインストールしていきましょう。JapaneseLanguagePackforVisualStudioCodeVScodeを日本語に翻訳してくれる。vscode-iconsファイルやフォルダに名前や拡張子にあったアイコンをつけてくれる。今回はsettings.jsonの１行目で有効化しています。"workbench.iconTheme":"vscode-icons",//拡張機能vscode-iconsを有効化PathAutocompleteパスの候補を表示してくれる。ファイルや画像までの相対パスをすべて書く必要がないのでラク。Prettier–Codeformatterコーディングのルールを統一して、コードを整理してくれる。今回はsettings.jsonの５行目でPrettierを有効化しています。Prettierが効かない場合は以下の１行が書かれているか見直してみてください。"editor.defaultFormatter":"esbenp.prettier-vscode",//拡張機能Prettierを有効にするまたPrettierではデフォルトで80文字で改行されます。変な位置で改行されないように６行目で改行文字数を360に変更しています。"prettier.printWidth":360,//拡張機能Prettierの改行する文字数を３６０文字に変更Prettierを適用させたくないファイルやフォルダがあったら、【.prettierignore】の名前でファイルを作って書き込きます。自動でフォーマットされると困るファイル等あれば指定しましょう。以下は例です。src/ejs///srcフォルダの中のejsフォルダは適用させないjs/init.js//jsフォルダの中のinit.jsには適用させないProjectManager事前にプロジェクトを登録すれば、すばやくアクセスできる環境を作れるGitLens—Gitsuperchargedgitblameを打たなくても、行ごとに「いつ、だれがコミットしたのか」を見ることができます。GitHistorygitlogを打たなくでもコミットの履歴を見やすく表示してくれるSFTPFTPソフトを使わずにVScodeからサーバーにアップロードができる。設定によってはファイルを保存した瞬間にサーバー側のデータも書き換えることも可能。LiveServerVScodeにはHTMLをブラウザ表示する機能がない。LiveServerはHTMLファイルを選択して、画面右下にある「GoLive」をクリックすると設定しているブラウザで表示を確認できる。サクッと確認したいときに便利。LiveSassCompiler手軽にSassが使える環境が作れる。Sassファイルを分割した場合もコンパイルに対応。Autoprefix機能もついている。Autoprefixerベンダープレフィックスをつけてくれる。ファイルを保存したときに自動で変換する機能もある。対応するブラウザもsettings.jsonに書き込むことで柔軟に変更可能。先に紹介した「LiveSassCompiler」でAutoprefixの設定をしているのであれば必要ない。HighlightMatchingTagHTMLの開始タグと終了タグをわかりやすく表示してくれる。対応しているタグがすぐに判別できるのでミスが減る。CSSFlexboxCheatsheetFlexboxのチートシートをVScodeに表示できる。図を使った説明がわかりやすく、インストールしておけば検索する手間が省ける。【shift+commad+P】からOpenFlexCheatsheatを選択すれば図が表示されるまずはこのくらいの拡張機能から初めてみましょう。以下の拡張機能も便利ですが、必須ではないので候補から外しています。必要に応じてインストールしてください。AutoRenameTag片方のタグを修正すると、もう片方のタグも自動で修正してくれる。確認していないが、致命的なバグがあるみたいなので使っていない。zenkaku全角スペースを表示してくれる。特に必要ないので使っていない。scss-scanワークスペース内で定義されたmixinやplaceholderを選択候補として表示してくれる。helper.scssという名前でファイルを作り、そこにMixinや変数を書いておくと選択候補に表示される。もっと細かい設定をしたい人は？プラグインは最低限に抑えて、あとはgulpなどのタスクランナーを使って作業の効率化・自動化しています。gulpで設定している内容は以下。sass（expandedとcompressedを選択可）compressedときはcssを１行にするautoprefixer(grid対応も)htmlの共通部分のパーツ化（ejs）画像の圧縮scriptの結合と圧縮（順番通りに結合してminify）開発と本番で処理を分岐sourcemapの作成と削除１度設定できてしまえば同じ環境を作ることは簡単ですし、状況に応じて処理内容も変更できます。最初にターミナルでコマンドを打てば、ファイルを保存しただけで書いた内容が実行されるのでオススメです。gulpの設定については今後紹介します。2019.10.20追記gulp4の設定を書いたので参考にしてみてください。

「Live Sass Compiler」の設定方法 - VScodeでSassを書く

Vscodeの拡張機能「Project Manager」の使い方 - 複数のフォルダを同時に開く

VScodeで拡張機能「SFTP」を使ってサーバーにアップする手順

VScodeを使う前に - おすすめ初期設定と最低限の拡張機能をセットする