How do i configure eslint or prettier to ignore inline comment?

Question

How can I get prettier or eslint to leave comments on same line with code. This is what I have:

/'use strict'; // code assumes ECMAScript 6

When I run prettier and eslint, I get this:

'use strict';

// code assumes ECMAScript 6

How can I configure either to leave the code with the comment on same line?

Answer 1

ESLint is the Culprit that's responsible for Moving the Inline Comments

---

You can configure ESLint using one of many different configuration, to customize how comments are formatted, and linted, in your JavaScript/TypeScript code base. Here are the rules to use, and what they do.

Personally, I would try added all three settings for maximum control over inline comments in your environment, but I would start with the last rule I explained, which is Number 3: "Max Length.

Please Note: "All rules below should be added to the rules obj-property in your .eslintrc.* file."

---

No. 1  |  "No Inline Comments"

    "no-inline-comments": "off"

• This rule will ENABLE or DISABLE inline comments in your code
  • use "off" to enable inline comments
  • Alternativly, assigning "error" to the rule will disable incline comments

---

No. 2  |  "Line Comment Position Rule"

    "line-comment-position": [
        "error", 
        { "position": "beside" }
    ]

• This rule allows the user to define where comments should be placed. Its important that it is configured correctly (or not used at all), if your worried about inline-comments being disabled
  • use "off" to disable this rule.
  • Alternativly, assigning "error" to the rule will enforce the configuration you are using for the position property.

The "position" option has two settings:

• "above" - "Above is the default value, it enforces line comments to be placed above code only (e.g. on its own line)."
• "beside" - "Beside enforces that Line comments must be placed beside code (in other words, comments must be inline)."

---

No. 3  |  "Max Length Rule"

    "max-len": [
        "error", 
        { "ignoreTrailingComments": true }
    ]

• ESLint's "Max Length Rule"* (aka max-len) is most often used for setting the maximum amount of characters that a line can contain, in other words; it sets the length of the lines in your code. Most likely, you already have this in your eslintrc.* configuration file. If you do, make sure to integrate any changes to work with your pre-existing configuration.
  • use "off" to disable this rule.
  • Alternativly, assigning "error" to the rule will enforce the configuration you are using for the position property.

The following documentation is borrowed from the Official ESLint docs, it shows the configuration properties that can be assigned to the "max-len" object.

• "code" (default 80) enforces a maximum line length
• "tabWidth" (default 4) specifies the character width for tab characters
• "comments" enforces a maximum line length for comments; defaults to value of code
• "ignorePattern" ignores lines matching a regular expression; can only match a single line and need to be double escaped when written in YAML or JSON
• "ignoreComments": true ignores all trailing comments and comments on their own line
• "ignoreTrailingComments": true ignores only trailing comments
• "ignoreUrls": true ignores lines that contain a URL
• "ignoreStrings": true ignores lines that contain a double-quoted or single-quoted string
• "ignoreTemplateLiterals": true ignores lines that contain a template literal
• "ignoreRegExpLiterals": true ignores lines that contain a RegExp literal

---

I posted everything in a block so you can see all the properties, incase you are using a few.

---

NOW HERE IS THE DEAL The property "code" sets the length that your code is allowed to be. If you havn't added this property, then it is defaulting to 80, as shown above.

!! IMPORTANT !!

• IF YOUR INLINE COMMENTS EXCEED THE VALUE SET BY CODE THEY WILL BE WRAPPED TO THE NEXT LINE BY PRETTIER

TO PREVENT THE WRAPPING OF INLINE COMMENTS

Add the setting "ignoreTrailingComments": true

You may find that this alone solves your issue.

---