> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nk-crew/visual-portfolio/llms.txt
> Use this file to discover all available pages before exploring further.
# Code Quality
> Code quality standards and linting tools used in Visual Portfolio development
## Overview
Visual Portfolio maintains high code quality standards using automated linting tools and coding standards. All code must pass quality checks before being merged into the main branch.
## Automated Quality Checks
The project uses **Husky** and **lint-staged** to automatically run quality checks on staged files before commits and pushes:
* **Pre-commit**: Lints staged files
* **Pre-push**: Runs full test suite
These hooks are automatically installed when you run `npm install`.
## PHP Code Quality
### PHP CodeSniffer (PHPCS)
The plugin follows **WordPress Coding Standards** (WPCS) with additional custom rules.
#### Configuration
PHP coding standards are defined in `phpcs.xml.dist`:
* **Standards**: WordPress-Core, WordPress-Docs, WordPress.WP.I18n
* **PHP Version**: 7.2+ (with PHPCompatibilityWP)
* **WordPress Version**: 6.2+ minimum
* **Text Domain**: `visual-portfolio`
* **Namespace Prefixes**: `Visual_Portfolio_`, `vpf_`
#### Running PHP Linting
```bash theme={null}
# Lint PHP code (requires wp-env)
npm run lint:php
# Auto-fix PHP code
npm run format:php
```
PHP linting runs inside the wp-env Docker container to ensure consistency across different development environments.
#### Composer Scripts
You can also run PHP CodeSniffer directly with Composer:
```bash theme={null}
# Lint PHP files
composer run-script lint
# Auto-fix PHP files
composer run-script format
```
### PHP Standards Details
#### Included Rules
* **WordPress-Core**: Core WordPress coding standards
* **WordPress-Docs**: PHPDoc documentation standards
* **WordPress.WP.I18n**: Internationalization standards
* **PHPCompatibilityWP**: PHP version compatibility checks (7.2+)
* **VariableAnalysis**: Variable usage analysis
* **Generic.CodeAnalysis.EmptyPHPStatement**: Empty statement detection
#### Excluded Patterns
```xml theme={null}
./tests/*
*/vendor/*
*/vendors/*
*/node_modules/*
*/build/*
*/dist-zip/*
```
#### Custom Configuration
```xml theme={null}
```
## JavaScript Code Quality
### ESLint
JavaScript code follows WordPress ESLint configuration with custom rules.
#### Configuration
ESLint settings are defined in `.eslintrc.js`:
```javascript theme={null}
extends: ['plugin:@wordpress/eslint-plugin/recommended']
```
#### Running JavaScript Linting
```bash theme={null}
# Lint JavaScript files
npm run lint:js
# Auto-fix JavaScript files
npm run format:js
```
#### Linting Scope
* `assets/**/*.js`
* `gutenberg/**/*.js`
### Custom ESLint Rules
```javascript theme={null}
rules: {
// Disable Prettier enforcement
'prettier/prettier': 0,
// Allow @wordpress/* imports as externals
'import/no-unresolved': ['error', { ignore: ['^@wordpress/'] }],
'import/no-extraneous-dependencies': 0,
// Disable specific WordPress rules
'@wordpress/no-unsafe-wp-apis': 0,
'@wordpress/i18n-translator-comments': 0,
// Disable JSDoc type requirements
'jsdoc/no-undefined-types': 0,
'jsdoc/require-param-type': 0,
'jsdoc/require-returns-description': 0,
'jsdoc/check-param-names': 0,
// Enable import sorting
'simple-import-sort/imports': ['error', groups],
'simple-import-sort/exports': 'error',
}
```
### Import Sorting
Imports are automatically sorted using `eslint-plugin-simple-import-sort`:
1. Side effect imports
2. Node.js builtins (prefixed with `node:`)
3. External packages
4. WordPress packages (`@wordpress/*`)
5. Absolute imports
6. Relative imports (starting with `.`)
## CSS/SCSS Code Quality
### Stylelint
SCSS code follows WordPress Stylelint configuration.
#### Configuration
Stylelint settings are defined in `.stylelintrc.js`:
```javascript theme={null}
extends: '@wordpress/stylelint-config/scss'
```
#### Running CSS Linting
```bash theme={null}
# Lint SCSS files
npm run lint:css
# Auto-fix SCSS files
npm run format:css
```
#### Linting Scope
* `assets/**/*.scss`
* `gutenberg/**/*.scss`
* `templates/**/*.scss`
All SCSS files use the **postcss-scss** custom syntax.
### Disabled Stylelint Rules
Several strict rules are disabled for flexibility:
* `at-rule-empty-line-before`
* `comment-empty-line-before`
* `font-weight-notation`
* `no-descending-specificity`
* `rule-empty-line-before`
* `selector-class-pattern`
* `selector-id-pattern`
* `value-keyword-case`
* Various SCSS-specific rules
## Running All Linters
To check all code types at once:
```bash theme={null}
# Lint JavaScript and CSS
npm run lint
# Lint everything including PHP (requires wp-env)
npm run lint:php && npm run lint
```
## Code Formatting
Auto-fix formatting issues:
```bash theme={null}
# Fix all JavaScript
npm run format:js
# Fix all CSS/SCSS
npm run format:css
# Fix all PHP
npm run format:php
```
## Editor Integration
### VS Code
Recommended extensions:
* **PHP Sniffer**: phpcs integration
* **ESLint**: JavaScript linting
* **Stylelint**: SCSS linting
Add to your `.vscode/settings.json`:
```json theme={null}
{
"php.validate.executablePath": "vendor/bin/phpcs",
"phpcs.standard": "phpcs.xml.dist",
"eslint.workingDirectories": [{ "mode": "auto" }],
"stylelint.validate": ["scss"],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
}
}
```
### PhpStorm
1. Go to **Settings → PHP → Quality Tools → PHP\_CodeSniffer**
2. Set configuration path to `phpcs.xml.dist`
3. Enable **PHP\_CodeSniffer validation**
4. Enable **ESLint** in **Languages & Frameworks → JavaScript → Code Quality Tools**
5. Enable **Stylelint** in **Languages & Frameworks → Style Sheets → Stylelint**
## WordPress Security Standards
All code must follow WordPress security best practices:
### Input Sanitization
```php theme={null}
// Sanitize text fields
$name = sanitize_text_field( $_POST['name'] );
// Sanitize email
$email = sanitize_email( $_POST['email'] );
// Sanitize URLs
$url = esc_url_raw( $_POST['url'] );
// Sanitize HTML
$content = wp_kses_post( $_POST['content'] );
```
### Output Escaping
```php theme={null}
// Escape HTML
echo esc_html( $text );
// Escape attributes
echo '