Turning off eslint rule for a specific file - configuration

Is it possible to turn off the eslint rule for the whole file? Something such as:
// eslint-disable-file no-use-before-define
(Analogous to eslint-disable-line.) It happens to me quite often, that in a certain file, I'm breaking a specific rule on many places which is considered OK for that file, but I don't want to disable the rule for the whole project nor do I want to disable other rules for that specific file.

You can turn off/change a particular rule for a file by putting the configurations at the top of the file.
/* eslint no-use-before-define: 0 */ // --> OFF
or
/* eslint no-use-before-define: 2 */ // --> ON
More info

To disable a specific rule for the file:
/* eslint-disable no-use-before-define */
Note there is a bug in eslint where single line comment will not work -
// eslint-disable max-classes-per-file
// This fails!
Check this post

Let's have a breakdown of the scenarios, like you always do, dear awesome developer!
Here are two questions to ask yourself, first.
Question One: How many "rules" do you want to ignore?
All Rules
One or more Specific Rules (e.g. quotes or semi)
Question Two: How many "lines/files" do you want to ignore?
One or more Lines
All lines in one or more Files
Everywhere
Now, based on the your answers, there are 2 × 3 = 6 cases.
1) Disabling "All rules"
Case 1.1: You want to disable "All Rules" for "One or more Lines"
Two ways you can do this:
Put /* eslint-disable-line */ at the end of the line(s),
or /* eslint-disable-next-line */ right before the line.
Case 1.2: You want to disable "All Rules" for "One File"
Put the comment of /* eslint-disable */ at the top of the file.
Case 1.3: You want to disable "All rules" for "Some Files"
There are 3 ways you can do this:
You can go with 1.2 and add /* eslint-disable */ on top of the files, one by one.
You can put the file name(s) in .eslintignore. This works well, especially if you have a path that you want to be ignored. (e.g. apidoc/**)
Alternatively, if you don't want to have a separate .eslintignore file, you can add
"eslintIgnore": ["file1.js", "file2.js"] in package.json as
instructed here.
2) Disabling "Some Rules"
Case 2.1: You want to disable "Some Rules" for "One or more Lines"
Two ways you can do this:
You can put /* eslint-disable-line quotes */ (replace quotes with your rules) at the end of the line(s),
or /* eslint-disable-next-line no-alert, quotes, semi */ before the line.
Pro Tip: if you have multiple lines that you want to ignore the same rule(s) for, you can disable and enable the rules like this:
// Assume these lines are long engouh that max-len is gonna trigger
/* eslint-disable max-len */
console.log("I am a loooooooooo...ooooong line 1, but eslint doesn't bug!");
console.log("I am a loooooooooo...ooooong line 2, but eslint doesn't bug!");
console.log("I am a loooooooooo...ooooong line 3, but eslint doesn't bug!");
/* eslint-enable max-len */
console.log("I am a loooooooooo...ooooong line 4, AND eslint's GONNA CRY!"); // <--- eslint is gonna cry over this one only!
Case 2.2: You want to disable "Some Rules" for "One File"
Put the /* eslint-disable no-use-before-define */ comment at the top of the file.
More examples here.
Case 2.3: You want to disable "Some Rules" for "Some files"
This is less straightforward. You should create an "overrides" section in your .eslintrc and specify which rules should be disabled/modified for which globs/files. An example can be found in this answer.

You can tell ESLint to ignore specific files and directories by creating an .eslintignore file in your project’s root directory:
.eslintignore
build/*.js
config/*.js
bower_components/foo/*.js
The ignore patterns behave according to the .gitignore specification.
(Don't forget to restart your editor.)

You can also disable/enable a rule like this:
/* eslint-disable no-use-before-define */
... code that violates rule ...
/* eslint-enable no-use-before-define */
Similar to eslint-disable-line as mentioned in the question. It might be a better method if you don't want to have to restore a complicated rule configuration when re-enabling it.

It's better to add "overrides" in your .eslintrc.js config file.
For example if you wont to disable camelcase rule for all js files ending on Actions add this code after rules scope in .eslintrc.js.
"rules": {
...........
},
"overrides": [
{
"files": ["*Actions.js"],
"rules": {
"camelcase": "off"
}
}
]

To temporarily disable rule warnings in your file, use block comments in the following format:
/* eslint-disable */
This will disable ESLint until the
/* eslint-enable */
comment is reached.
You can read more about this topic here.

To disable specific rules for file(s) inside folder(s), you need to use the "overrides" key of your .eslintrc config file.
For example, if you want to remove the following rules:
no-use-before-define
max-lines-per-function
For all files inside the following main directory:
/spec
You can add this to your .eslintrc file...
"overrides": [
{
"files": ["spec/**/*.js"],
"rules": {
"no-use-before-define": ["off"],
"max-lines-per-function": ["off"]
}
}
]
Note that I used ** inside the spec/**/*.js glob, which means I am looking recursively for all subfolders inside the folder called spec and selecting all files that ends with js in order to remove the desired rules from them.

Accepted answer didn't work for me (maybe a different version of eslint...? I'm using eslint v3.19.0), but did find a solution with the following...
Place the following on the top of your file
/* eslint-disable no-use-before-define */
This will disable the rule for the entire file

