Coding Standard

Code style rules and presets for PHP, SCSS and TypeScript. Also contains default PhpStorm project code style.

PHP

Rules for:

• PHP_CodeSniffer

Installation

Via Composer

composer require --dev wavevision/coding-standard

Setup

Add to existing ruleset

<ruleref="vendor/wavevision/coding-standard/php/ruleset.xml"/>

or use directly

vendor/bin/phpcs -p --standard=vendor/wavevision/coding-standard/php/ruleset.xml <pathToSources>

SCSS and TypeScript

Rules and presets for:

• babel
• eslint
• postcss
• prettier
• stylelint
• TypeScript

Installation

Via yarn

yarn add --dev @wavevision/coding-standard

or npm

npm install --save-dev @wavevision/coding-standard

Setup

Following config examples can be further extended and customized according to project's needs compliant with respective library docs.

babel.config.js

module.exports={presets: ['@wavevision/coding-standard/ts/babel','@wavevision/coding-standard/ts/babel/react',// if project uses React],};

.eslintrc.js

module.exports={extends: ['@wavevision/coding-standard/ts/eslint','@wavevision/coding-standard/ts/eslint/react',// if project uses React'@wavevision/coding-standard/ts/eslint/jest',// if project uses Jest].map(require.resolve),parserOptions: {project: 'tsconfig.json',tsconfigRootDir: '.',},};

Note: The order of extends items is crucial for all rules to work correctly.

postcss.config.js

module.exports=require('@wavevision/coding-standard/scss/postcss');

prettier.config.js

module.exports=require('@wavevision/coding-standard/ts/prettier');

stylelint.config.js

module.exports={extends: '@wavevision/coding-standard/scss/stylelint',};

tsconfig.json

{
"extends": "@wavevision/coding-standard/ts/tsconfig.json",
"include": ["./src/**/*"]
}

Polyfills

Should your project need it, import babel polyfills consisting of core-js and regenerator-runtime stable versions.

import'@wavevision/coding-standard/ts/polyfills';

Note: This might add unnecessary code to your bundle. Make sure your setup needs all the polyfills, otherwise, import required features only.

This should most likely happen in your project's top-level entry point.

PhpStorm

1. Set File > Settings > Editor > CodeStyle > Scheme to Project
2. Symlink phpstorm/style.xml to .idea/codeStyles/Project.xml