「cssのプロパティをソートする拡張」や「プログラミングを整形する拡張」はいろいろありますので、覚書がてら、いろいろとまとめて紹介します。
stylelintの使い方は長くなってしまったため、別記事にわけました。こちらの記事をみてください。
![](https://ebookbrain.net/wp-content/uploads/featured-Images/program003-160x160.jpg)
以下は比較検討する際のメモ書きです。少し古い記事になります。
目次
CSSの並び順
以前は下記のようなサイトを参考にしながら手動で並べていたのですが、今は自動で楽になったものです。考え方自体は今でも参考になるところがあります。
順番に関する基本的な解説はこちらがわかりやすく
実際にプロパティの順番をリスト化したものは、qiitaあたりがわかりやすいかも。FireFoxのMozilaさんがリンク切れしていたので。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q1NTJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgzJTkxJUUzJTgzJTg2JUUzJTgyJUEzJUU4JUE4JTk4JUU4JUJGJUIwJUU5JUEwJTg2JUU1JUJBJThGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1lMzAzMzkxOWVhYjhlYjYzYzNkMDU4MmJkYzdiMzVkMA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtZ24mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTIzMGFkMTk5MDEyZDBjMzRjYTNjYmYyZDkxMTE0ZGU3&blend-x=142&blend-y=486&blend-mode=normal&s=c20503e9e8f14ba6b364db1fdd5de73e)
「視覚整形モデル」はdisplayなどの表示とpositonなどの配置を分けていたところもありましたね。どこのサイトも大差はありません。
【おすすめは?】vs codeで整形する拡張比較
【CSScomb、CSS Formatter】VS Codeでcssのプロパティをソートする拡張比較!
昔オンラインで少しお世話になった、cssのプロパティをソートするCSScombが利用できなくなっていました。ブログ運営するにあたり、たまたまcssを少し書く機会がありました。
現在、VS Codeを利用しているため、そちらで拡張を入れることにしました。
VS Codeにも実はCSScombの拡張はありますし、Stack OverflowのVisual studio code CSS indentation and formattingに紹介されていたCSS Formatterもあります。
Can be built-in config (csscomb, zen, or yandex), path to a config file, or an object containing custom configuration.
ただ、自分が好きなように並べ替えしたいときはは別途対応が必要です。
しかし、cssだけではなく、もう少し応用が効く方がいいだろうということでStylelintを採用しました。
下記の言語に対応しています。
CSS (css)
HTML (html)
Less (less)
JavaScript (javascript)
JavaScript React (javascriptreact)
Markdown (markdown)
Markdown+MathML (source.markdown.math)
PostCSS (postcss)
Sass (sass)
SCSS (scss)
styled-components
Official (source.css.styled)
Userland (styled-css)
Sugarss (sugarss)
Svelte (svelte)
TypeScript (typescript)
TypeScript React (typescriptreact)
Vue (vue, vue-html, vue-postcss)
XML (xml)
XSL (xsl)
整形だけではなく、警告してくれます。
ESLint、Stylelint、Prettier(ブログ運用の場合)
ESLintとStylelint、Prettierは組み合わせて使う紹介をされているサイトが多いですが、とりあえず、stylelintだけを使いました。
拡張もあります。
ESLint – Visual Studio Marketplace
Prettier – Code formatter – Visual Studio Marketplace
codepenで書いたcssをある程度思った通りにも並べ替えしたかっただけなので。あと、あまりごちゃごちゃしたくなかったです。
Prettierはインストールせず様子見しようと思いますが、便利そうではあるので必要があれば、追加インストールします。
vue.jsですが、eslintもprettierなしでやっている方もいるようです。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgyJTgyJUUzJTgxJTg2cHJldHRpZXIlRTMlODElQTclRTYlQjYlODglRTglODAlOTclRTMlODElOTclRTMlODElOUYlRTMlODElOEYlRTMlODElQUElRTMlODElODQlRTQlQkElQkElRTMlODElQjglRTMlODElQUV2dWUlRTMlODElQTclRTMlODElQUVlc2xpbnQlRTglQTglQUQlRTUlQUUlOUEmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTgxYmFlNjVkZjk2ZjJlMTJhNTI3NDhmM2YxN2Q0MGQ0&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkaWdneS1tbyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9OTc2NDRiYzMyZTVjYTQ2MTIwNmIxNDRhZGZmODYxNGM&blend-x=142&blend-y=486&blend-mode=normal&s=7c94c6c9d0bb0f1eaa8d3a0fcd761f34)
ESLint、Stylelint、Prettier(javascript/nuxtの場合)
(後日談を追記)javascript系の言語を使うなら、eslintとprettierが必要かもしれませんよね。
cssの並べ替え問題とは別に、Vue.jsを使った際に再検討しました。
Vue.js アプリケーションを構築するためのフレームワークNuxt.jsまで一気に導入を進めました。
パフォーマンスがよさそうなことが主な理由ですが、こちらはNuxt.jsをインストールする際に、ESLint, Prettierのオプションをつけられるメリットもありました。オプションをつけると、下記のようなことをやる必要がありません。なぜって最初にインストールしているから。
npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
さくっとプロジェクトを作成し、npm run lintで使えますよ。
なお拡張機能はインストールしていません。
Autoprefixer、Beautify
他にもベンダープレフィックスが必要なものをつけてくれるAutoprefixer。
Autoprefixer – Visual Studio Marketplace
Beautifyもあります。
Beautify – Visual Studio Marketplace
VisualStudioCodeの自動整形機能
VisualStudioCode自体にも自動整形機能があるようですね。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VmlzdWFsU3R1ZGlvQ29kZSVFMyU4MSVBQiVFOCU4NyVBQSVFNSU4QiU5NSVFNiU5NSVCNCVFNSVCRCVBMiVFNiVBOSU5RiVFOCU4MyVCRCVFMyU4MSU4QyVFMyU4MSU4MiVFMyU4MSVBMyVFMyU4MSU5RiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NzNkMDE0NWE0NmE5NzVhMmIxMjM3M2UxMGEzMGU5N2U&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYXJvbjg2NzYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRkNGY5YmY1OWI5OTg4YzhmMWIxZjBkMmQ1YmI5YzY3&blend-x=142&blend-y=486&blend-mode=normal&s=9277b47a49c9ccd3c4b4b244b9ace96b)
vscodeでunityの整形【おまけ】
ついでに、C#の整形ツールも見つけました。unityユーザーはこちらも。
全部、vscodeで統一できるから嬉しいですね。
CSSのオンライン版の整形
オンライン版はなくなってしまったのかといえば、そんなことはなくいろいろあります。cssauthorでもご覧ください。
![](https://cdn.cssauthor.com/wp-content/uploads/2018/08/CSS-Beautifier-Tools-Worth-Trying-in-2019.jpg?strip=all&lossy=1&ssl=1)
ただ、個人的にはもう全部vscodeにいこうしようかなっと。
参考になれば幸いです。
コメント