【Atom】linterの設定方法

2016年8月20日

前回の記事で文法チェックをしてくれる「linter」と、コード整形をしてくれる「atom-beautify」を紹介しました。

今回の記事ではこの2つのパッケージのうち「Linter」の設定方法をご紹介します。

前回の記事をご覧になっていない方は前回の記事も合わせて御覧ください。→Web開発用「Atom」おすすめパッケージ

前回紹介したパッケージのうち、ほとんどはパッケージをインストールするだけで使用できましたが、「linter」と「atom-beautify」はファイルを追加したり、パスを追加する作業が必要です。

それでは「linter」から設定していきたいと思います。

まず、atomのlinterに自分の使用したい言語の追加パッケージをインストールします。

言語 パッケージ名 設定 URL
html linter-htmlhint 不必要 https://atom.io/packages/linter-htmlhint
css linter-csslint 不必要 https://atom.io/packages/linter-csslint
javascript linter-jshint 不必要 https://atom.io/packages/linter-jshint
php linter-php 必要 https://atom.io/packages/linter-php
ruby linter-ruby 不必要 https://atom.io/packages/linter-ruby
xml linter-xmllint 必要 https://atom.io/packages/linter-xmllint

上記の表に設定が不必要と書かれている場合、追加パッケージをインストールするだけで使用可能になります。

「PHP」と「xml」の場合、パスの設定が必要です。

PHPのlinterを使用するにはPHPをインストールする必要があります。(インストールせずに利用しようとすると以下の様な「Unable to determine PHP version」エラーが出ます。)

linterphp

パソコンにPHPがインストールされていない場合は、XAMPPをインストールしましょう。→https://www.apachefriends.org/jp/index.html

xampp

上部のダウンロードあるいは中央のダウンロードから、開発したいPHPのバージョンに対応したインストーラーをダウンロードします。

xampp2

今回はPHP 7.0.8 32bitをダウンロードしてみました。ダウンロードしたインストーラーを起動します。

xampp3

ウイルス対策ソフトが動作している場合このような警告が出ますが、Yesをクリックしてインストールを続行します。(インストールでエラーが出るようであればウイルス対策ソフトを一時的に無効にしましょう)

xampp4

「UAC認証があるから C:\Program Filesにはインストールするのは避けるように」と警告と出てきますので、OKをクリックします。

xampp5

Nextをクリック

xampp6

特に変更することがなければそのままNext

xampp7

インストール先を変更できますが、先ほどの警告通りC:\Program FilesなどのWindows管理ディレクトリは避けて選択しましょう

xampp8

チェックを入れると、インストール完了後にBitnamiページが開きますが、要らないのでチェックを外します。

xampp9

Nextをクリックしてインストール開始

xampp11

完了したらチェックを外してFinishをクリックしましょう。PHP linterを使用するのにXAMPPのコントロールパネルは使用しません。

Atomに戻り、上部のファイル→環境設定から設定画面を呼びたし、左のタブからパッケージを選択します。

linterphp1

linter-phpの設定をクリックします

linterphp2

SettingsのPHP Executable Pathに「インストールフォルダ\php\php.exe」と入力します。

これでセットアップは完了です。適当なPHPファイルを作成して正しく動作するか確認して見ましょう。

以下の画像のように動作すれば完了です。

linterphp3

xmlはPHPにおけるXAMPPのようなインストーラーがないため、手動でファイルをコピーします。

まず任意の場所にフォルダを作成しましょう。この記事では「C:\tools\xmllint」のようにフォルダを作成しました。

次にこちらのサイトから必要なファイルをダウンロードします。→ftp://ftp.zlatkovic.com/libxml/

この中から以下に示すファイルをダウンロードしましょう。

iconv-1.9.2.win32.zip
libxml2-2.7.8.win32.zip
libxslt-1.1.26.win32.zip
zlib-1.2.5.win32.zip

すべてのファイルを展開し、中に入っている「bin」「include」「lib」フォルダをすべて先ほど作成したフォルダ「C:\tools\xmllint」にコピーします。

xamllint2

コントロールパネルを開き、システムとセキュリティ→システムを開きましょう。左のサイドバーからシステムの詳細設定をクリックします。

 

右下の環境変数をクリックします。

xamllint4

システム環境変数のPathを選択し、編集をクリックします。

xmllint5

新規をクリックして先ほど作成したフォルダの「bin」へのパス(C:\tools\xmllint\bin)を追加しましょう。Windows10でない場合は、一行で表示されますのでセミコロン(;)で区切って入力します。

xmllint6

OKを押してウィンドウを閉じたあと、コマンドプロンプトを起動し、「xmllint –version」と入力してみてください。

xamllint7

画像のようにxmllintのバージョンが表示されれば正しくセットアップ出来ています。

Atomを再起動して適当なファイルで試してみましょう。

 

いかがでしたか?

設定がやや面倒ですが、一度設定してしまえば非常に便利な機能です!

ぜひお試しください。次回は「Atom-beautify」の設定方法を紹介する予定です。

atom

Posted by takumi9942