From b7fbc7b6dfcc8a7acd02f717b935430ee26a3f4f Mon Sep 17 00:00:00 2001 From: Christopher Banh Date: Wed, 23 Dec 2015 17:13:55 -0800 Subject: [PATCH 1/5] Add section 18.12 on line length --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/README.md b/README.md index 778749e388..e6280b8ba6 100644 --- a/README.md +++ b/README.md @@ -1692,6 +1692,31 @@ Other Style Guides // good const foo = { clark: 'kent' }; ``` + - [18.12](#18.12) Avoid having lines of code that are longer than 100 characters (including whitespace). + > Why? This ensures readability and maintainability. + + eslint rules: [`max-len`](http://eslint.org/docs/rules/max-len.html). + + ```javascript + // bad + const foo = 'Whatever national crop flips the window. The cartoon reverts within the screw. Whatever wizard constrains a helpful ally. The counterpart ascends!'; + + // bad + $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.')); + + // good + const foo = 'Whatever national crop flips the window. The cartoon reverts within the screw. ' + + 'Whatever wizard constrains a helpful ally. The counterpart ascends!'; + + // good + $.ajax({ + method: 'POST', + url: 'https://airbnb.com/', + data: { name: 'John' }, + }) + .done(() => console.log('Congratulations!')) + .fail(() => console.log('You have failed this city.')); + ``` **[⬆ back to top](#table-of-contents)** From d11f2663c53b5250499975b8c9d18666425de19f Mon Sep 17 00:00:00 2001 From: Christopher Banh Date: Wed, 23 Dec 2015 17:34:18 -0800 Subject: [PATCH 2/5] Update .jshintrc with new line length --- linters/.jshintrc | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/linters/.jshintrc b/linters/.jshintrc index 141067fd23..4d3468cb21 100644 --- a/linters/.jshintrc +++ b/linters/.jshintrc @@ -34,8 +34,8 @@ // Prohibit use of a variable before it is defined. "latedef": true, - // Enforce line length to 80 characters - "maxlen": 80, + // Enforce line length to 100 characters + "maxlen": 100, // Require capitalized names for constructor functions. "newcap": true, From 69d3327362ae504e8535fa1019f760d532a9e8a0 Mon Sep 17 00:00:00 2001 From: Christopher Banh Date: Wed, 23 Dec 2015 17:39:05 -0800 Subject: [PATCH 3/5] Enable ESLint rule on limiting maxiumum length of line (max-len) I moved the rule from legacy.js to style.js and enabled it --- packages/eslint-config-airbnb/rules/legacy.js | 2 -- packages/eslint-config-airbnb/rules/style.js | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/rules/legacy.js b/packages/eslint-config-airbnb/rules/legacy.js index 1d0c518316..e94c774f26 100644 --- a/packages/eslint-config-airbnb/rules/legacy.js +++ b/packages/eslint-config-airbnb/rules/legacy.js @@ -2,8 +2,6 @@ module.exports = { 'rules': { // specify the maximum depth that blocks can be nested 'max-depth': [0, 4], - // specify the maximum length of a line in your program - 'max-len': [0, 80, 4], // limits the number of parameters that can be used in the function declaration. 'max-params': [0, 3], // specify the maximum number of statement allowed in a function diff --git a/packages/eslint-config-airbnb/rules/style.js b/packages/eslint-config-airbnb/rules/style.js index e65e0f3e08..928dac8266 100644 --- a/packages/eslint-config-airbnb/rules/style.js +++ b/packages/eslint-config-airbnb/rules/style.js @@ -34,6 +34,8 @@ module.exports = { 'lines-around-comment': 0, // disallow mixed 'LF' and 'CRLF' as linebreaks 'linebreak-style': 0, + // specify the maximum length of a line in your program + "max-len": [2, 100, 4], // specify the maximum depth callbacks can be nested 'max-nested-callbacks': 0, // require a capital letter for constructors From f1c249bcd35141f72b3b4e72dae0df210119e9fe Mon Sep 17 00:00:00 2001 From: Christopher Banh Date: Wed, 23 Dec 2015 17:44:57 -0800 Subject: [PATCH 4/5] Reword section 6.2 to recognize the line length --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e6280b8ba6..ccffd213e4 100644 --- a/README.md +++ b/README.md @@ -421,7 +421,7 @@ Other Style Guides const name = 'Capt. Janeway'; ``` - - [6.2](#6.2) Strings longer than 100 characters should be written across multiple lines using string concatenation. + - [6.2](#6.2) Strings that cause the line to go over 100 characters should be written across multiple lines using string concatenation. - [6.3](#6.3) Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). ```javascript From e2e4724fbb079c0dc18481bd10443323df2838c1 Mon Sep 17 00:00:00 2001 From: Christopher Banh Date: Thu, 24 Dec 2015 02:01:51 -0800 Subject: [PATCH 5/5] Address comments in #639 [eslint] Add comment above `max-len` rule with link to its docs [eslint] Change tab width for `max-len` rule from 4 to 2 [eslint] Replace double quotes around `max-len` with single quotes [eslint] Use object form of `max-len` and include all of the options --- packages/eslint-config-airbnb/rules/style.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/style.js b/packages/eslint-config-airbnb/rules/style.js index 928dac8266..46bd38a62b 100644 --- a/packages/eslint-config-airbnb/rules/style.js +++ b/packages/eslint-config-airbnb/rules/style.js @@ -35,7 +35,17 @@ module.exports = { // disallow mixed 'LF' and 'CRLF' as linebreaks 'linebreak-style': 0, // specify the maximum length of a line in your program - "max-len": [2, 100, 4], + // https://github.com/eslint/eslint/blob/master/docs/rules/max-len.md + 'max-len': [2, { + 'code': 100, + 'comments': 100, + 'commentLength': 100, + 'tabWidth': 2, + 'ignoreUrls': false, + 'ignorePattern': null, + 'ignoreTrailingComments': false, + 'ignoreComments': false + }], // specify the maximum depth callbacks can be nested 'max-nested-callbacks': 0, // require a capital letter for constructors