イイダリョウのブログ。CSS構文チェック系の続きです。前回はESLintでJSコードの構文チェックを事始めました。今回はStyleLintでCSSコードの構文チェックを事始めます。qiita.comStyleLintのインストールCSS系の構文チェックについて調べるとStyleLintが一番定番のようなのでどんなものか体験する。-vStyleLintを入れるフォルダを作る。今回は「stylelint_test」とした。cdコマンドでstylelint_testフォルダに移動。-yローカルにStyleLintをインストールする。}ここまでは他のツールと大体同じ作業。StyleLintの設定方法はいくつかありそうStyleLintの設定を追加する。ここが調べるといくつか方法があって戸惑ったが、こちらの記事の方法が一番シンプルに感じた。QiitaまずStyleLintの標準のルールセットをインストールする。「stylelint-config-standard」という。},次にこれをStyleLint本体に適用する必要があるのだがこれがいくつか方法があるようだった。.stylelintrcに書くとか.stylelintrc.jsonに書くstylelint.config.jsに書くpackage.jsonに書く(stylelintキー)これらの隠しファイルもインストール時に自動的に作られるんだか自作するんだか、自分のコマンド系の知識不足でイマイチよくわからない。確実に言えるのは自動的にはファイルは作られていないようだ、ということ。先ほどの参考記事ではpackage.jsonに追記する方法が紹介されており、一番シンプルな作業なので自分もこれに従ってみる。package.jsonに設定を追記ということでpackage.jsonに追記する。}stylelintキーを作る。値は連想配列のネスト(入れ子)ネストの連想配列の中にextendsキーを作るextendsキーの値はstylelint-config-standardを入れるひとまずはこの1行のみで。これで先ほどインストールしたstylelint-config-standardの標準ルールが適用される。固有のルールを追加したい場合はrulesキーを追加するといいみたい。}}ルールの例、自分も今後色々見て行きたく。「stylelint_test」フォルダの直下にテスト用のcssファイルを作る。「test.css」とした。bold;}colorプロパティの行末のセミコロンを抜いてみたfont-weightプロパティをfonto-weightと打ってみたwさあ、StyleLintの構文チェックではどういう結果が出るか。今回は直下の「test.css」なのでこうなる。test.css実行!結果は...お。われた通りに直してみる。"fonto-weight"3行目の5文字目:2スペースのインデントのインデントが予想される4行目の1文字目:予期しないソース終了改行の欠落fonto-weightはちゃんと見つけてくれた。no-missing-end-of-source-newlineむむむ。file」というのはgitコマンドでも出るエラーらしく、やはり一番最後に改行を入れなさいよ、という意味らしい。ハックノートなんか、自分はこれまで最後に余計な改行を見つけるとわざわざ消していたような気がするのだが、本当は改行を1つは入れることが推奨されるのかな?知らないで続きのコードを書くと繋がっちゃうからかな?改行を入れてみる。test.css...シーン。ただのしかばねのようだ。Lintの場合返事がないのは良い知らせ。何も問題がないということだ(ESLintもそうだった)最後にということでCSSの構文チェックStyleLintを初体験しました。CSSはJSに比べると複雑な構成ではないけれど、記述量が増えてくると重複チェックや順番変更など色々と助けてもらえそう!以前紹介したコード整形ツールPrettierとの連携方法もあるようです。この流れで次はHTMLの構文チェックもトライしたく思います!HTMLのLintツールを調べるとどうもHTMLLintよりHTMLHintの方が定番っぽいのでそちらを触る予定。05:59Tweet関連記事2020-01-28【JS】Jestでテストを事始める(TDD:テスト駆動開発)フロントエンド開発環境の続きです。コードチェック(ESLint)...2020-01-25【コードフォーマッター】PrettierでHTML、CSS、JSのコードを整形してみたフロントエンド開発環境の続きです。前回はESLintでコードチェ...2020-01-22【JS】ESLintで構文チェックを事始める以前、フロントエンドの開発環境についていろいろ調べた記事を...2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。前回はHTMLテンプレートエンジンのEJSをコンパ...2019-11-29【HTML】PugをGulpでコンパイルしてみる(メタ言語初コンパイル!)Gulpの続きです。前回はローカルにインストールができました。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。