/* eslint-disable */
//suppress all warnings between comments
alert('foo');
/* eslint-enable */
This will disable all eslint rules within the block.

Simple and effective.
Eslint 6.7.0 brought "ignorePatterns" to write it in .eslintrc.json like this example:
{
"ignorePatterns": ["fileToBeIgnored.js"],
"rules": {
//...
}
}
See docs

If you want to disable ESLint for one rule, you can add this to the top of the file:
/* eslint-disable NAME_OF_THE_RULE */
If you want to disable ESLint or TypeScript checks inside a file, you can add these lines at the top of the file. The first one will disable TypeScript checks, and the second one ESLint checks.
// #ts-nocheck
/* eslint-disable */

you can configure eslint overrides property to turn off specific rules on files which matches glob pattern like below.
Here, I want to turn off the no-duplicate-string rule for tests all files.
overrides: [
{
files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
rules: {
'sonarjs/no-duplicate-string': 'off'
}
}
]

You can just put this for example at the top of the file:
/* eslint-disable no-console */

As of today, the answer does not work for me, but putting this at the top of the file does work:
/* eslint-disable #typescript-eslint/no-unused-vars */
It is important to know that at least in my case, the type of comment makes a difference. The previous comment works for me, but the following won't work:
// eslint-disable #typescript-eslint/no-unused-vars

Just add this to the top of your file.
This disables all eslint warnings respectively.
/* eslint-disable */

You can turn off specific rule for a file by using /*eslint [<rule: "off"], >]*/
/* eslint no-console: "off", no-mixed-operators: "off" */
Version: eslint#4.3.0

Simply create an empty file .eslintignore in your project root the type the path to the file you want it to be ignore.
Source: https://eslint.org/docs/2.13.1/user-guide/configuring#:~:text=To%20disable%20rule%20warnings%20in,*%2F%20alert('foo')%3B
Line Ignoring Files and Directories

To temporarily disable rule warnings in your file, use block comments in the following format:
/* eslint-disable */
alert('foo');
/* eslint-enable */
You can also disable or enable warnings for specific rules:
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console /
To disable rule warnings in an entire file, put a / eslint-disable */ block comment at the top of the file:
/* eslint-disable */
alert('foo');
You can also disable or enable specific rules for an entire file:
/* eslint-disable no-alert */
alert('foo');
To disable all rules on a specific line, use a line comment in one of the following formats:
Following are some examples to disable ESLint for a page
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
To disable a specific rule on a specific line:
alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');
To disable multiple rules on a specific line:
alert('foo'); // eslint-disable-line no-alert, quotes, semi
// eslint-disable-next-line no-alert, quotes, semi
alert('foo');
Do following steps to disable ESLint from your project
open package.config file in your project.
remove all dependencies related to ESLint.
remove eslint.js/eslintconfig files from your project
run command npm install
now run your project

Related

Next.js build fails using <img> tag [duplicate]

