wavevision / coding-standard

✍️ Default code style for Wavevision apps

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

<rule ref="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