README

编码规范

PHP、SCSS 和 TypeScript的代码风格规则和预设。还包括默认的PhpStorm项目代码风格。

PHP

规则

• PHP_CodeSniffer

安装

通过Composer

composer require --dev wavevision/coding-standard

设置

添加到现有规则集

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

或直接使用

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

SCSS 和 TypeScript

规则和预设

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

安装

通过yarn

yarn add --dev @wavevision/coding-standard

或 npm

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

设置

以下配置示例可以根据项目需求进一步扩展和自定义，并符合相应库的文档。

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: '.',
  },
};

注意：所有规则正确工作的关键在于extends项的顺序。

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/**/*"]
}

填充库

如果您的项目需要，可以导入由core-js和regenerator-runtime稳定版本组成的babel填充库。

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

注意：这可能会向您的包中添加不必要的代码。确保您的设置需要所有填充库，否则只导入所需的功能。

这通常发生在您项目的顶级入口点。

PhpStorm

1. 将File > Settings > Editor > CodeStyle > Scheme设置为Project
2. 将phpstorm/style.xml符号链接到.idea/codeStyles/Project.xml