build: Remove jshint/jscs, add eslint/stylelint

Change-Id: I4304ca95de7dd395676f40bcbb35a447c039ba21

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+	"extends": "wikimedia",
+	"env": {
+		"browser": true,
+		"jquery": true,
+		"qunit": true
+	},
+	"globals": {
+		"mediaWiki": false,
+		"OO": false
+	},
+	"rules": {
+		"dot-notation": [ "error", { "allowKeywords": true } ]
+	}
+}

.jscsrc

@@ -1,3 +0,0 @@
-{
-	"preset": "wikimedia"
-}

.jshintignore

@@ -1,5 +0,0 @@
-node_modules/
-vendor/
-
-# 3rd party lib
-modules/ace/

.jshintrc

@@ -1,30 +0,0 @@
-{
-	// Enforcing
-	"bitwise": true,
-	"curly": true,
-	"eqeqeq": true,
-	"freeze": true,
-	"latedef": true,
-	"immed": true,
-	"newcap": true,
-	"noarg": true,
-	"noempty": true,
-	"nonew": true,
-	"quotmark": "single",
-	"strict": false,
-	"trailing": true,
-	"undef": true,
-	"unused": true,
-
-	// Relaxing
-	"es5": false,
-
-	// Environment
-	"browser": true,
-	"jquery": true,
-
-	"globals": {
-		"mediaWiki": false,
-		"OO": false
-	}
-}

.stylelintrc

@@ -0,0 +1,3 @@
+{
+	"extends": "stylelint-config-wikimedia"
+}

Gruntfile.js

@@ -4,27 +4,30 @@
  * @package CodeEditor
  */
 
