#①CSSのフォーマットとソートをしたい CSScombという拡張機能によって自分の好きなフォーマットを作成、適用できる。 リンクから緑のInstallボタンを押すと下記のようなポップアップが出るのでContinueをクリック。 #②VS CODEにCSScombをインストールする VS CODEが起動して、Installをクリック。 画面は既にインストール済みなので、アンインストールの選択肢が出ている。 #③自分好みのフォーマットを作成する CSScomb Build Configを開き、自分好みのフォーマット形式を選択していく。全部で24問ある。基本的に2択か3択で、一番最後の選択肢はどっちでもいいよ、の意味になっている。 #④作成したフォーマットを読み込む 完成したjsonファイルを下記パスにあるjsonファイルと置き換える。なお、元のものはバックアップをとっておくと良い。
HTMLファイルを保存し、ブラウザを更新して表示を確認する。 これはHTMLを学んだ人が初めに覚える操作だと思います。 でもその操作、毎回手動でやっていませんか？ エンジニアの世界では、「単純作業は自動化しちゃえ！」という考えが基本です。 この記事ではブラウザの更新を自動で行ってくれるVisualStudioCodeの拡張機能を紹介します。 オートリロード(自動更新)とは？ HTML,CSSファイルをエディタから保存した後は、ブラウザも更新して表示を確認しますよね？ でも毎回、手動で更新するの面倒じゃないですか？ ブラウザの自動更新は便利なんですが、作業を自動化してくれるツールを入れるのも敷居が高い、という人もいるでしょう。 このようなオートリロードはタスクランナー(Gulpとか)で動かしたりするのですが、「コマンドライン分からん」って人は手始めに導入するのもありかなと思います。 マルチデ
先日投稿した以下のエントリで、「使い方がわからない」という意見を多く頂いた。 mugi1.hateblo.jp マルチカーソル自体の操作方法は調べれば出てくるし、事例だけ紹介しとけばええやろ、と思っていたのだが、いきなり応用のサンプルを貼りすぎてわけがわからなかったらしい。申し訳ない。 せっかくなので、基礎から含め、どういったキー入力で上記のような操作を実現しているのかを紹介したいと思う。 🔥実践！マルチカーソル / 入門編 なおmac環境です。Windowsやその他環境の方は気合で調べてください。 また、言い訳臭くて申し訳ないが、私は普段はSublime Text Keymap and Settings Importerを使っており、SublimeTextっぽいキーバインドに変えて編集している。 一旦無効にしたうえでVSCodeデフォルトの状態で一通り調べて書いたつもりだが、もし違って
とすると、どの拡張機能を作成するか訊かれますので、"New Color Theme"を選びます。 次に、カラーテーマのファイル名を訊かれるので、さきほど保存しておいたファイルを指定します。 その後もextensionの名前などを訊かれますので適当に入力します。 "publisher name"はMarketPlaceに公開するときにはMicrosoftのアカウント名が必要になりますが、そうでなければ適当でよいでしょう。 ローカルにインストール テーマが出来たら、~/.vscode/extensions/にフォルダごとコピーするだけです。 あとはVisual Studio Codeを再起動すれば、「Codeメニュー」 -> 「基本設定」 -> 「配色テーマ」で作成したテーマを選択可能になります。 Market Placeに公開 Extension Marketplaceに公開したいときは、v
エディタは何を使っていますか？ 自分は「Visual Studio Code」をメインで使っています。 「Visual Studio Code」は軽いのがいいですよね〜。 今回は「Visual Studio Code」のおすすめプラグインを紹介したいと思います。 code.visualstudio.com ftp-simple リモートのサーバ上でプログラムを書いているときに、ローカルPCのお気に入りエディタで書いてサーバにアップロード・・・が手間だと感じることはありませんか？ リモートサーバ上で直接編集する場合はお気に入りエディタ使えないし。 今回紹介する「ftp-simple」は、そんな手間を削減してくれるプラグイン。 ftp-simpleは、リモートのサーバにsftp（ftp）接続を行い、サーバ上のファイルを直接開いたり、サーバとローカル環境とファイルの同期を行うことができるプラグイ
年末年始にAtomの使ってるプラグインを列挙して棚卸しをしたけども、ちょっと前のMSのGitHubの買収を機に食わず嫌いしてたVSCodeを使ってみた。 ただし使うにあたってはAtomで使ってる環境と同程度のことができてくれないとダメなので調べてみた。 結果から言って今はVSCodeに乗り換えてしまった。せっかくなので使ってるAtomとVSCodeの拡張パッケージをそれぞれ対応する表にしてみた。ちなみにもともと「俺のAtomは環境だ」と笑い話的に言っていたのでややAtom寄りの表になってるのはご容赦いただきたい。 使用感比較拡張パッケージ表に行くまえに使用感を比較した所感。100％満足はしてないもののパフォーマンスの恩恵が大きく、なんとかAtomでできたことを損なうことなくVSCodeでも許容できるレベルにもっていけたのが乗り換えの決め手。 UIほとんどどちらも同じような感じで差異は大きく
一時期、いろんなエディターが出て、あっちこっちに手を出しては変えて・・・を繰り返す時期もありましたが、ここ１年以上、ようやくVSCodeを使うことで落ち着いてきました。 おはこんばんちわ、kouraku です。 最近自分の周りでは、これまであまりコーディングをしたことない人がコーディングをすることになり、質問してくる機会がちょこちょこあったりします。 「gulpなんか知らない」 「git？何それ美味しいの？」 「エディター？EmEditor使ってるよ」 ・・・なんて感じで、ちょっと前のタイプのWeb系の会社が、実は今も尚数多く存在してるんですね。そんな環境で働いている人に、「じゃあgulp使えるようにしようか」とか「git使えるようにしようか」など、いきなり言ったところで、そう簡単に導入なんかできなかったりするわけです。ですが、 「じゃあ、VSCode使ってみたら？」 は、簡単に言えます。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Visual Studio Codeを自分が使用する際に便利なショートカットキーを、忘れないようにまとめておく。Windows版。v1.57で再確認済み。 編集系 Ctrl + Enter カーソル行の下に空行を挿入 Ctrl + Shift + Enter カーソル行の上(というかカーソル行？)に空行を挿入 Alt + ↑/↓ カーソル行／選択行をまるっと移動(複数行対応) Alt + Shift + ↑/↓ カーソル行／選択行をまるっとコピー(複数行対応) Ctrl + C 選択範囲をコピー。非選択状態で使用すると行コピーになる C
Visual Studio Codeでコードを書く時に知っていると便利なショートカットを紹介します。コードを書く時に自分がよく実行する操作のショートカットを覚えておくと、作業効率は格段にアップします。 21 VSCode Shortcuts to Make Coding Faster and More Fun by jsmanifest 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに VSCodeで利用できるショートカットのいくつかを見逃しているかもしれません。すべての人がすべてのショートカットを調べて、より速くコードを作成し、より多くの人に役立つショートカットを見つける時間があるわけではありません。 この記事では、より高速なプログラマーになるためのお気に入りのショートカットをリストアップしました。これらのショートカッ
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。 前回の記事では、「HTMLコーダー」「フロントエンジニア」に役立つ拡張機能を紹介しました。本記事では、開発者全般の方に役立つ拡張機能を紹介します。 エディターを強化する拡張機能 1. Clipboard Ring テキストを「コピー」や「切り取り（カット）」したものを「貼り付け（ペースト）」する場合に、この拡張機能を入れることで複数件の内容を記憶できます。ctrl+shift+v（⌘+shift+v）を押すごとに過去の情報に切り替えられます。デフォルトでは10件の情報を記憶できますが、設定を変更することで記憶する件数を増やすことも可
Misoca+弥生+ALTOA Advent Calendar 2018の10日目のエントリです。 グッと来るタイトルにしようと思った結果、意味不明になってしまったのは自覚している。許してほしい。 ※解説編について 何やってるかわからんという声を多数頂いたため、解説編を書いた。 よかったら併せてご覧ください。 マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜 - memo.md 🤔 マルチカーソル？ さて、VSCodeではカーソルを複数作ることができる。 vscode-doc-jp.github.io 簡単な動作例 これはVSCodeに限った機能ではなく、SublimeText, Atom, JetBrains製IDEなどでも似たようなことができる。 昔にSublimeTextを使い始めたころから愛用している機能で、私はこれが無いと生きていけない体になっている。 意
内容についてVisual Studio Code (VS Code) の非公式日本語訳です。 文面内容の正確性。また、これによって生じた損害については、責任を負いません。 それに加え一部リンクが正常に機能しません。 内部リンクなど機能しないものがそのまま残っている可能性が非常に高いです。また情報が古い場合がありますので、編集日時と対象の hash に注意してください。 記事の翻訳/修正まってます。 OSShexo用途 : サイトジェネレータLICENSE :MITnavy用途 : テーマLICENSE : CC BY 4.0vscode用途 : i18翻訳の参照LICENSE : The MIT License (MIT)vscode-doc用途 : ドキュメント(翻訳対象),生成スクリプト(キーバインド生成, api-docs 作成), 画像(変更なし)LICENSE : Creativ
言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。 Tipsは**ここ**から。 拡張機能 24 選 1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出
Microsoftが提供している無料のテキストエディター「Visual Studio Code（以下vscode）」をインストールしたら、最初に設定したいことをまとめました。 見た目の変更から、細かい設定まで解説しているので、最近vscodeをインストールされた方はぜひ参考にしてみて下さい。 画面の説明 画面左側に表示される内容は、サイドバーのどのアイコンを選択しているかによって変わります。 現在開いているフォルダ ファイルや単語の検索や置換 現在開いているフォルダがバージョン管理システム対象の場合、GUIで操作出来る コードのデバッグ（あまり使わない） 拡張機能の管理 また、上記画像の⑥の歯車のアイコンをクリックすると、VSCodeの様々な設定を変更することが出来ます。 エディタの見た目を変更する テーマの変更 VSCodeにはデフォルトでテーマがいくつか入っています。私は「Monoka
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、わたしの周りで Atom や Sublime Text から Visual Studio Code（以下、VSCode） に乗り換える方が増えて来ています。 調べてみると、割とフロントエンドでもいけてそうな感じだったので… 果たして本当にフロントエンドでも使いやすいエディタなのか？ を検証するために人柱となって、思い切ってインストールして使ってみることにしました。 特徴 VSCode の特徴としてはこんな感じです。 クロスプラットフォーム 軽量／高速 デバッグ機能を内蔵 標準で多数の言語をサポート IntelliSense サポー
のようなスタイルシートがあるとします。 marginの記述がバラバラの位置にあったり、単位が不要な0にpxが付いていたりと、サイト表示には問題無いけれど、どうも汚いソースとなっています。 これにCSScombを使うと、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く