2023年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します - Shibajuku
こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 （2023年7月3日更新） 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有しています。 そもそも、VSCode（Visual Studio Code）って？ VSCode（Visual Studio Code）はMicrosoft社が開発したオープンソースのテキストエディタです。 最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます。
DevTools+PerfectPixelで爆速コーディング
ネコメシでは週に１回、持ち回り制で勉強会を開催しています。各々が気になっているトピックについてスライドを作って、30分～1時間くらいの発表を行います。 先日の勉強会にて、コーディング作業高速化について発表したので、その内容を公開します。拙速が大事ということで、スライド貼っ付けただけで、説明もなにもなしですが…。 スライドに説明文を追記しました (2019-07-18 22:04) スライド https://speakerdeck.com/tsmd/devtools-plus-perfectpixeldebao-su-kodeingu 内容 Chrome DevTools と PerfectPixel という Chrome 拡張機能を使って、爆速で HTML/CSS のコーディングをするご提案です。 コーディングを２倍速にしよう！ という思い付きで検討した手法です。計測していませんが、ほんと
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
Bootstrap 3でモニタ用的なテンプレートを作ってみた
B! 6 0 0 0 なんとなくBootstrap をいじってみようと思い立って遊んでみたので、 メモがてらその時にやったことについて。 ここではBootstrap 3を使っています。 インストール テンプレートでテスト 要素の追加 Scssで見た目の変更 compass compileのオプション JavaScriptを追加 相対パス、絶対パス テーマを変えてみたり Font-awesomeを使う Web上の情報を見る際の注意点 まとめ インストール 今回はRailsとか使わずに素のBootstrapを使ってみます。 Rubyとかはインストールしてあるとして、 $ cd /path/to/directory $ sudo gem install compass bootstrap-sass $ compass create bootstrap_test -r bootstrap-sass
Gruntを使ってプロジェクトを自動化する、Myタスクメモ | tipsBear
Gruntで出来ることはたくさんありますが、今回ご紹介するのは私がよく使うGruntの設定のメモになります。 ちなみに、Gruntの導入方法や基本的な解説は下記の記事がとてもわかりやすく紹介してくれていますので、これから導入したいという方がいましたら是非参考にどうぞ。 Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 – Web Design KOJIKA17 コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順 – OZPAの表4 今更だけどやるgrunt入門編・インストールから基本的な使い方 – WEB Drawer Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 – WWW WATCH また、この記事はSass/Compass、ブラウザのliveReloadを使用することを前提に書いてい
Grunt + Sass + Compassでつくるナウいフロントエンド開発環境
Grunt、Vagrantなどの制作作業を効率化するツールがいろいろとでてきていますね。存在はしっていたものの、今の環境で著しく不便を感じているわけでは無いし、面倒だし…と手を出さずにいたのですが、OS Xでの環境構築について手順をまとめてくださっている記事があったので、通してやってみました。 上記の記事を見て一通り設定はできたのですが、GruntやCompassの設定に戸惑ってしまいました。設定作業中もいくつかエラーが出たりしたので、そのあたりも考慮して僕の行った環境構築の手順についてまとめてみました。僕のようにまだこのあたりのツールに興味はあるけど手を出していないという方は参考にしてみてください。 もろもろをインストールする Xcode まず、AppStoreからXcodeをインストールします。コマンドラインツールも必要なので、下記のコマンドでインストールします。 xcode-sele
Sassコンパイラ「Prepross」とCSSフレームワーク「Gumby」で高速プロトタイピング | Agnist.code
昨今注目度も高まっているSassを、最も簡単に使えるコンパイラ「Prepros」と、個人的に最近お気に入りのCSSフレームワーク「Gumby」を広めたくて書きます。 SassやCSSフレームワークとか、ちょっと二の足踏んじゃうな…みたいなノンプログラマーなフロントデザイナーの方ほどオススメです。 PreprosのインストールPreprosをダウンロードしてインストールしたら、準備はそれで完了です。 ここはさすがに説明不要で終わると思います。 GumbyのダウンロードGumbyトップページから落としてください。 カスタマイズダウンロードもできるので、多少変更しておきたい場合はここからダウンロードするのも良いです。ちなみにこれらのカスタマイズ項目は、Sassを使えば後から簡単に一括変更できます。 ダウンロードしたファイルを適当な場所に解凍してください。 解凍してできたフォルダを以後プロジェクト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...