Set max line length for JavaScript code comments to 80 (rather than 100)

Created on 19 November 2017, over 6 years ago
Updated 25 April 2024, about 2 months ago

Problem/Motivation

The AirBnB standards specify avoiding line length of more than 100 characters:
https://github.com/airbnb/javascript#whitespace--max-len

However, core's line length is 80 characters (required for comments and loosely followed for code when possible).

@drpal pointed out that our JS can have separate documentation standards than PHP, which makes sense, However:

  • This particular rule is very ingrained for Drupal (because of our IDE configurations, window settings, etc.) and already widely used in our JS.
  • We still usually ask contributors to wrap lines at 80 characters. E.g. in #2924351: Fix coding standards issues with existing settings tray JavaScript โ†’ , @drpal also started rewrapping docblocks to 80.
  • It's always best for the coding standards we ask of contributors to be automatically enforced by our ruleset, so contributors can rely on tools rather than memory and don't get seemingly arbitrary reviews on their codestyle.
  • A shorter line length of up to 80 characters still complies with a recommended length of no more than 100 characters. :)

Proposed resolution

Update the ruleset to override this rule to 80 characters rather than 100.

Remaining tasks

Review
Commit

testing

Attached patch tries to implement this by copying from https://github.com/airbnb/javascript/blob/7ff6303513b46e8b7dd0bc03327b13... but adding a shorter line length for comments.

I couldn't figure out how to just add the "comment" key and let the rest inherit from the AirBnB ruleset, but maybe there's a way to do that.

This is what an overlong line says in HEAD:

   146:1   error    Line 146 exceeds the maximum line length of 100                                                                                                                        max-len

With the patch you get two types of messages:

      146:1   error    Line 146 exceeds the maximum line length of 100                                                                                                                        max-len
   187:1   error    Line 187 exceeds the maximum comment line length of 80                                                                                                                 max-len
๐Ÿ“Œ Task
Status

Needs work

Version

11.0 ๐Ÿ”ฅ

Component
Javascriptย  โ†’

Last updated about 6 hours ago

  • Maintained by
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom @justafish
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance @nod_
Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States xjm

Live updates comments and jobs are added and updated live.
  • Coding standards

    It involves compliance with, or the content of coding standards. Requires broad community agreement.

  • Novice

    It would make a good project for someone who is new to the Drupal contribution process. It's preferred over Newbie.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    This will need to be updated for D10

    Tagged for novice for beginner developers.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia _utsavsharma

    Patch for 10.1.x.

  • First commit to issue fork.
  • Status changed to Needs review over 1 year ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Prem Suthar gujrat
  • ๐Ÿ‡ณ๐Ÿ‡ฟNew Zealand quietone New Zealand

    @rifas-ali-pbi, The issue is using a patch based work flow and creating a fork is not needed. Therefor, credit has been removed per How is credit granted for Drupal core issues โ†’ .

    What pages, if any, of the JavsaScript coding standards โ†’ need to be updated.

    Has this change been tested on Drupal 10?

  • Status changed to Needs work over 1 year ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Tried testing by editing ajax.js

    Extending a comment to 85 characters and running code-commit-check it didn't flag it.

    So not sure why it's not working.

  • Status changed to Needs review 9 months ago
  • last update 9 months ago
    Custom Commands Failed
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Gauravvv Delhi, India

    We need to modify the .eslintrc.passing.json file as well with the max-len. I have updated the file and now it is working as expected. Attached interdiff for same.

    Desktop/dev/drupal/core/misc/ajax.js
        9:1  error  This line has a comment length of 215. Maximum allowed is 80  max-len
      227:1  error  This line has a comment length of 82. Maximum allowed is 80   max-len
      330:1  error  This line has a comment length of 88. Maximum allowed is 80   max-len
      616:1  error  This line has a comment length of 82. Maximum allowed is 80   max-len
      828:1  error  This line has a comment length of 99. Maximum allowed is 80   max-len
  • Status changed to Needs work 9 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave
  • Sam Phillemon โ†’ made their first commit to this issueโ€™s fork.

  • Merge request !7601adding max-length to 80 chars โ†’ (Open) created by Sam Phillemon
  • I have added the changes suggested in #27 in the file '.eslintrc.passing.json'. Also, I am seeing a lot of files get affected because of this max-len check. I am unsure whether this needs to be fixed as part of this issue or if it needs to be taken care of separately. It would be great if someone could suggest what approach is required. Below is just a sample of how the error looks for one of the files:

    /Users/sam/workspace/project/drupal/core/modules/views_ui/js/views-admin.js
       224:1  error  This line has a length of 82. Maximum allowed is 80  max-len
       239:1  error  This line has a length of 81. Maximum allowed is 80  max-len
       537:1  error  This line has a length of 82. Maximum allowed is 80  max-len
       538:1  error  This line has a length of 81. Maximum allowed is 80  max-len
       547:1  error  This line has a length of 91. Maximum allowed is 80  max-len
       568:1  error  This line has a length of 82. Maximum allowed is 80  max-len
       742:1  error  This line has a length of 81. Maximum allowed is 80  max-len
       770:1  error  This line has a length of 83. Maximum allowed is 80  max-len
       849:1  error  This line has a length of 82. Maximum allowed is 80  max-len
       937:1  error  This line has a length of 82. Maximum allowed is 80  max-len
      1027:1  error  This line has a length of 82. Maximum allowed is 80  max-len
      1030:1  error  This line has a length of 82. Maximum allowed is 80  max-len
    
  • Status changed to Needs review about 2 months ago
  • Status changed to Needs work about 2 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    "The source branch is 2480 commits behind the target branch."

    needs a rebase.

  • Status changed to Needs review about 2 months ago
  • I have rebased the branch as well. Now it is up to date.

  • Pipeline finished with Success
    about 2 months ago
    Total: 1082s
    #153031
  • Status changed to Needs work about 2 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    Left a comment. Probably fine to self RTBC after the one change.

  • Pipeline finished with Success
    about 2 months ago
    Total: 991s
    #153954
  • Status changed to RTBC about 2 months ago
  • Status changed to Needs work about 2 months ago
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom alexpott ๐Ÿ‡ช๐Ÿ‡บ๐ŸŒ

    We need to update the .gitlab-ci.yml file we need to add core/.eslint* to the list of changes in '๐Ÿงน JavaScript linting (eslint)':

          changes:
            - core/package.json
            - core/yarn.lock
            - "**/*.js"
            - "**/*.yml"
    
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom alexpott ๐Ÿ‡ช๐Ÿ‡บ๐ŸŒ

    See how the eslint job now would fail the moment we have a js change in an issue... https://git.drupalcode.org/issue/drupal-2924755/-/jobs/1402860

  • Pipeline finished with Failed
    about 2 months ago
    Total: 176s
    #156058
  • @alexpott - I've made the suggested changes to the .gitlab-ci.yml file, but unfortunately, the eslint job is still failing. Could you kindly confirm whether the proposed changes are correct or if there's something I might be overlooking?

  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom alexpott ๐Ÿ‡ช๐Ÿ‡บ๐ŸŒ

    @Sam Phillemon the eslint job is failing because you've changed the rules and the code is no longer compliant. So the js code needs fixing... The build was green before because the eslint job was not running when it should because you're changing the eslint files.

  • @alexpott Ah, now I understand what you're saying. It caught me off guard a bit when I noticed the build was green. Thank You!

    I've noticed a significant number of files have been affected by this max-len check (as mentioned in #31), and I'm unsure whether resolving this should be included in this particular issue or handled separately. Therefore, I'm uncertain about the appropriate procedure.

Production build 0.69.0 2024