# Configuring IDEs

*Published:* 2024-10-21
*Author:* Parth Vaswani

> Optimize your IDE for WordPress block development with ESLint, Stylelint, PHPCS, and essential VSCode & PHPStorm extensions for better productivity.

# 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](https://code.visualstudio.com/) and [PHPStorm](https://www.jetbrains.com/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.

phpcs.xml

```
<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](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer)**: Automatically adds necessary vendor prefixes to CSS.
- **[Axe Accessibility](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)**: Ensures that your code follows accessibility standards.
- **[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)**: Helps catch errors and format code in real time.
- **[Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens)**: Helps identify and update outdated dependencies.
- **[Pixel-to-Rem](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem)**: Automatically converts pixel units to rem for responsive design.

### Categories and Taxonomies

#### Service
[WP Frontend Development](https://rtcamp.com/blog/service/wp-frontend-development.md)

#### Solutions
[WordPress Development](https://rtcamp.com/blog/solution/wordpress-development.md)

#### Topics
[Frontend](https://rtcamp.com/topics/frontend.md), [WordPress](https://rtcamp.com/topics/wordpress.md), [WordPress Development](https://rtcamp.com/topics/wordpress-development.md)

### Related Posts

- [Structural Limits of Accounting-First Software](https://rtcamp.com/handbook/why-migrate-quickbooks-to-erpnext/structural-limits.md)
- [Project structure](https://rtcamp.com/handbook/react-best-practices/project-structure.md)
- [Outgrowing standard hosting](https://rtcamp.com/handbook/enterprise-wordpress-hosting/why-choose-enterprise-wordpress-hosting.md)
- [WordPress vs Kentico](https://rtcamp.com/handbook/enterprise-consolidation/kentico-vs-wordpress.md)
- [rtCamp’s philosophy & principles](https://rtcamp.com/handbook/headless-wordpress/rtcamps-philosophy.md)