This question already has answers here:
Error: Do not use <img>. Use Image from 'next/image' instead. - Next.js using html tag <img /> ( with styled components )
(3 answers)
Closed 11 months ago.
I recently started making websites with Next.js, and I have been using a mix of Image and img for various use cases.
I know that Image is built-in to Next.js and is the better choice, but there are scenarios where I do not know the size or the ratio of the images I am loading, and thus the img seems to better suit.
During my recent project, this is the first time my npm run build command is failing with:
1:7 Error: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.
My other Next.js projects do not fail this way, and use the same next.config.js. Does anyone know why this is happening?
This is due to the new Next.js release, which has integrated ESLint with its own set of rules to enforce that <Image> should always be used. Your other projects don't fail because probably you are not using Next.js v11, or they may have their own ESLint config, where you haven't extended next. Ref.: nextjs.org/docs/basic-features/eslint
You can ignore linting during build by this:
// next.config.js
module.exports = {
eslint: { ignoreDuringBuilds: true },
// your other settings here ...
}
If you want to specifically disable the rule for a file or just a line do this: (can be done in two clicks if using ESLint extension in VSCode)
{/* eslint-disable-next-line #next/next/no-img-element */}
<img ... //>
// for whole file, add this to top:
/* eslint-disable #next/next/no-img-element */
// for a section:
/* eslint-disable #next/next/no-img-element */
// your code here...
/* eslint-enable #next/next/no-img-element */
You can also disable the rule using .eslintrc:
{
"extends": "next",
"rules": {
"#next/next/no-img-element": "off",
}
}
You can also ignore (all rules for) a complete file using eslintignore or ignorePatterns. Please refer: eslint.org/docs/user-guide/configuring/ignoring-code

Disable wavy yellow underline in vs code for HTML

How do I ignore this error. I have used the id attribute for some tags in order to reference them by id in javascript, but it shows this error:
CSS id selector '...' not found.
Please tell me how to ignore or disable this error.
maybe your css is not formatted properly.
try:
<style>
#phone {
your css here;
}
</style>
You need to make sure you mark the code with # to show that it's an id and not a class or something else.
Update: First section of answer no longer valid as of the lastest updates since original post which removed the css.validation option. see
If you are using the HTML CSS Support extension by ecmel, you can go to .vscode/settings.json and add
"css.validation": {
"id": false,
"class": false
}
This will turn off css validation for class name and id.
More information on this at the Visual Studio MarketPlace for this extension under Selector Validation here or the Github repository readme Selector Validation Section
Note:
1) Also don't forget to add a comma after the setting that comes before (as JSON format is comma separated).
Example:
{
"java.codeGeneration.generateComments": true,
"css.styleSheets": [
// (1)
"https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css",
"src/main/resources/static/css/styles.css"
],
"css.validation": {
"id": false,
"class": true
}
}
Sometimes you need to restart / close and reopen vscode after saving changed to the file for them take effect.
There is a way to configure styleSheets. This next bit is taken from their documentation see Additional Styles Section:
Additional Style Sheets
If it is not possible to specify local or remote styles in HTML or via
template inheritance, they can be specified in VS Code settings per
workspace folder in .vscode/settings.json and will suggest for all
HTML files within that workspace folder:
.vscode/settings.json
"css.styleSheets": [
// (1)
"https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css",
// (2)
"/site.css",
// (3)
"site.css",
// (4)
"./site.css"
]

Airbnb, ESLint, Prettier conflict over Switch and Case indentation

