CSSの文法をチェックしてくれるbrackets-csslintを使ってみました

GitHub - iwehrman/brackets-csslint: CSSLint extension for Brackets
Brackets brackets-csslint

セレクタにIDを使わないでください。
セレクタにID3つマジですか?
0に単位を入れないでください。
marginの指定はまとめる事ができますよ?
見出しのタグを装飾しないでください。

英文のエラーメッセージをコピーする事ができれば、Googleで翻訳できるんだけどなぁ…と思いながら目視で確認しながら英文をタイプして翻訳…みたいな事をやりました。
C:\Users\hoge\AppData\Roaming\Brackets\extensions\user\brackets-csslint\thirdparty\csslint.js

拡張機能の中身はjavaScriptなので、コードのエラーメッセージ部分をコピーして翻訳の一覧をあらかじめ作っておくとか?

該当エラー行の確認作業をしていたら…
<h2 class="title"><a href="hoge">hoge</a></h2>
の装飾がh2とtitleで二重指定されている事がわかり修正…。このブログのCSSなんですけどね。

Atomのlinter-csslintは、なぜか動作しない…。

Brackets コードの折りたたみ

コードの折りたたみ。

秀丸も、Atomもコードの折りたたみに対応していますが…。
Bracketsは要素単位で折り畳めるので、例えば
<head>...</head>
は折りたたんで作業したい時といった時に便利ですね。
本文の修正作業だけに集中したいのに、途中にjavaScript。うっかりいじってjavaScriptのコードを壊したくない…という時も折りたたんでしまえばいいので助かります。
Brackets 1.0:テーマカラー89種類まとめ - Qiita

約1年前の記事なのでそんなに変わってないだろう…と思いながら、テーマをインストール。
目が痛くならないコントラスト+可読性…。

なかなかいいものがみつかりません。

Atom1.24のダークカラーと同じにできたらいいのになぁ…と思ったら。
GitHub - moritzw1/one-dark-theme-for-brackets: Inspired by One Dark Theme for Atom Editor.
Atom1.24とほぼ同じ背景色と文字の色。
とても見やすい…。
AtomとBracketsを行き来する時にも困らない。
1年前の情報はすでに古い…という。

Brackets テーマ New One Dark

テーマ、New One Dark。

Atomにあって、Bracketsに無いもの…。
linter-htmlhint
でも、Atomでエラーを確認したら、修正作業はBrackets…みたいな感じに。
<p>...</p>のように<p>のタグを閉じるべきなのですが、古いHTMLエディタのソースが残っていて閉じられていない状態で20年とか…。Atomのlinter-htmlhintはこのタグのとじ忘れを指摘してくれるのでわかりやすいんですよね。

でも、タグが閉じられているかどうかを確認する作業はタグがハイライトされるBracketsのほうが…。
AtomでもBracketsのようにタグをハイライトさせる事ができるのかもしれませんが…。
タグ:HTML CSS Atom Brackets
posted by さとぴあ at 2018/03/12 20:06 | Web制作

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。