MENU
はにわまんの技術ブログ
お問い合わせ
  1. ホーム
  2. Note
  3. VS Codeの保存時にCSS、JavaScriptをPrettierで自動フォーマットする

VS Codeの保存時にCSS、JavaScriptをPrettierで自動フォーマットする

はにわまん

前提として「Node.js」を自分のパソコンにインストールしておきます。

では順番に見ていきましょう。

目次

CSSの自動フォーマットの設定

npm経由で必要なパッケージをインストール

prettier

npm install --save-dev prettier

stylelint

npm install --save-dev stylelint

stylelint-config-prettier

prettierとバッティングするstylelintの設定を無効化してくれます。

npm install --save-dev stylelint-config-prettier

@wordpress/stylelint-config

npm install --save-dev @wordpress/stylelint-config
WordPress Developer Resources
@wordpress/stylelint-config – Block Editor Handbook | Developer.WordPress.org stylelint configuration rules to ensure your CSS is compliant with the WordPress CSS Coding Standards.

ターミナルで動作確認

特定のCSSファイルのエラー確認

npx stylelint path/to/file.css

特定のSASSファイルのエラー確認

npx stylelint path/to/file.scss

特定のディレクトリ配下のエラー確認

npx stylelint path/to/directory/

特定のファイルを整形

npx stylelint --fix path/to/file.css

VS Codeの拡張機能をインストール

VS Codeの拡張機能「Stylelint」

あわせて読みたい
Stylelint – Visual Studio Marketplace Extension for Visual Studio Code – Official Stylelint extension for Visual Studio Code

VS Codeの拡張機能「Prettier」

あわせて読みたい
Prettier – Code formatter – Visual Studio Marketplace Extension for Visual Studio Code – Code formatter using prettier

拡張機能の設定

{
	"css.validate": false,
	"[css]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": true,
		"editor.codeActionsOnSave": {
			"source.fixAll.stylelint": true
		}
	},
	"scss.validate": false,
	"[scss]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": true,
		"editor.codeActionsOnSave": {
			"source.fixAll.stylelint": true
		}
	},
	"stylelint.validate": [
		"css",
		"scss"
	],
}

この設定では以下のことを行っています。

  • VS Code標準のバリデーションは無効にする
  • 標準のフォーマッターにはprettierを使用する
  • 保存時にフォーマットされるようにする
  • cssとscssファイルの保存時にstylelintのfixを走らせる
  • stylelintの対象はcssファイルとscssファイル

prettierとstylelintのルールを決める

.prettierrcファイルを作成してprettierのルールを記載します。

{
	"printWidth": 100,
	"tabWidth": 2,
	"useTabs": true,
	"singleQuote": true
}

.stylelintrcファイルを作成してstylelintのルールを決めます。
rulesは自由ですが、"extends": ["@wordpress/stylelint-config/scss", "stylelint-config-prettier"]で@wordpress/stylelint-configとstylelint-config-prettierで拡張する必要があります。

  • @wordpress/stylelint-config・・・WordPressのコーディング規約を読み込む（scssまで記載するとscss用のルールでさらに拡張される）
  • stylelint-config-prettier・・・prettierとバッティングするstylelintのチェックを無効化する
{
	"extends": ["@wordpress/stylelint-config/scss", "stylelint-config-prettier"],
	"rules": {
		"color-named": "never",
		"selector-class-pattern": null,
		"at-rule-no-unknown": [
			true,
			{
				"ignoreAtRules": [
					"include",
					"mixin",
					"function",
					"if",
					"return",
					"import",
					"use",
					"forward"
				]
			}
		],
		"no-descending-specificity": null,
		"comment-empty-line-before": null,
		"rule-empty-line-before": null,
		"no-invalid-double-slash-comments": null,
		"block-no-empty": null
	}
}

JavaScriptの自動フォーマットの設定

npm経由で必要なパッケージをインストール

prettier

npm install --save-dev prettier

eslint

npm install --save-dev eslint

eslint-config-prettier

prettierとバッティングするeslintの設定を無効化してくれます。

npm install --save-dev eslint-config-prettier

@wordpress/eslint-plugin

npm install --save-dev @wordpress/eslint-plugin
WordPress Developer Resources
@wordpress/eslint-plugin – Block Editor Handbook | Developer.WordPress.org ESLint plugin including configurations and custom rules for WordPress development.

eslintのルールを決める

.eslintrcファイルにルールを設定できます。

{
	"env": {
		"jquery": true
	},
	"extends": ["plugin:@wordpress/eslint-plugin/recommended", "plugin:prettier/recommended"],
	"rules": {}
}

ターミナルで動作確認

特定のJavaScriptファイルのエラー確認

npx eslint path/to/file.js

特定のディレクトリ配下のエラー確認

npx eslint path/to/directory/
GitHub
prettier/docs/integrating-with-linters.md at 554b15473dd4032a036d7db91a8f579e624c9822 · prettier/pre… Prettier is an opinionated code formatter. Contribute to prettier/prettier development by creating an account on GitHub.

VS Codeの拡張機能をインストール

VS Codeの拡張機能「ESLint」

あわせて読みたい
ESLint – Visual Studio Marketplace Extension for Visual Studio Code – Integrates ESLint JavaScript into VS Code.

VS Codeの拡張機能「Prettier」

あわせて読みたい
Prettier – Code formatter – Visual Studio Marketplace Extension for Visual Studio Code – Code formatter using prettier

拡張機能の設定

ドキュメント直下の.vscode/settings.jsonにワークスペース用の設定を追加します。

{
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": true,
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": true,
		"editor.codeActionsOnSave": {
			"source.fixAll.eslint": "explicit"
		}
	},
}

この記事が気に入ったら
フォローしてね！

この記事を書いた人

はにわまんのアバター はにわまん

WordPressが得意なWeb屋。HPcode代表。

300件以上のWordPressカスタマイズを対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。

この著者の記事一覧へ

関連記事

目次