PHPCS and ESLint Travis build (#26)

* Initial setup for PSR2 ruleset and eslint standard ruleset * ESLint travis build * Properly trigger eslint from npm script * Linting JS files * Forgot to npm install all the things * PHPCS fixes * Npm install only eslint package
Alecaddd · Aug 16, 2018 · efaea96 · efaea96
1 parent 866c540
commit efaea96
Show file tree

Hide file tree

Showing 13 changed files with 105 additions and 76 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+/node_modules/**
+/vendor/**
+/assets/dist/**
+
+webpack.mix.js
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,16 @@
+{
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true,
+            "modules": true
+        }
+    },
+    "extends": "wordpress",
+    "rules": {
+        "indent": ["error", "tab"],
+        "no-tabs": 0,
+        "no-unused-vars": 0
+    }
+}
diff --git a/.jscsrc b/.jscsrc
diff --git a/.jshintignore b/.jshintignore
diff --git a/.travis.yml b/.travis.yml
@@ -44,20 +44,17 @@ matrix:
             - phpenv config-rm xdebug.ini || echo 'No xdebug config.'
             # Install PHP packages.
             - composer install --ansi --prefer-dist --no-suggest
-            # Install JSCS: JavaScript Code Style checker and JSHint, a JavaScript Code Quality Tool.
-            # @link http://jscs.info/
-            # @link http://jshint.com/docs/
-            - npm install -g jscs jshint
-            # Pull in WordPress Core jshint rules.
-            - wget -N "https://develop.svn.wordpress.org/trunk/.jshintrc"
+            # Install ESLint shareable config for WordPress.
+            # @link https://github.com/WordPress-Coding-Standards/eslint-config-wordpress
+            - npm install eslint eslint-config-wordpress
+            # Pull in WordPress Core eslint rules.
+            # - wget -N "https://github.com/WordPress-Coding-Standards/eslint-config-wordpress/blob/master/.eslintrc.json"
           # Run test script commands.
           # Default is specific to project language.
           # All commands must exit with code 0 on success. Anything else is considered failure.
           script:
-            # Run the theme through JSHint.
-            - jshint .
-            # Run the theme through JavaScript Code Style checker.
-            - jscs .
+            # Run the theme through ESLint.
+            - npm run lint
             # WordPress Coding Standards and PHPCompatibility.
             # @link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards
             # @link http://pear.php.net/package/PHP_CodeSniffer/

diff --git a/404.php b/404.php
@@ -18,7 +18,11 @@
 			<div id="primary" class="content-area">
 				<main id="main" class="site-main" role="main">
 
-					<h1><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'awps' ); ?></h1>
+					<h1>
+					<?php
+					esc_html_e( 'Oops! That page can&rsquo;t be found.', 'awps' );
+					?>
+					</h1>
 
 				</main><!-- #main -->
 			</div><!-- #primary -->

diff --git a/_config.yml b/_config.yml
diff --git a/assets/src/scripts/app.js b/assets/src/scripts/app.js
@@ -6,7 +6,7 @@
 import 'slick-carousel';
 
 // Import custom modules
-import App from'./modules/app.js';
+import App from './modules/app.js';
 import Carousel from './modules/carousel.js';
 
 const app = new App();

diff --git a/assets/src/scripts/blocks/hello-world.js b/assets/src/scripts/blocks/hello-world.js
@@ -16,15 +16,15 @@ registerBlockType( 'gutenberg-test/hello-world', {
 		}
 	},
 
-	edit( { attributes, className, isSelected, setAttributes } ) {
+	edit({ attributes, className, isSelected, setAttributes }) {
 		const { content, alignment } = attributes;
 
 		function onChangeContent( newContent ) {
-			setAttributes( { content: newContent } );
+			setAttributes({ content: newContent });
 		}
 
 		function onChangeAlignment( newAlignment ) {
-			setAttributes( { alignment: newAlignment } );
+			setAttributes({ alignment: newAlignment });
 		}
 
 		return [
@@ -47,9 +47,9 @@ registerBlockType( 'gutenberg-test/hello-world', {
 		];
 	},
 
-	save( { attributes, className } ) {
+	save({ attributes, className }) {
 		const { content, alignment } = attributes;
 
 		return <p className={ className } style={ { textAlign: alignment } }>{ content }</p>;
 	}
-} );
+});
diff --git a/assets/src/scripts/blocks/latest-post.js b/assets/src/scripts/blocks/latest-post.js
@@ -2,32 +2,32 @@ const { registerBlockType } = wp.blocks;
 const { withAPIData } = wp.components;
 
 registerBlockType( 'gutenberg-test/latest-post', {
-    title: 'Latest Post',
-    icon: 'megaphone',
-    category: 'widgets',
+	title: 'Latest Post',
+	icon: 'megaphone',
+	category: 'widgets',
 
-    edit: withAPIData( () => {
-        return {
-            posts: '/wp/v2/posts?per_page=1'
-        };
-    } )( ( { posts, className } ) => {
-        var post;
-        if ( ! posts.data ) {
-            return 'loading !';
-        }
-        if ( 0 === posts.data.length ) {
-            return 'No posts';
-        }
-        post = posts.data[ 0 ];
+	edit: withAPIData( () => {
+		return {
+			posts: '/wp/v2/posts?per_page=1'
+		};
+	})( ({ posts, className }) => {
+		var post;
+		if ( ! posts.data ) {
+			return 'loading !';
+		}
+		if ( 0 === posts.data.length ) {
+			return 'No posts';
+		}
+		post = posts.data[ 0 ];
 
-        return <a className={ className } href={ post.link }>
-            { post.title.rendered }
-        </a>;
-    } ),
+		return <a className={ className } href={ post.link }>
+			{ post.title.rendered }
+		</a>;
+	}),
 
-    save() {
+	save() {
 
-        // Rendering in PHP
-        return null;
-    }
-} );
+		// Rendering in PHP
+		return null;
+	}
+});
diff --git a/assets/src/scripts/modules/carousel.js b/assets/src/scripts/modules/carousel.js
@@ -1,20 +1,20 @@
 class Carousel {
 
-    constructor() {
-        this.init();
-    }
+	constructor() {
+		this.init();
+	}
 
-    init() {
-        $( '.fade-carousel' ).slick({
-            dots: true,
-            arrows: false,
-            autoplay: true,
-            infinite: true,
-            speed: 500,
-            fade: true,
-            cssEase: 'linear'
-        });
-    }
+	init() {
+		$( '.fade-carousel' ).slick({
+			dots: true,
+			arrows: false,
+			autoplay: true,
+			infinite: true,
+			speed: 500,
+			fade: true,
+			cssEase: 'linear'
+		});
+	}
 }
 
 export default Carousel;
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "npm run development -- --watch",
     "prod": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "lint": "eslint \"./**/*.js\""
   },
   "devDependencies": {
     "axios": "^0.18",
@@ -17,6 +18,12 @@
     "browser-sync": "^2.23.6",
     "browser-sync-webpack-plugin": "^2.0.1",
     "cross-env": "^5.1",
+    "eslint": "^5.3.0",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-promise": "^3.8.0",
+    "eslint-plugin-standard": "^3.1.0",
     "jquery": "^3.3.1",
     "laravel-mix": "^2.0",
     "lodash": "^4.17.4",
@@ -40,8 +47,7 @@
   },
   "homepage": "https://github.com/Alecaddd/awps#readme",
   "dependencies": {
-    "jscs": "^3.0.7",
-    "jshint": "^2.9.6",
+    "eslint-config-wordpress": "^2.0.0",
     "normalize-scss": "^7.0.1",
     "slick-carousel": "^1.8.1"
   }

diff --git a/ruleset.xml b/ruleset.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0"?>
+<ruleset name="AWPS PSR2 Coding Standard">
+    <description>PSR2 with tabs instead of spaces.</description>
+    <arg name="tab-width" value="4"/>
+    <rule ref="PSR2">
+        <exclude name="Generic.WhiteSpace.DisallowTabIndent"/>
+    </rule>
+    <rule ref="Generic.WhiteSpace.DisallowSpaceIndent"/>
+    <rule ref="Generic.WhiteSpace.ScopeIndent">
+        <properties>
+            <property name="indent" value="4"/>
+            <property name="tabIndent" value="true"/>
+        </properties>
+    </rule>
+    <!-- Class Name: Pascal Case -->
+    <!-- Method and property Name: Camel Case -->
+    <!-- Global functions and variables: Lower underscore case -->
+</ruleset>