ESLint & Prettier both Support Inline Comments
The problem isn't the formatter or linter, its your "extends" field, among other issues.
Your using a slightly complex configuration. You added a plug-in that harmonizes ESLint & Prettier such that the can be used as if they were a single tool (which is great). You also have extended your rule-set to adhere to a very nit-picky style-guide, not that a nit-picky style guide is bad, but the style-guide needs to format the code in a way that works for you. I'll get straight to the point, and inform you that...
@see airbnb/javascript GitHub Repo → Rules: 18.3 & 18.4
When you use a rule-set, you need to know what it does. The links above will take you to the Air-bnb JS style-guides official documentation. That documentation would have probably contained enough information for you to have answered this question yourself. Now you know, if you didn't before.
Get rid of the Air-bnb Style-guide
Obviously, air-bnb isn't a good choice for someone who wants to be able to write inline comments in there code. Personally, the only reason I think any style-guide as strict as air-bnb's guide, should be followed, is when working on a project that has many people contributing to it.
How to know when to switch style-guides?
If you find that your adding more than 3 or 4 rules to your ESLint's configuration file, that is a good indication that maybe the style-guide your using isn't for you. A style-guide should be a quick and easy way to configure your editor, if its not, and your project isn't a group project, why use one?
For this answer, I am going to suggest an "extends" configuration that supports inline-comments, and it is also ESLint's go to rule-set. @See the snippet below.
works for, which might be a custom style-guide. A good rounded base is the following:
** "extends": ["eslint:recommended"]**
The Prettier ESLint Plugin
You are also extending a configuration recommended by a plugin, to be honest, you need to know where your at with your rules, so what you want to do here, is follow the advice of the ESLint-Plugin-Prettier package's documentation. If you read the packages README.md document it clearly states the following:
Exactly what does plugin:prettier/recommended do? Well, this is what it expands to:
{
"extends": ["prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
What the quote above is saying, is that the snippet in the quote is the same as adding...
"extends": ["prettier", "plugin:prettier/recommended"]
Therefore, the configuration you should be using, is as follows:
{
"extends": ["eslint:recommended", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off"
}
}
Now We Can Configure the Rules that affect Inline-Comments
This is the "rules" field in a .eslintrc.json file. Don't add this configuration, just have a look.
"rules": {
"no-inline-comments": "off", // Disable the rule that disables inline comments
"max-len": [
"error",
{
"code": 80, // Set to what ever you desire
"tabWidth": 4, // Set to what ever you desire
/* The two rules below are important, they configure ESLint such that
the value you assign to the `"code": 80` field above doesn't apply
to inline comments. So your inline comment won't get chopped at, or
moved if it is too long. Set the following two fields to `true`. */
"ignoreTrailingComments": true,
"ignoreComments": true,
}
]
}
Final eslintrc.json configuration
This is the configuration you should end up with:
{
"extends": ["eslint:recommended", "prettier"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"arrow-body-style": "off",
"prefer-arrow-callback": "off",
"no-inline-comments": "off",
"max-len": [
"error",
{
"code": 80,
"tabWidth": 4,
"ignoreTrailingComments": true,
"ignoreComments": true
}
]
}
}
PRETTIER CONFIGURATION
In your prettier configuration, if you set a value for printWidth
{
"printWidth": 80, // <-- as shown here
}
prettier will move your inline comments to another line, &/or break them up into pieces if they are longer (more characters than) the value assigned to "printWidth", therefore, if you don't want your comments hacked at, or moved, set printWidth to a ridiculously high value, something like what is shown below:
/** @file "./.prettierrc" */
{
"printWidth": 1000
}
If you follow the directions above, you will not only lint/format your code with support for inline-comments, but you will be in control of your configuration from this time forward.
