Help us understand the problem. What is going on with this article?
この記事はSublime Text Advent Calendar 2014の16日目の記事です。 Sublime Textのスニペット、皆さん活用していますか? 今回はそのスニペットの管理に役立つツールを作ってみましたのでご紹介致します。 目次 スニペットとは? チームで共有しよう 一覧ツール おすすめスニペット ブログリレー企画”Adventar”に参加しています スニペットとは? 以前こちらの記事でも取り上げましたが、改めて定義についておさらいしておきましょう。 ▼一度書いたコードは二度と探さない!スニペットを究めて快適コーディング!【HTML, CSS, JavaScript】 自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 コーディング作業には欠かせない機能で
自分は普段コーディングする際にコメントを付けない方で、もし付けるとしてもやたらと入れ子が発生してしまうときなどに終了タグ部分へ入れる程度なのですが、先日「一部要素に関しては、id・classを使用した場合は全ての開始タグ・終了タグにid名・class名のコメントを記述すること」というレギュレーションの案件がありました。 さすがに毎回コメントを入れるのは面倒だと思い、Emmetのスニペットを使ってコメント出力を少しカスタマイズしてみたので、その方法を備忘録兼ねて紹介します。 紹介している内容はSublime Text 3とEmmetを使用した結果を元に書いています。 エントリー内で「展開」としているのは、TabもしくはCtrl + Eを使用時を指しています。 展開時にidやclass名を記述したコメントを入れる Emmetは、idやclassがついた要素の閉じタグ部分に、使用しているidやc
Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化/無効化、削除の方法も説明する。 ← 前回 連載 INDEX 今回はSublime Textのさまざまなパッケージの中から、特におすすめのものを紹介する。 Sublime Textのパッケージ Sublime Text自体はオープンソース・ソフトウェアではないが、内部機能を操作するためのAPI(API Reference - Sublime Text 3 Documentation)が公開されている。また、メジャーなスクリプト言語であるPythonのランタイムが搭載されているので、誰でもパッケージを作成できる。 そのため、パッケージの作成は盛んで、2014年12月時点登録されている公式パッケージは2600以上となっている
公式ドキュメント 非公式ドキュメント 追記 メニューの日本語化やショートカットキーの一覧(日本語付き)がありました。これを使えば分かりやすくなりそうです。 Sublime Text 2 メニュー日本語化: ゆーがいぶろぐ Sublime Text 2: ゆーがいぶろぐ Fileタブ New File 新しくファイルを作る。 Open File ファイルを開く。 Open Folder フォルダを開く。開くとエディタの左側にファイラが表示されるようになります。便利。 Open Recent 最近開いたファイルまたはフォルダを開く。 Reopen with Encoding 別のエンコードで開き直す。開いたファイルが文字化けしていたときに使います。 New View into File 今開いているファイルを新しいタブでもう一度開く。 Save 保存。 Save with Encoding エ
via Impress Japan: Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ サンプルPDF4章の目次より ※説明は私の調べたものなのでかなり適当です。 SideBarEnhancements サイドバー右クリックのメニューを拡張 titoBouzout/SideBarEnhancements LineEndings 改行コードの変更。 SublimeText/LineEndings ※現状、SublimeText3で動かないです。143Pのコラムで動かし方について言及がある模様。 TrailingSpaces 行末の半角スペースを削除。 SublimeText/TrailingSpaces Focus Last Tab Sublime Text 2 では、Chrome などのタブブラウザーと同じように command + 1
Sublime Text 2 Packages for Web Developers. 2012年11月9日(金)に開催された『CPI × CSS Nite 「After Dark」(5)』で最後に配布したSublime Text 2のパッケージ一覧のアップデート版です。 ※最新版はこちらのGistをご覧ください。 Webサイトの制作者に有用そうなものを こもりが使っているモノやそうでないものも含め、なんとなくWebデザイナーやWebデベロッパーな人たちに便利そうなのを集めています。 ここに挙げたものは、類似のパッケージがあるものも存在するので、Package Controlや「Sublime Text Packages by the Community」などでキーワードで検索してみると良いでしょう。 LESS/Sass/SCSSなどCSSプリプロセッサの自動ビルド系パッケージは、あらかじ
今日は Sublime Text 3 に関するメモ書きです。 ちょっとしたメモ書きからHTMLの生成まで大人気の Markdown 記法。 今まで Byword や、Writer といった Mac アプリを利用して書いたりしていました。 せめて Sublime Text 3 でとことんできればいいじゃないか…ってことで、 Package Control 先生 に情報を取ってきてもらいました。 1. Sublime Text 3 – Markmon Sublime Text 3 – Markmon そしてこちらが見つけた良さそうなパッケージ。 mathjax, socket.io を利用して、超リアルタイムで変更が反映できます。 多分、Atom よりレスポンス早いんじゃないかなこれ。 利用には幾つか条件があります。 node.js がインストールされていること。 pandoc (Markdo
Markdown 形式のドキュメントを快適に書こう ちょっとしたメモから Wiki のような文書まで、幅広く利用されている Markdown。私も簡単なメモなどや外部メディア記事の原稿の執筆などに利用しています。 適当なテキストエディタで適当に書くだけでも良いのですが、Mac で Markdown 形式のドキュメントを書く上で便利そうなツール (プラグイン) がいくつかあったので、個人的なまとめを公開したいと思います。 Sublime Text 3 + 各種プラグイン Markdown 形式のドキュメントの作成には、主に Sublime Text 3 を使っています。Sublime Text は言わずと知れた有名テキストエディタで、今やテキストエディタの代表格にまで上り詰めました。バージョン2で一躍有名となり、現在はバージョン3が主流になっています。 Package Control のイン
Sublime Text 3 has a lot of features and shortcuts for the modern coder to play with. Let’s take a look at the most important which I think will boost your workflow to a new level. Learn how to use basic shortcuts, work with projects or handle tabs often without even clicking your mouse. Working With Projects I know plenty of developers who don’t use this awesome feature. What’s your typical proce
ダウンロード 以下のページから自分の環境に合うものをダウンロード(以下は Windows 64bit 版) http://www.sublimetext.com/3 インストールはダウンロードしたファイルをダブルクリックして指示にしたがっていくだけでとても簡単なので省略。 メニューの「Preferences」→「Settings-User」に設定を記述する。 どのような設定項目があるかは「Preferences」→「Settings-Default」のファイルを参照し、変更する項目をコピーして「Settings-User」でその値を設定する。 「Settings-Default」は変更しない。 「Settings-User」の設定で「Settings-Default」をオーバーライドする感じ。 「Settings-Default」はソフトウエアのバージョンアップ等で上書きされるてしまう可能
Sublime Text 2 + Emmet で閉じタグの後ろにコメントを加える設定 – フロントエンドとかPCとかスマホとか の自分の環境版 (MacのSublime Text 3 + Emmet) です。具体的には header#megane.9988Code language: CSS (css) と入力して展開した際にこれまでは <header id="megane" class="9988"></header>Code language: HTML, XML (xml) だったものが <header id="megane" class="9988"></header><!-- /#megane .9988 -->Code language: HTML, XML (xml) というように、同 id や class でのコメントが閉じタグ後に自動付与されます。以下は手順です。すでにE
Sublime Textといえば拡張選択機能が大きな特徴の1つですが、実は設定やパッケージ等でカスタマイズが可能です。このエントリーでは日本語に関わるものとスコープに関わるTipsを紹介します。 『Web制作者のためのSublime Textの教科書』の内容補足的なエントリーですが、読んでなくても使えるTipsです。 日本語選択の分割文字の指定 日本語の文章部分をダブルクリックしたり、[Shift] + [Ctrl(Win)/Option(Mac)] + [←/→]でSublime Textは「単語選択」を行いますが、日本語の文章の場合単語どころか句読点などもお構いなしに選択範囲を設定してしまいます。 このあたり「Sublime Textが日本語に弱い」といわれる所以の1つですね(つか、日本語に限らずマルチバイト言語の国ではあまねく言われているのかなと思いますが)。というわけでせめて句読点
本日が決算日の@cappeeです。 Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説! ついにたどり着いてしまったかもしれません。 今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。(そこまでまだ使いこなしてないので、正しくは「できそうです」。) せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。 導入のキッカケ 話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。 私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。 S
Sublime Text 2で個人的によく 使うショートカットキーをご 紹介します。別件でメールして た時に聞かれたので書いてみる 事にしました。Windows版のショ ートカットになります。 個人的に便利だと感じたSublime Text 2のショートカットキーを紹介してみます。僕はまだ使い始めて半年くらいしか経って無いですし、機能を十分に使いこなせる訳では無いので参考程度という事で・・ 一括置換文字列の一括置換です。便利なので、これがないエディタはもう使えません。 Ctrl+D(同じ文字を複数選択→一括編集) ↑ 任意のテキストの上にカーソルを合わせてからCtrl+Dで、その文字と同じ文字に標準をあわせられます。 Ctrlを押したまま、複数選択したいところにカーソルを再度持っていってDを押せばその場所も選択可能です。 ↑ 選択したテキストは一括編集できます。 ただし、同じ文字列「全て」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く