[Dotfiles - WP Theme Dev Settings] Contains rules for EditorConfig, stylelint, ESLint, and PHP_CodeSniffer that follows WordPress coding standards. Uses and Gulp + BrowserSync for auto reload. #wordpress #development #linter #dotfiles

.editorconfig

# EditorConfig is awesome: https://EditorConfig.org
root = true

[*]
end_of_line = lf
insert_final_newline = true
indent_style = tab
indent_size = 4

.eslintrc

{
    "env": {
        "browser": true,
        "es6": true,
        "commonjs": true
    },
    "extends": [
        "plugin:@wordpress/eslint-plugin/esnext",
        "plugin:@wordpress/eslint-plugin/jsdoc"
    ],
    "globals": {
        
    },
    "parserOptions": {
        "ecmaVersion": 6
    },
    "rules": {

    }
}

.git-ftp-ignore

.gitignore
*/.gitignore
*/.gitkeep
.git-ftp-ignore
.git-ftp-include
.stylelintrc
.eslintrc
.editorconfig
.vscode/*
*.code-workspace
*.http
phpcs.xml
gulpfile.js
node_modules/*
vendor/*
package.json
package-lock.json
composer.json
composer-lock.json

.gitignore

/vendor
/node_modules

.stylelintrc

{
  "extends": "stylelint-config-wordpress",
  "rules": {
    "indentation": 4
  }
}

composer.json

{
    "name": "rizky/theme-name",
    "description": "WordPress theme description",
    "type": "project",
    "require": {
        
    },
    "require-dev": {
        "squizlabs/php_codesniffer": "^3.4",
        "wp-coding-standards/wpcs": "^2.1",
        "phpcompatibility/php-compatibility": "^9.3",
        "phpcompatibility/phpcompatibility-wp": "^2.1"
    },
    "authors": [
        {
            "name": "Rizky Syazuli",
            "email": "[email protected]"
        }
    ]
}

gulpfile.js

const { watch } = require('gulp');
const browserSync = require('browser-sync');

function devServer() {
    browserSync({
        proxy: 'localhost/wp-path',
        host: '127.0.0.1',
        port: '3010',
        open: 'external',
    });

    watch(['**/*.{php,css,js}', '!node_modules/**', '!vendor/**'], Reload);
    watch(['images/**'], Reload);
}

function Reload(done) {
    browserSync.reload();
    done();
}

exports.dev = devServer;

package.json

{
  "name": "theme-name",
  "version": "1.0.0",
  "description": "WordPress theme description",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "Rizky Syazuli <[email protected]>",
  "homepage": "",
  "devDependencies": {
    "@wordpress/eslint-plugin": "^3.1.0",
    "browser-sync": "^2.26.7",
    "eslint": "^6.5.0",
    "gulp": "^4.0.2",
    "gulp-connect-php": "^1.0.3",
    "stylelint": "^10.0.0",
    "stylelint-config-wordpress": "^14.0.0"
  }
}

phpcs.xml

<?xml version="1.0"?>
<ruleset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="Theme name" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/squizlabs/PHP_CodeSniffer/master/phpcs.xsd">

	<description>A custom set of rules to check for a WPized WordPress project</description>

	<file>.</file>

	<!-- Exclude the Composer Vendor directory. -->
	<exclude-pattern>vendor/*</exclude-pattern>

	<!-- Exclude the Node Modules directory. -->
	<exclude-pattern>node_modules/*</exclude-pattern>

	<!-- Exclude minified Javascript files. -->
	<exclude-pattern>*.min.js</exclude-pattern>

	<!-- Include the WordPress-Core standard. -->
	<rule ref="WordPress-Core"/>

	<!-- Include the WordPress-Extra standard. -->
	<rule ref="WordPress-Extra">
		<!--
		We may want a middle ground though. The best way to do this is add the
		entire ruleset, then rule by rule, remove ones that don't suit a project.
		We can do this by running `phpcs` with the '-s' flag, which allows us to
		see the names of the sniffs reporting errors.
		Once we know the sniff names, we can opt to exclude sniffs which don't
		suit our project like so.

		The below two examples just show how you can exclude rules.
		They are not intended as advice about which sniffs to exclude.
		-->

		<!--
		<exclude name="WordPress.WhiteSpace.ControlStructureSpacing"/>
		<exclude name="WordPress.Security.EscapeOutput"/>
		-->
	</rule>

	<!-- Let's also check that everything is properly documented. -->
	<rule ref="WordPress-Docs"/>

	<!-- Add in some extra rules from other standards. -->
	<rule ref="Generic.CodeAnalysis.UnusedFunctionParameter"/>
	<rule ref="Generic.Commenting.Todo"/>

	<!-- Check for PHP cross-version compatibility. -->
	<!--
	To enable this, the PHPCompatibilityWP standard needs
	to be installed.
	See the readme for installation instructions:
	https://github.com/PHPCompatibility/PHPCompatibilityWP
	For more information, also see:
	https://github.com/PHPCompatibility/PHPCompatibility
	-->
	
	<config name="testVersion" value="5.2-"/>
	<rule ref="PHPCompatibilityWP"/>

	<!--
	To get the optimal benefits of using WPCS, we should add a couple of
	custom properties.
	Adjust the values of these properties to fit our needs.

	For information on additional custom properties available, check out
	the wiki:
	https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/wiki/Customizable-sniff-properties
	-->
	<config name="minimum_supported_wp_version" value="4.9"/>

	<rule ref="WordPress.WP.I18n">
		<properties>
			<property name="text_domain" type="array">
				<element value="theme_name"/>
			</property>
		</properties>
	</rule>

	<rule ref="WordPress.NamingConventions.PrefixAllGlobals">
		<properties>
			<property name="prefixes" type="array">
				<element value="theme_name"/>
			</property>
		</properties>
	</rule>

</ruleset>

settings.json

{
    "eslint.enable": true,
    "stylelint.enable": true,
    "css.validate": false,
    "phpcs.enable": true,
    "phpcs.executablePath": "./vendor/bin/phpcs"
}