I am setting up my React Redux project to use ESLint with Airbnb configs and Prettier. I've been modifying certain things to how I want them, but now I've run into a problem with indentations on switch & case statements that I can't seem to fix.
I am editing my project in VSCode. I click on the errors and fix with ESLint, reducing the indent by 4 spaces, but then more errors show up from Prettier, asking to re-indent everything by another 4 spaces.
I want to change the current indentation width. I want it set to 4 spaces when I use tabs. It's not a must, but if it is possible, I would prefer that the case keywords in switch blocks to be indented.
List of packages that pertain to my ESLint configuration:
prettier
eslint
eslint-config-airbnb
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-import-resolver-webpack
eslint-config-prettier
eslint-plugin-prettier
Relevant portion of my .eslintrc.json
"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["react", "prettier"],
"rules": {
"react/jsx-filename-extension": [
1,
{
"extensions": [".js", "jsx"]
}
],
"prettier/prettier": "error",
"indent": ["error", 4, { "SwitchCase": 1 }],
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", 4],
"class-methods-use-this": 0,
"no-else-return": 0,
"no-plusplus": [2, { "allowForLoopAfterthoughts": true }],
"no-param-reassign": 0
}
My .prettierrc config-file:
The setting below is necessary for Prettier to format indentations harmoniously with the rest of the development environments configurations while using ESLint.
"prettier": {
"tabWidth": 4
}
Here is the script I am formatting:
It is a hangman game.
switch (action.type) {
case GUESS_LETTER:
return Object.assign(
{},
state,
state.guessWord.includes(action.guessLetter)
? addCorrectGuess(
state.rightLetters.slice(), // <-- error here!
action.guessLetter, // <-- error here!
state.guessWord // <-- error here!
) // <-- error here!
: addWrongGuess(
state.wrongLetters.slice(), // <-- error here!
action.guessLetter // <-- error here!
) // <-- error here!
);
}
My first attempt to get this working was to add { "SwitchCase": 1 } to the ESLint config file. That reduced the number of errors (which was almost the entire block), but there are still errors. I can't figure out where the conflict is exactly.
[UPDATE] To my eternal shame, I believe I discovered the problem. I simply removed the configuration for intends from the ESLint configuration. I removed this:
"indent": ["error", 4, { "SwitchCase": 1 }],
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", 4],
And now it seems to be behaving normally. I assume this is because it screws up Prettier when trying to handle indents. I only needed the configuration for Prettier.
Lesson: test more by removing configurations which may be causing conflict before posting.
To make sure this is marked as solved:
I simply removed the configuration for indents from the ESLint configuration. I removed this:
"indent": ["error", 4, { "SwitchCase": 1 }],
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", 4],
And now it seems to be behaving normally. I assume this is because it screws up Prettier when trying to handle indents. I only needed the configuration for Prettier.
Lesson: test more by removing configurations which may be causing conflict before posting.
I had the same problem as mentioned in the question above, however I figured out how to solve it in a way that not only could the "indent" setting be kept, but so it can be adjusted, allowing for tabWidth to be set as you like.
First I want to note, so we're all on the same page, what the set-up I am using for linting/formatting exactly is:
Source Code Editor: V.S. Code
Linting Utility: ESLint
Opinionated Formatter: Prettier
Style-Guide: AirBnB
Additionally I also equip the following, which I download using NPM:
eslint-plugin-prettier
eslint-config-prettier
eslint-config-airbnb
For those familiar with linting while using V.S. Code, you guys know that what I am using is actually the short list. There is all kinds of other configs, plugins & extensions that can be obtained. The important thing to note here, is that I am using a tried & true setup, that allows Prettier, and ESLint to work harmoniously together.
With that said, even having a good configuration, and all the correct extensions I still had a problem with the above rule, the same as the developer who posted the question. I knew the problem had to do with ESLint's rules, and how they were being configured in my .eslintrc.json file. After much research, and near mastering ESLint, I found that I was correct. There are a few ESLint rules, (3 ESLint rules, and 1 Prettier Setting), that you need to have configured properly, however; at the same time you need to make sure your .prettierrc file settings are in-sync with your .eslintrc.json file rules. Once you understand it all, it is actually not as complicated as it sounds.
STEP #1 Know what tabWidth you want and set it in .prettierrc
First off you need to decide what you want your styles tab-width to be. (Most Style-Guides set there tab-width at (2x Space-Width), but many dev's will change there settings to a (4x Space-Width). Any thing other than 2x and 4x is considered taboo.)
Go ahead and open your .prettierrc file (or what ever mimetype of prettier configuration file you use), then set 'tabWidth' to your liking, just make sure that you stick with a consistant tabWidth from here on out, becuase ESLint needs to be in sync with prettier.
Your '.prettierrc' file should look similar to this:
{
"printWidth": 90,
"tabWidth": 4,
"useTabs": false,
"trailingComma": "all",
"singleQuote": true,
"semi": true,
"bracketSpacing": false,
}
STEP #2: set the "max-len" rule in .eslintrc.json**
open up your .eslintrc.json file (or whatever version of ESLint configuration file mime-type that you use), and set the "max-len" rule in the rules property of your eslintrc.json. The rule is not in the file by default so you will have to write it in. To see how, review the Example I Created Below.
Be sure that the "tabWidth" property within ESLint's "max-len" rule, holds exactly the same value, as the "tabWidth" setting within your .prettierrc file.
There are some other rule options here that are important to set properly as well. The first, 'code', sets the max amount of chars each line can hold, aka(max-line-length). When "code" is set ESlint will not allow more characters than what "code" has been set to. The catch is that you absolutely must Make sure that the "printWidth" setting in your .prettierrc file, which you probably will have to write in, is set to the same value as the "code" property's value in your .eslintrc.json max-len rule.
"ignoreUrls" can be set either way and make sure the rule does throw an error by leaving the word "error" as it is.
Here is an example of my max-len rule in ESLint
"rules": {
"max-len": [
"error",
{
"code": 90,
"tabWidth": 4,
"ignoreUrls": true
}
],
}
See the .prettierrc example above, to view how to set "printWidth"
STEP #3: ESLint's "no-tabs" Rule
The "no-tabs" rule, is a 'must set', w/o it your linting & formatting > can unsynchronize.
You can set "allowIndentationTabs" as you like, Allowing for, or disallowing indentation tabs won't make a difference.
What the no-tabs rule should look like:
"rules": {
"no-tabs": ["error", {"allowIndentationTabs": true}],
"max-len": [
"error",
{
"code": 90,
"tabWidth": 4,
"ignoreUrls": true
}
],
}
STEP #4: ESLint's "indent" Rule, by far the most important rule of this discussion
Seriously this one is important. Its the one that gets thrown out in an attempt to fix the switch indentation problem, which doesn't give you control over other settings, like setting your own tab-width. The "indent" rule.
First make sure indent is active by setting error to error as you see it, you could also set it to warn, but its better to set it as error so prettier knows to fix it imeadiatly. The next setting is the width of your indentations, which has to be the same exact value as your tabWidth in your .prettierrc file, and as in the "max-len" ESLint rule.
"indent": ["error", 4, {"SwitchCase": 1}],
The last settings in the brackets, "SwitchCase" can be confusing. No one explained any of this to me at first so I had to figure it out on my own, and this screwed me up a bit. The number that "SwitchCase" gets set to is not like the 4 before it. The 4 that comes before it is the initial setting of the "indent" rule and can stand alone like this:
"indent": 4; // throws error
// or
"indent": ["warn", 4] // Throws warning, which is somtimes less annoying than an error
So it is important to note that the value 4 that you see in the "indent" rule, is how many spaces an indent will be. This led me to believe that the 1 after "SwitchCase" meant how many spaces that the switch keyword case will be indented.
Example:
switch (x) {
case 1:
break;
}
That is not how it works though. The number that rule "SwitchCase" is set to, tells the editor how many times to indent the keyword 'case'. So if the "indent" rule is set to 4, and the "SwitchCase" rule is set to 4, then ESLint will expect an indentation of 4x4=16. At the end of the day ESLint will actually expect more than 16, because ESLint is going to take on all the indentation from different levels of blocks that the switch statement is found in, this ends up leading to ESLint expecting 24-36 spaces of indentation, that's crazy.
"SwitchCase" needs to be set to 1.
"rules": {
"indent": ["error", 4, {"SwitchCase": 1}],
"no-tabs": ["error", {"allowIndentationTabs": true}],
"max-len": [
"error",
{
"code": 90,
"tabWidth": 4,
"ignoreUrls": true
}
],
}
If you set all the rules right that should work for you
If it is still not working, try starting with a clean slate, delete your .eslintrc.json file, and create a new eslintrc.json file, and build it anew. You shouldn't have to start over with a new .prettierrc file.
To Wrap Up
Prettier wants to indent everything uninformed like. So if tabWidth is set to 4, and tabWidth & indent is set to 4 in ESlint then every block gets indented 4 spaces be prettier, no more and no less.
The whole problem initially is that, the style guides often ask that the keyword case not be indented, so when ESLint is setup, that is what it is configured to do by the NPM config you install upon initializing ESLint. However that does not work with prettier.
This answer wound up much longer than I thought it would. Getting Prettier, ESLint & VS Code to work harmoniously together is a very involved task, especially for first timers. I use Babel on top of this AST stack (I made that term up lol, what else would you call it?). If you want to be able to lint documents that contain TC39 ECMAScript Stage-3 Proposals, this includes features such as Private-Members, Static Methods, ect..., then you will need to use configure ESLint to use Babel's parser.

Autoprefixer doesn't add vendor prefixes

Here is the task :
gulp.task('process-css', function(){
return gulp.src('./app/css/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([postcssMixins, postcssCalc, postcssSimpleVars, postcssColor, postcssExtend, postcssNesting, autoprefixer]))
.on('error', function(errorHandler){
console.log(errorHandler.toString());
this.emit('end');
})
.pipe(concatCSS('style.css'))
.pipe(gulp.dest('./app/css/'));
});
I'm using the standard autoprefixer plugin (not gulp-autoprefixer, which basically did the same thing on the last task-runner I was using), but it only adds the -webkit- prefix. I tried it with properties like clip-path and display: flex, but it doesn't add the vendor prefixes. I tried changing the line to
.pipe(postcss([
postcssMixins, postcssCalc, postcssSimpleVars,
postcssColor, postcssExtend, postcssNesting,
autoprefixer([{browsers: '> 0%'}]))
but that didn't work either, what is wrong with it?
-- Fixed --
I think some of the other plugins is using autoprefixer too and it was messing with my configs. The way I fixed it was to add this at the bottom of my package.json file
"browserslist": [
"> 0%",
"last 2 versions"
]
Add it with a comma after the last curly brace for your devDependencies
Flex is very well supported so probably you don't need it anymore (autoprefixer don't add prefixes to the property by default anymore for a while — check can I use). But if you really need it you can do the steps:
Let's say you have css folder and dist folder for yours styles in your working directory.
create .browserslistrc file at the root of the working directory and put last 4 versions in it.
run postcss css/styles.css -u autoprefixer -o dist/styles.css in your terminal

How do I use LESS variables in CSS comments?

Is it possible to use LESS variables in CSS comments for mixins? I need that for spriting.
For example (not working / only the image path gets replaced):
.sprite (#width) {
/** sprite: sprite-#{width}; sprite-image: url('../img/#{width}/sprite-#{width}.png'); sprite-layout: vertical */
.picture {
background-image: url('../img/#{width}/picture.png'); /** sprite-ref: sprite-#{width}; */
}
}
.sprite(800);
Bonus question: Can I prevent the linebreak between background-image and the sprite-comment after compiling with lessc?
no, you can't do variables in comments.
what about adding a property 'comment' ignored by browsers.
you could try to use an escaped string e.g.
prop: ~"url('blah'); /* comment */";
but it produces 2 semicolons (valid CSS) and is pretty hacky.
I stumbled upon this question because I wanted to have automated semantic comments that are fed into Kentico (a .NET CMS). Because the accepted answer seemed a bit unsatisfying I tried a few things on my own and managed to somehow produce a better solution. Maybe this is due to changes in the less syntax since then...
// DEFINITIONS
#A: (~"A Standard");
#X-1: (~"1 General");
// BASIC DEFINITIONS
#start: (~"/*# ");
#end: (~" #*/");
#sep: (~" / ");
// FORMULA
#{start} #{A} #{sep} #{X-1} #{end}
* { text-decoration: none; }
The output is then:
/*# A Standard / 1 General #*/ * {
text-decoration: none;
}
The only thing that's bothering me is the missing new line after the comment. Unfortunately I'm using the dotless Compiler which is not able to evaluate js-functions. I added an empty comment at the end, that did the trick for me.
Should you use the browser-version, you can use the following variable to insert a new line:
#nl: (~`"\n"`)
...resulting in:
#{start} #{A} #{sep} #{X-1} #{end} #{nl}
I have a good solution:
create a file and name it start-comment.css, inside the file add exactly this content /*, then create another file end-comment.css, inside add only this */, and finally create another file e.g- description.txt in there, add all the content that you want in the comment, now in your .less file add the next code:
#import (inline) "start-comment.css";
#import (inline) "description.txt";
#import (inline) "end-comment.css";
at the end you will get something like this:
/*
(The content that i add in my text file)
*/