-/*jshint node:true */
+/* eslint-env node */
+
 module.exports = function ( grunt ) {
 	var conf = grunt.file.readJSON( 'extension.json' );
-	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
-	grunt.loadNpmTasks( 'grunt-jsonlint' );
 	grunt.loadNpmTasks( 'grunt-banana-checker' );
-	grunt.loadNpmTasks( 'grunt-jscs' );
+	grunt.loadNpmTasks( 'grunt-eslint' );
+	grunt.loadNpmTasks( 'grunt-stylelint' );
+	grunt.loadNpmTasks( 'grunt-jsonlint' );
 
 	grunt.initConfig( {
-		jshint: {
+		eslint: {
-			options: {
-				jshintrc: true
-			},
 			all: [
 				'**/*.js',
 				'!node_modules/**',
 				'!modules/ace/**'
 			]
 		},
-		jscs: {
+		stylelint: {
-			src: '<%= jshint.all %>'
+			all: [
+				'**/*.css',
+				'**/*.less',
+				'!node_modules/**',
+				'!modules/ace/**'
+			]
 		},
 		banana: conf.MessagesDirs,
 		jsonlint: {
@@ -35,6 +38,6 @@ module.exports = function ( grunt ) {
 		}
 	} );
 
-	grunt.registerTask( 'test', [ 'jshint', 'jscs', 'jsonlint', 'banana' ] );
+	grunt.registerTask( 'test', [ 'eslint', 'stylelint', 'jsonlint', 'banana' ] );
 	grunt.registerTask( 'default', 'test' );
 };

modules/jquery.codeEditor.js

@@ -661,6 +661,9 @@
 		/**
 		 * Override the base functions in a way that lets
 		 * us fall back to the originals when we turn off.
+		 *
+		 * @param {Object} base
+		 * @param {Object} extended
 		 */
 		saveAndExtend = function ( base, extended ) {
 			$.map( extended, function ( func, name ) {
@@ -724,6 +727,8 @@
 			/**
 			 * Gets the currently selected text in the content
 			 * DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
+			 *
+			 * @return {string}
 			 */
 			getSelection: function () {
 				return context.codeEditor.getCopyText();
@@ -733,6 +738,9 @@
 			 * Inserts text at the begining and end of a text selection, optionally inserting text at the caret when
 			 * selection is empty.
 			 * DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
+			 *
+			 * @param {Object} options
+			 * @return {jQuery}
 			 */
 			encapsulateSelection: function ( options ) {
 				var sel, range, selText, isSample, text;
@@ -776,6 +784,7 @@
 			 * DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
 			 *
 			 * @param {Object} options
+			 * @return {jQuery}
 			 */
 			setSelection: function ( options ) {
 				var doc, lines, offsetToPos, start, end, sel, range;
@@ -814,6 +823,8 @@
 			/**
 			 * Scroll a textarea to the current cursor position. You can set the cursor position with setSelection()
 			 * DO NOT CALL THIS DIRECTLY, use $.textSelection( 'functionname', options ) instead
+			 *
+			 * @return {jQuery}
 			 */
 			scrollToCaretPosition: function () {
 				mw.log( 'codeEditor stub function scrollToCaretPosition called' );

modules/jquery.codeEditor.less

@@ -1,4 +1,4 @@
-@import "mediawiki.mixins";
+@import 'mediawiki.mixins';
 
 .group-codeeditor-format,
 .group-codeeditor-style,
@@ -16,20 +16,23 @@
 	display: block;
 }
 
+/* stylelint-disable no-descending-specificity */
 .group-codeeditor-main,
 .group-codeeditor-format,
 .group-codeeditor-style {
 	.tool {
 		opacity: 0.7;
+		/* stylelint-disable-next-line declaration-no-important */
 		background-position: 1px 1px !important;
 		&.icon-active {
 			opacity: 1;
 		}
 	}
 }
+/* stylelint-enable no-descending-specificity */
 
 // TODO: Use this icon from OOUI
-.group-codeeditor-main .tool[rel=codeEditor] {
+.group-codeeditor-main .tool[rel='codeEditor'] {
 	.background-image-svg( '../images/code.svg', '../images/code.png' );
 	&.icon-active {
 		.background-image-svg( '../images/code-progressive.svg', '../images/code-progressive.png' );
@@ -37,17 +40,17 @@
 }
 
 // TODO: Use this icon from OOUI
-.codeEditor-ui-toolbar .tool[rel=indent] {
+.codeEditor-ui-toolbar .tool[rel='indent'] {
 	.background-image-svg( '../images/indent.svg', '../images/indent.png' );
 }
 
 // TODO: Use this icon from OOUI
-.codeEditor-ui-toolbar .tool[rel=outdent] {
+.codeEditor-ui-toolbar .tool[rel='outdent'] {
 	.background-image-svg( '../images/outdent.svg', '../images/outdent.png' );
 }
 
 // TODO: Upstream this icon to OOUI and use it from there
-.codeEditor-ui-toolbar .tool[rel=invisibleChars] {
+.codeEditor-ui-toolbar .tool[rel='invisibleChars'] {
 	.background-image-svg( '../images/pilcrow.svg', '../images/pilcrow.png' );
 	&.icon-active {
 		.background-image-svg( '../images/pilcrow-progressive.svg', '../images/pilcrow-progressive.png' );
@@ -55,7 +58,7 @@
 }
 
 // TODO: Upstream this icon to OOUI and use it from there
-.codeEditor-ui-toolbar .tool[rel=lineWrapping] {
+.codeEditor-ui-toolbar .tool[rel='lineWrapping'] {
 	.background-image-svg( '../images/wrapping.svg', '../images/wrapping.png' );
 	&.icon-active {
 		.background-image-svg( '../images/wrapping-progressive.svg', '../images/wrapping-progressive.png' );
@@ -63,12 +66,12 @@
 }
 
 // TODO: Upstream this icon to OOUI and use it from there
-.codeEditor-ui-toolbar .tool[rel=gotoLine] {
+.codeEditor-ui-toolbar .tool[rel='gotoLine'] {
 	.background-image-svg( '../images/gotoLine.svg', '../images/gotoLine.png' );
 }
 
 // TODO: Use this icon from OOUI
-.codeEditor-ui-toolbar .tool[rel=toggleSearchReplace] {
+.codeEditor-ui-toolbar .tool[rel='toggleSearchReplace'] {
 	.background-image-svg( '../images/find.svg', '../images/find.png' );
 }
 
@@ -79,8 +82,8 @@
 .codeEditor-status {
 	clear: both;
 	width: 100%;
-	background-color: #F0F0F0;
+	background-color: #f0f0f0;
-	border-top: 1px solid silver;
+	border-top: 1px solid #c0c0c0;
 	display: table;
 }
 
@@ -93,18 +96,14 @@
 	user-select: none;
 	cursor: pointer;
 	display: table-cell;
-	*float: left;
-	*width: 10em;
 }
 
 .codeEditor-status-message {
-	border-left: 1px solid silver;
+	border-left: 1px solid #c0c0c0;
-	border-right: 1px solid silver;
+	border-right: 1px solid #c0c0c0;
 	padding: 0 0.3em;
 	width: 100%;
 	display: table-cell;
-	*float: left;
-	*width: auto;
 }
 
 .codeEditor-status-line {
@@ -112,6 +111,4 @@
 	text-align: right;
 	white-space: nowrap;
 	display: table-cell;
-	*float: right;
-	*width: 4em;
 }

package.json

@@ -7,10 +7,12 @@
     "test": "grunt test"
   },
   "devDependencies": {
+    "eslint-config-wikimedia": "0.3.0",
     "grunt": "1.0.1",
-    "grunt-contrib-jshint": "1.0.0",
     "grunt-banana-checker": "0.5.0",
-    "grunt-jscs": "2.3.0",
+    "grunt-eslint": "19.0.0",
-    "grunt-jsonlint": "1.1.0"
+    "grunt-jsonlint": "1.1.0",
+    "grunt-stylelint": "0.6.0",
+    "stylelint-config-wikimedia": "0.3.0"
   }
 }