【調整中】Atomのプラグインと設定（html/css/javascript, node.js, railsあたりを使う用）


# 参考にしたサイト

* [SublimeText から Atom に乗り換えた時にやった設定とインストールしたパッケージ](http://rythgs.co/archives/2015/04/03/my-atom-settings-packages/)
* [Rubocopを使ってコーディングルールへの準拠チェックを自動化](http://qiita.com/yaotti/items/4f69a145a22f9c8f8333)
* [jshintで嘘のエラーが出た時の対処法](http://qiita.com/vintersnow/items/480a16a597f1199e86b7)

# Setting

| 項目           | 内容                              | 備考                                                               |
|----------------|-----------------------------------|--------------------------------------------------------------------|
| Font Family    | 游ゴシック, YuGothic, "Yu Gothic" | Macならデフォルトでもいいので、ときどきWinでも使うので統一してみた |
| Show Invisible | オン                              | 空白とかタブとかみたいから                                         |

# Package


| 項目              | 概要                                                                                               |
|-------------------|----------------------------------------------------------------------------------------------------|
| atom-beautify     | コードフォーマッター。様々な言語に対応している。                                                   |
| file-icons        | ファイルが言語ごとにアイコンで表示される。                                                         |
| tabs-to-spaces    | タブとスペースを変換する。                                                                         |
| linter            | コード規約チェッカー。これ自体は何もチェックしない。各言語ごとのlintをインストールする必要がある。 |
| linter-htmlhint   | html規約チェック                                                                                   |
| htmlhint          | html規約チェック                                                                                   |
| linter-csslint    | css規約チェック                                                                                    |
| linter-jshint     | JavaScript規約チェック                                                                             |
| linter-rubocop    | ruby規約チェック                                                                                   |
| linter-erb        | erb規約チェック                                                                                    |
| linter-scss-lint  | scss規約チェック                                                                                   |
| linter-coffeelint | CoffeeScript規約チェック                                                                           |
| linter-php        | PHP規約チェック                                                                                    |

# 設定

## atom-beautify

以下をオン。

* Beautify Entire File On Save
* CSS - Force indentation
* CSS - Indent comments
* CSS - Newline between rules
* CSS - No lead zero
* CSS - Preserve newlines
* CSS - Selector separator newline
* HTML - Indent inner html
* HTML - Preserve newlines
* JavaScript - Break chained methods
* JavaScript - End with comma
* JavaScript - Eval code
* JavaScript - Jslint happy
* JavaScript - Keep array indentation
* JavaScript - Keep function indentation
* JavaScript - Preserve newlines
* JavaScript - Space after anon function
* JavaScript - Space before conditional
* JavaScript - Space in paren
* Language Config - CoffeeScript - Beautify On Save
* Language Config - CSS - Beautify On Save
* Language Config - CSV - Beautify On Save
* Language Config - ERB - Beautify On Save
* Language Config - gherkin - Beautify On Save
* Language Config - HTML - Beautify On Save
* Language Config - JavaScript - Beautify On Save
* Language Config - JSON - Beautify On Save
* Language Config - Markdown - Beautify On Save
* Language Config - PHP - Beautify On Save
* Language Config - Ruby - Beautify On Save
* Language Config - Sass - Beautify On Save
* Language Config - SCSS - Beautify On Save
* Language Config - SQL - Beautify On Save
* Language Config - Ruby - Beautify On Save

## linter

### 必要なlintのインストール

```
gem install rubocop
gem install scss-lint
npm install -g csslint
npm install -g jshint
```

### 設定

以下はExecutable Pathを設定。
Pathはコマンドラインから`which xxx`で確認する。

* rubocop
* scss-lint

# 規約の設定

## rubocop

デフォルトのままだと、日本語コメントでエラーがでたりするので、調整。
プロジェクトの直下に`.rubocop.yml`を置く。
日本語コメントOKにするのであれば、次のように設定。

```
# Use only ascii symbols in comments.
AsciiComments:
  Enabled: false
```

## jshint(node.jsのとき)

node.jsの場合は、node.jsとしては正しいものにエラーがでるので、調整。
プロジェクトの直下に`.jshintrc`を置き、`"node" : true`を設定する。