プログラミング学習

【使い方】csscombからstylelintに!VSCodeでcssのプロパティをソートする拡張比較!

プログラミング学習

「cssのプロパティをソートする拡張」や「プログラミングを整形する拡張」はいろいろありますので、覚書がてら、いろいろとまとめて紹介します。

結論からいうと個人的にはWordpressのブログ運営もJavascript系のnuxtもstylelintを現在利用しています。

stylelintの使い方は長くなってしまったため、別記事にわけました。こちらの記事をみてください。

【v14で動かない!?】VsCodeでstylelintの使い方(設定/自動修正/ルールの例外・無効など)

以下は比較検討する際のメモ書きです。少し古い記事になります。

CSSの並び順

以前は下記のようなサイトを参考にしながら手動で並べていたのですが、今は自動で楽になったものです。考え方自体は今でも参考になるところがあります。

順番に関する基本的な解説はこちらがわかりやすく

http://unitopi.com/css-order/

実際にプロパティの順番をリスト化したものは、qiitaあたりがわかりやすいかも。FireFoxのMozilaさんがリンク切れしていたので。

CSSプロパティ記述順序 - Qiita

「視覚整形モデル」は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もあります。

CSScombはちょっとだけ使ったとこころ軽く設定してF1キーで並べ替えできました。デフォルト設定は下記でいけます。

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なしでやっている方もいるようです。

もうprettierで消耗したくない人へのvueでのeslint設定 - Qiita

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自体にも自動整形機能があるようですね。

VisualStudioCodeに自動整形機能があった - Qiita

vscodeでunityの整形【おまけ】

ついでに、C#の整形ツールも見つけました。unityユーザーはこちらも。

We're sorry, the page you requested cannot be found.

全部、vscodeで統一できるから嬉しいですね。

CSSのオンライン版の整形

オンライン版はなくなってしまったのかといえば、そんなことはなくいろいろあります。cssauthorでもご覧ください。

20+ Best CSS Beautifier Tools Worth Trying in 2023

ただ、個人的にはもう全部vscodeにいこうしようかなっと。

参考になれば幸いです。

コメント

タイトルとURLをコピーしました