Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話 - SMARTCAMP Engineer Blog
こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際にtemplateタグに ESLint を効かせてみて発覚したエラーや警告のなかで数が多かったものや、これから Vue 3 に移行していく上で対応する必要があったルールを紹介します。 背景 eslint-plugin-vue が効かない チームに Pug 推進派がいない Pug を HTML に移行するには Vue 3 に準拠した Lint ルールを導入する Lint を実行してみる 対応した目ぼしいルール vue-require-v-for-key vue/val
Masashi MURANO🚀 on Twitter: "新型コロナは、武漢ウイルス研究所から誤って漏洩したものだという説。当初漏洩説は、トランプ政権が中国を悪者にするための陰謀論的な扱いを受けていたが、それがなぜバイデン政権になっても注目されているのか、詳細な調査報道（同僚が大勢出てく… https://t.co/OZyX3PUg5w"
新型コロナは、武漢ウイルス研究所から誤って漏洩したものだという説。当初漏洩説は、トランプ政権が中国を悪者にするための陰謀論的な扱いを受けていたが、それがなぜバイデン政権になっても注目されているのか、詳細な調査報道（同僚が大勢出てく… https://t.co/OZyX3PUg5w
「Pug(パグ)」って何？ HTMLと見比べながら7つのメリットを紹介！ 公開日 : 2021.11.01 最終更新日 : 2023.08.28 コーディング そもそも「Pug」とは？Pugとは「パグ」と読み、HTMLを効率的に書くための記述方法です。 「テンプレートエンジン」と言われるもののひとつです。 ※犬の種類ではないです。 HTMLの場合は拡張子が.htmlですが、Pugの場合は .pugとなります。 Pugを扱う注意点としては、PugファイルはWebブラウザが認識してくれないので、通常のHTMLに「変換」する必要があります。通常は、「コンパイル」といって、タスクランナー（gulpなど）やコンパイラーアプリ（Preprosなど）を用いて自動変換しますが、今回はPugのメリット紹介のため変換方法については割愛します。 Pugのメリット7つ今回は、PugとHTMLを見比べながら、Pug
ヒップホップカルチャーそのものが“師”である。ラッパーISSUGI、Mr.PUGの語りから紐解く「守破離」 | J-WAVE NEWS
ヒップホップカルチャーそのものが“師”である。ラッパーISSUGI、Mr.PUGの語りから紐解く「守破離」 J-WAVEが共同プロデュースするオンラインマガジン「守破離 -SHUHARI-」。“守破離”とは剣道や茶道などの修業における段階を示したもの。「守」は、師や流派の教え、型、技を忠実に守り、確実に身につける段階。「破」は、他の師や流派の教えについても考え、良いものを取り入れ、心技を発展させる段階。「離」は、一つの流派から離れ、独自の新しいものを生み出し確立させる段階（※1）。 そんな“守破離”と“音”を切り口に人物のスタイルをリアルに掘り下げ、オリジナルインタビューをInstagramとJ-WAVE NEWSで配信していく。 （J-WAVE NEWS編集部） ヒップホップと「守破離」は通ずるものがある もうすぐ2024年に差し掛かる年の瀬。今から約18年ほど前、SEEDAとDJ IS
Viteで純粋なPugを使う
ViteでPugを使おうとすると少し厄介だったので、環境構築の手順をまとめました。 「vite pug」等で検索するとVueやReact、HTMLを噛ませる方法はヒットするのですが、Pugを単体で使う方法はなかなかヒットしません。 Viteで純粋なPugを使えるようにするというのが本記事の趣旨になります。
Pug の文法について網羅的に説明された日本語のサイトが見つからなかったので、自分でまとめてみました。 英語でよければ公式にしっかりしたドキュメントがあります。 この記事はその内容の中でも特に文法に絞って、重要な順番で解説しています。 できるだけリファレンスを網羅している長い記事ですが、大事な順に書いているので、単に HTML を簡潔に書くためだけなら、最初の方の「HTML を簡潔に書くための基本文法」だけ読んでおけば大丈夫です。 Pug って何？ HTML を簡潔に書くことができるものです。HTML に変換されます。昔は Jade と呼ばれていましたが名前が変更されました。 単に HTML を簡潔に書けるだけでなく、テンプレートエンジン的な機能も持っています。 他のファイルを include する レイアウトを他のファイルに書いて extends して内容を埋め込む 変数を定義する ルー
Viteで開発環境構築〜Pug・Sass・JS〜
npm createはnpm initのエイリアスでpackage.json を作成します。 vite@latestは「最新バージョン(2023年2月7日時点で4.1)のViteをインストールする」という意味です。 コマンドを実行して、質問に答えながらプロジェクトを作成していきます。 続行の意思確認 npm create vite@latestを実行すると、「create-vite@latestをインストールしてください、このまま続けますか？」と訊かれるので、キーボードのyを入力してEnterを押してください↓
ページを量産したりチームでサイトを作る時pugという言語を使ってWebサイトを作っています。pug（旧：Jade）の特徴やメリット、基本的な使い方、導入方法（pug-cliとgulp）についてまとめました。とくに記述方法はif（分岐）やfor・each（ループ処理）など解説。テンプレート化したい場合に使う記述方法の解説と具体的なテンプレートの作り方なども紹介しています。 普段webpackやgulpを使っている方なら導入のハードルも低いと思います。 今回はmpmコマンド出始めたい方はpackage.jsonで手軽にすぐ始められます！とても記事は長いので目次を利用して好きなところを読んでください。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTec
テンプレートエンジンPug入門 | 第1回 Pugの特徴
Pugとは Pug（パグ）*はHTMLを簡単に記述するためのテンプレートエンジンです。PugではHTMLの階層構造をインデントで表現するという特徴があり、Hamlというテンプレートエンジンの影響を受けています。CSSプリプロセッサであるSassのSass記法もまた、Hamlが元になっています。インデントで表す記法になじみがある方もいるのではないでしょうか。 *注：名前の変遷 ちなみに、PugはもともとJade（ジェイド）と呼ばれていました。Jadeという名前が商標登録されていることがわかったため、議論の結果、プロジェクト名はPugになり、npmのパッケージ名はpugとなりました。 テンプレートエンジンを使うメリット 筆者は、何かしらのテンプレートエンジンを使ってHTMLを作成することがほとんどです。テンプレートエンジンには、PugやMustache、HandlebarsやEJSなどたくさん
Pug+Stylusでお手軽にCSSお絵かきを始めよう！〜CSSお絵かき環境構築と便利なプロパティ紹介〜 - 虎の穴開発室ブログ
こんにちは、とらラボのY.I.です。12月も中旬に差し掛かり寒い毎日が続きますが、みなさんいかがお過ごしでしょうか。 さて今回は、虎の穴ラボ Advent Calendar 2020 - Qiita 15日目の記事として、私Y.I.が、CSSを使ってイラストを描いていく上でのオススメの環境と、オススメのCSSプロパティを紹介したいと思います。 また虎の穴ラボ Advent Calendar 2020 - Qiitaでは14日目にY.Nさんが「Docker + GradleでKotlin WEBアプリの開発環境＋本番環境の構築をやってみよう」を、 16日目はH.Hさんが「Chromeの拡張機能でショートカットを作る二つの方法」を書かれています。どちらも非常に興味深い記事ですので、本記事と合わせて是非ご覧ください。 それでは本編スタートです！ See the Pen neko by YUSUK
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
The Pug in the Rug
You have been honoring the pug for 0 seconds You are a Assistant of pug
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Pug(パグ)」って何？ HTMLと見比べながら7つのメリットを紹介！ | AndHA Blog
Pugの文法まとめ
pug（旧：Jade）を使い倒して時短マークアップしよう！
webpack + Pug ：テンプレート内で環境変数を取得 - Qiita