読者です 読者をやめる 読者になる 読者になる

ウェブとすっぽん

INNOVATOR JAPAN Director's Blog

表参道と大濠公園ではたらくマーケティングチームの仕様書となります、ご査収ください。

コードのインデントを一瞬でキレイに?!Sublime TextでつかえるCodePrettifyが便利すぎた

こんにちは、利右衛門(りえもん)です。ウェブディレクターのお仕事をしています。

 

イノベーター・ジャパンにはすばらしいエンジニアさん、デザイナさんがいらっしゃり、お客さまと考えたサイト構成だったり機能だったりは、「お願いします〜何卒!」とご相談するとシャっとコードを書いて実現してくださいます。いつもありがとうございます。

ただ、コンテンツの中身はあとから渡すので!ということもよくあり、その場合には私もソースを編集してテキストを流し込んだり、画像パスを入れたりしています。

そんなときにいつもしんどいなーと思っていたのが、HTMLファイル記述のインデントが揃わない、揃えるのにスペースキーを連打しなくちゃいけなくてめんどくさい...ということでした。これをデザイナの9ookyさんに相談したところ、HTML-CSS-JS Prettifyという、Sublime Textで使えるとても便利なプラグインを教えてもらったのでご紹介します。

HTML-CSS-JS Prettify - Packages - Package Control

 

 

Sublime TextでつかえるHTML-CSS-JS Prettifyでできること

たとえば次のようなざざーーーっとテキストを流し込んだコードを....

 

f:id:riehirai:20170418163432p:plain

 ↓

ワンクリックでこういうふうにインデントを揃えて、キレイに整形してくれます。

 

f:id:riehirai:20170418163706p:plain

 

スペースを連打したり、あれ?ここはもう一つ下の階層かな?とか気にしなくてよくて、とっても便利!

 

HTML-CSS-JS Prettifyの使い方

では具体的な使い方を説明してゆきます。

1. Sublime Textをインストール

 

HTML-CSS-JS PrettifyはテキストエディタSublime Textの拡張機能ですので、まずはSublime Textをインストールしましょう。

www.sublimetext.com

 

余談ですが、キャッチコピーの「The text editor you'll fall in love with」というのがなんだかとっても可愛いなあと、個人的にとてもすきです。

 

 2. HTML-CSS-JS Prettifyをインストール

Sublime Textがインストールできたら開いて、上部のツールバーのTools>Command Palette...を選択します。

 

f:id:riehirai:20170418165823p:plain

 

検索窓がでてくるので、「Package Control: Install Package」を選択します。

 

f:id:riehirai:20170418165926p:plain

 

すると、インストールできるパッケージ一覧がでてきますので、そこから「HTML-CSS-JS Prettify」を選択します。

 

f:id:riehirai:20170418170209p:plain

 

これでインストールは完了です!Toolsのメニューの一番下にHTML-CSS-JS Prettifyが追加されているはずです。

  

f:id:riehirai:20170418170847p:plain

 

整形したいテキストを開いて、HTML-CSS-JS Prettify > Prettify Codeをクリックすると.....

f:id:riehirai:20170418171800p:plain

 

キレイにインデントを整形してくれます!!便利!!!

Command + Shift + H のショートカットでも実行できます。

 

f:id:riehirai:20170418163706p:plain

 

注意:Node.jsはインストールされている?

 

HTML-CSS-JS Prettifyを起動しようとすると、次のようなエラ−メッセージが表示されることがあります。

 

 Node.js was not found in the default path. Please specify the location.

 

Node.jsがインストールされていないマシンですとHTML-CSS-JS Prettifyはうごかないので、その場合はNode.jsをインストールしてあげてください。

Node.js

 

 

おまけ:その他便利なSublime Textの機能

 

ファイル内の同一文字列を選択し、一括編集する

変更したい文字列を選択し、Command+D を押すと、ファイル内の同一文字列をさがしてくれます。

そのまま変更をかけると、選択している箇所すべてに変更が反映され、とってもスピーディーに修正がおこなえます。

 

Command+Dを連打し、ファイル内の文字列を検索

f:id:riehirai:20170418175040p:plain

 

そのまま編集をかけると、連動して変更されます。

f:id:riehirai:20170418175129p:plain

 

 

フォルダ内のファイルすべてに検索をかける

Command+Fにてファイル内検索ができますが、Command+Shift+Fでアドバンストな検索機能が利用できます。

ここの「where」でフォルダを追加できるので、フォルダ内のファイルすべてのあの記述を置換したい!!みたいなときに便利です。

 

通常検索機能

f:id:riehirai:20170418173234p:plain

 

アドバンスト検索機能

f:id:riehirai:20170418173255p:plain

ここで検索範囲を選択できる。

f:id:riehirai:20170418174326p:plain

 

コメントイン・アウトをワンアクションで

Command + / にてコメントイン・アウトが一瞬で行えます。ちょっとだけ非表示にしておきたい!というときに

 

コメントアウトしたい部分を選択して、Command+/ でOK

f:id:riehirai:20170418175401p:plain

 

そのほかにも私の知らない便利機能があったら教えてもらえるとうれしいです!時短テクを活用してシャッとコードを修正できるように日々励んでおります。