HTML
CSS
Node
Rails
ATOM

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

More than 3 years have passed since last update.


参考にしたサイト


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を設定する。