バラバラになってしまったHTMLのインデントを一発で整理したい。閉じタグが漏れていないかチェックしたい。
そんなときに便利なWebツールが「Prettier」です。
これはもともと、コードエディターである「Visual Studio Code（通称：VS Code）」のプラグインとして有名なツール。しかし実はWeb版もありまして、これがとても手軽で便利なのです。
面倒なインストール作業や会員登録なども不要。VS Codeをインストールする必要すらありませんので、手軽なHTMLチェッカーとして活用してみてください。
コード整形ツール「Prettier」のWeb版が手軽で便利
今回の主役「Prettier」は以下のリンクから使いはじめられます。リンクにアクセスしたらTRY IT ONLINEをクリックしてください。
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
左側が入力フィールドで、右側が出力されたコードが表示されるフィールドです。入力フィールドにHTMLを貼り付けると、すぐにインデントを整理してくれます。
もし HTML の記述に間違いがあった場合は、エラーが発生。どの行に問題があるのかを示してくれます。
左ナビでは、各種プロパティを変更することができます。が、特に気にしなくても使えます。一番左上の「
以下に、各プロパティの意味を書いておきましたので、参考にしてみてください。
| プロパティ | 説明 |
|---|---|
| printWidth | 文字数制限の確認 |
| tabWidth | インデントの幅 |
| useTabs | スペースをタブに置き換える |
| semi | 行末にセミコロンを追加します。 |
| singleQuote | ダブルクォーテーション、シングルクォーテーションの選択 |
| quoteProps | オブジェクトのプロパティを引用符で囲む |
| jsxSingleQuote | jsxでシングルクォート、ダブルクォート選択 |
| trailingComma | 末尾のカンマ指定 |
| bracketSpacing | オブジェクトリテラルのスペースの有無 |
| jsxBracketSameLine | 複数行のJSX要素の「>」の位置指定 |
| arrowParens | アロー関数の()の有無 |
| rangeStart rangeEnd |
ファイル一部のセグメントのみフォーマット |
| parser | パーサーを指定 |
| filepath | 使用するパーサーを推測するためのファイル名を指定 |
| requirePragma | プラグマの有無 |
| “insertPragma | ファイルの先頭にプラグマ指定の有無 |
| proseWrap | markdownの折り返し設定 |
| htmlWhitespaceSensitivity | HTMLファイルの空白感度を指定 |
| vueIndentScriptAndStyle | Vueファイル内の<script>と<style>のインデント指定 |
| endOfLine | 改行の文字コード指定 |
あとがき
ぼくはWebディレクターである。しかしときにはHTMLを触らなければならないこともあります。
ブログを通してHTMLやCSSの一般的な知識や経験はありますし、"ただのWebディレクター" よりはコーディングの心得はあるつもりです。
しかし本格的に勉強をしてきたわけではないので、きれいな書き方ができなかったり、閉じタグ忘れなどのミスもあります。
こういったツールでササッとチェックできるのは、とても心づよくて助けられています。
