Configuring IDEs for WordPress Block Development

Optimizing your development environment can have a huge impact on productivity. Below are configurations and plugins you should consider for VSCode and PHPStorm:

ESLint and Stylelint Setup

Ensuring consistent coding standards is crucial when working on team-based projects. ESLint and Stylelint can automate this process.

ESLint: Use .eslintrc to define rules for your JavaScript. WordPress has a recommended set of rules that you can extend.

{
	"root": true,
	"extends": [
		"plugin:@wordpress/eslint-plugin/recommended-with-formatting",
		"plugin:import/recommended",
		"plugin:eslint-comments/recommended"
	],
	"env": { "browser": true },
	"globals": { "wp": true },
	"rules": {
		"jsdoc/check-indentation": "error",
		"@wordpress/dependency-group": "error"
	},
	"overrides": [
		{
			"files": [
				"**/__tests__/**/*.js",
				"**/test/*.js",
				"**/?(*.)test.js",
				"tests/js/**/*.js"
			],
			"extends": ["plugin:jest/all"],
			"rules": {}
		}
	]
}

Stylelint: Manage SCSS code quality using stylelint. This ensures that CSS follows a consistent structure, with rules set in your .stylelintrc.json file.

{
    "extends": "@wordpress/stylelint-config/scss",
    "ignoreFiles": ["**/*.js"],
    "rules": {}
}

Use .stylelintignore to exclude files from linting.

/assets/build/*.css
/tests
/vendor
*.*
!*.css
!*.scss

Explaining .stylelintignore file:

• The first line excludes all CSS files in the /assets/build/ directory.
• The second line excludes the /tests directory.
• The third line excludes the /vendor directory.
• The last three lines ensure that all files with a .css or .scss extension are included for linting and ignore all other files.

PHPCS configurations

PHPCS ensures that code is clean, consistent, and maintains coding standards across a team while also allowing for the design of custom coding standards.

PHPCS uses phpcs.xml or phpcs.xml.dist file to define rules for your PHP.

<ruleset name="VIP-Go-Skeleton">
	<description>WordPress VIP Go Coding Standards</description>

	<rule ref="WordPress-Core">
		<exclude name="WordPress.Files.FileName.NotHyphenatedLowercase" />
		<exclude name="WordPress.Files.FileName.InvalidClassFileName" />
		<exclude name="Generic.Arrays.DisallowShortArraySyntax.Found" />
	</rule>

	<rule ref="WordPress-VIP-Go" />

	<rule ref="WordPressVIPMinimum" />

	<rule ref="WordPress-Docs" />

	<rule ref="PHPCompatibility"/>

	<config name="testVersion" value="7.4-"/>

	<arg name="extensions" value="php"/>
	<arg value="s"/>

	<exclude-pattern>*/node_modules/*</exclude-pattern>
	<exclude-pattern>*/vendor/*</exclude-pattern>
	<exclude-pattern>.github/</exclude-pattern>

	<exclude-pattern>plugins/index.php</exclude-pattern>
	<exclude-pattern>plugins/akismet/</exclude-pattern>
	
	<exclude-pattern>themes/twentynineteen</exclude-pattern>

</ruleset>

Useful IDE Extensions

Here’s a list of recommended extensions to install in VSCode or PHPStorm:

• Autoprefixer: Automatically adds necessary vendor prefixes to CSS.
• Axe Accessibility: Ensures that your code follows accessibility standards.
• ESLint: Helps catch errors and format code in real time.
• Version Lens: Helps identify and update outdated dependencies.
• Pixel-to-Rem: Automatically converts pixel units to rem for responsive design.