※ VsCode(エディターの拡張機能)と併用する際の注意点 Prettierとリンターの自動フォーマット機能の競合を防ぐ必要があるので、リンターの拡張機能(EsLint、stylelint-plus)のみ有効にする。 必要なパッケージのインストール prettier、eslint、stylelint本体と併せて、以下のパッケージをインストールする。 PrettierとESLintの連携 eslint-plugin-prettier Prettier のチェックを同時に実行 eslint-config-prettier Prettier と競合するルールを無効化 PrettierとStyleLintの連携 stylelint-prettier Prettier のチェックを同時に実行 stylelint-config-standard 一般的なCSSのコーディング規約集 stylelint
![Prettier + ESLint + StyleLintの連携](https://cdn-ak-scissors.b.st-hatena.com/image/square/76f51279836004914fcf9281f7f7b6411bda97f1/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--XH7Bm5sg--%2Fco_rgb%3A222%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_37_bold%3Aasan%252Cx_203%252Cy_98%2Fc_fit%252Cco_rgb%3A222%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_70_bold%3APrettier%252520%25252B%252520ESLint%252520%25252B%252520StyleLint%2525E3%252581%2525AE%2525E9%252580%2525A3%2525E6%252590%2525BA%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly96ZW5uLWRldi5naXRodWIuaW8vZGVmYXVsdC1hdmF0YXJzL2RhcmsvYS5zdmc%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_72%2Fv1627274783%2Fdefault%2Fog-base_z4sxah.png)