Code(以下vscode)」に是非インストールしておきたいおすすめの拡張機能(プラグイン)をまとめました。今回紹介する拡張機能は、フロントサイドの作業する方向けになります。Colorizerhttps://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizermarketplace.visualstudio.com括弧をペアごとに違う色で表示してくれます。対応している括弧ごとに色が変わるので、入れ子になってもどれがどの括弧かが分かりやすくなります。.5)などのカラーコードの箇所にその色をつけて可視化してくれます。EvilInspectorhttps://marketplace.visualstudio.com/items?itemName=saikou9901.evilinspectormarketplace.visualstudio.comコード上の全角スペースを可視化してくれます。Spaceshttps://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spacesmarketplace.visualstudio.com行末のスペースを可視化してくれます。設定を変更すれば保存時に削除もしてくれます。indent-rainbowhttps://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbowmarketplace.visualstudio.comインデントごとに背景色を変えて見やすくしてくれます。設定ファイルを触れば好きな色にすることも出来ます。-https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlightmarketplace.visualstudio.com任意の文字列をハイライトすることが出来ます。文字参照しなければいけない丸数字や旧字体などを設定しておけば、コーディング時に文字化けを防ぐことが出来ます。ハイライトしたい文字列は、vscodeの設定ファイルで設定することが出来ます。Taghttps://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tagmarketplace.visualstudio.com開始タグを編集すると、同時に終了タグも編集してくれます。Previewhttps://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-previewmarketplace.visualstudio.comマークダウンファイル(.md)を開くと、自動的に画面を分割してマークダウンのプレビューを表示してくれます。注意点としては、既に画面を分割している状態でマークダウンファイルを開くと、分割している片方のタブが全て閉じられてしまうことです。Bookmarkshttps://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarksmarketplace.visualstudio.com行ごとにブックマークを付けることが出来るようになり、ショートカットキーでそこに移動することも出来ます。デフォルトのショートカットキーは以下の通りです。Ringhttps://marketplace.visualstudio.com/items?itemName=SirTobi.code-clip-ringmarketplace.visualstudio.comエディタ上でコピー、またはカットしたテキストを履歴(初期設定では10件まで保存)としてクリップボードに保存され、それを自由に呼び出せるようになります。[Command]+[Shift]+[v]で最後にコピーしたテキストをペーストすることが出来ます。このキーを繰り返し実行することで履歴を遡ることも出来ます。superchargedhttps://marketplace.visualstudio.com/items?itemName=eamodio.gitlensmarketplace.visualstudio.comvscode上でのGit操作を拡張してくれます。commitを見やすい状態で遡れたり、誰がバグを紛れ込ませたかなどを探す時に便利な機能です。htmltagwraphttps://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrapmarketplace.visualstudio.com選択している箇所を新たなタグで囲んでくれます。すると、そのテキストを<p>で囲んでくれます。囲んだ後は<p>が選択されている状態なので、そこから違うタグに編集することも出来ます。まとめ便利な拡張機能はたくさんあるので、最初はいろいろインストールしてみるといいでしょう。拡張機能をインストールし過ぎると動作が重くなる原因になるので、必要最低限以外はインストール(機能を有効に)せず、使わなくなったらアンインストールか機能を無効にしておきましょう。web業界で働く方を少しだけ手助けするメディア関連記事Bracketsをインストールしたら最初に設定したいことテキストエディタ「Brackets」をインストールしたら、最初に設定しておきたいことをまとめました。おすすめの拡張機能に関しては様々なサイトで紹介されているので、今回は拡張機能以外(Emmetを除く)のことを紹介します。Emme...COUNTIFS関数で外部ブック(ファイル)を参照するとエラーになる原因と解決策COUNTIFS関数で外部ブックを参照したらエラーが出てしまった時の原因と解決策をまとめました。COUNTIFS関数は、外部ブックを参照する場合、ブックを閉じているとエラーになってしまいます。Code(以下vscode)」をインストールしたら、最初に設定したいことをまとめました。Code(以下vscode)には、デフォルトでスニペットを登録する機能が付いています。今回は、このスニペットの基本的な使い方と、便利な小技や知識を中心に紹介していきます。スニペットとは、よく...【無料】MacのおすすめアプリのまとめMacで業務を効率化、手助けするのに役に立つ無料のアプリをまとめました。今回紹介するのは、web系の仕事に限らず、様々な職種で役に立つアプリです。ファ...【無料】Photoshopのプラグインとスクリプトのおすすめweb制作をする際に欠かせないアプリのPhotoshopですが、これをより使いやすくすることが出来るのがプラグインとスクリプトです。これらはとても便利な機能なのですが、そもそもプラグインとスクリプトの存在を知らない人もいます。Codeをインストール後に最初に設定したいこと2018.05.022019.01.06Bracketsをインストールしたら最初に設定したいこと2018.02.082019.01.05【実用的なサンプル多数】Sassのmixinのおすすめ10選2018.02.112019.01.21JavaScriptのファイル内でjQueryのCDNを読み込む2018.02.072019.01.05ホーム当サイトをご利用の方へカテゴリーWEB制作WEBサービスApp'sMac当サイトの情報によって貴台に不利益等が生じても当サイトは一切責任を負いかねます。a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});。