駆け出しWebデザイナーの日常

駆け出しWebデザイナーの日常

駆け出しWebデザイナー兼コーダーの日常ブログ。

コーディングに使っているテキストエディタ『Sublime Text3』

今回は普段コーディングに使っているテキストエディタの紹介です。
WebサイトのHTML,CSSコーディングで有名なものだと有料の「Dreameaver」が有名ですが、無料のものでもかなり優秀なソフトが揃っています。

 

今回は普段使っている『Sublime Text3』を紹介します。

 

Sublime Text3導入

www.sublimetext.com

ダウンロードし、インストールするだけでもうテキストエディタとして十分に使用することができます。

ですが、HTML,CSSを書いていくにはちょっと不満があるかなと言う状態。
そこでSublime Text3にpackage(プラグイン)を追加していきます。

様々なプラグインがあるのでHTMLやCSS以外にPHPを書く方やJSを書く方にもおすすめできるエディタです。

この記事では、HTML,CSSをメインで書くようにプラグインを紹介していこうと思います。

 

プラグインの追加方法

①まずプラグインをインストールできる環境にしてあげる必要があります。

メニューバーの「View」→「Show Console」

下に入力ホームが出てくるので

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

を入力し、Enterを押します。

 

上記のコードは

Installation - Package Control

からSublime Text2,3どちらかのインストールしたほうをコピペしています。
この記事ではSublime Text3なので、上記のコードを入力します。

 

プラグインのインストール

1:Ctrl + Shif + P で「Command Palette」を開く。
2:「install」と入力すると候補に「Package Control: Install Package」が出てくるので、選択し、ENTERキーを押す。
3:入力フォームが出てくるのでそこに入れたいプラグイン名を入力します。

 この動作はプラグイン1つ1つをインストールする際に必要になります。

 

オススメプラグイン

HTML5
タグなどを数文字入力するだけで全て入力する前に予測してくれます。


CSS Snippets
CSSを数文字入力するだけで全て入力する前に予測してくれます。


jQuery
jQueryを数文字入力するだけで全て入力する前に予測してくれます。


・Emmet
HTML、CSSを省略して書くことができます。

 

japanize
Sublime Text3を日本語化してくれるプラグイン
日本語に完全対応はしていませんが、メニューバーだけ日本語化してくれます。

 

・IMESupport
Sublime Text内に入力できない!という現象が起きるのでそれを回避するためのプラグイン
これは必ず入れておくことをオススメします。

 

最低限上記のプラグインを入れておくと快適にコードを書くことができます。

ほかにもリアルタイムで構文エラーがないか確認してくれるプラグインなどもあるので自分が使いやすいようにカスタマイズしてみてください。