I just got two stylelint errors on a file that looked like this
.link {
position: absolute;
top: var(--spacing-l);
left: var(--spacing-fluid-l);
z-index: 2;
color: var(--color-white);
appearance: none;
white-space: nowrap;
composes: nav-bold from '~#tv2/ui-ng/styles/typography.module.css';
text-decoration: none;
display: inherit;
&:hover {
color: var(--color-white);
}
}
.icon {
color: var(--color-white);
height: 20px;
width: auto;
margin-right: 5px;
margin-top: 4px;
& > svg {
height: 20px;
width: auto;
margin-right: 5px;
margin-top: 4px;
}
}
the errors were
1:1 ✖ Unknown rule no-invalid-position-at-import-rule no-invalid-position-at-import-rule
1:1 ✖ Unknown rule no-irregular-whitespace no-irregular-whitespace
looking at the no-invalid-position-at-import-rule https://stylelint.io/user-guide/rules/no-invalid-position-at-import-rule none of that seems to apply for my code.
But of course I would like to make the smallest reproducible example.
so I made the following:
.link {
position: absolute;
}
written by hand so as to not have any bad type of whitespace show up.
ran stylelint with command yarn stylelint path-to-file got back
1:1 ✖ Unknown rule no-invalid-position-at-import-rule no-invalid-position-at-import-rule
1:1 ✖ Unknown rule no-irregular-whitespace no-irregular-whitespace
my system is a mac Catalina, intel chip, node version v14.16.1, stylelint version 13.12.0, yarn version 2.4.1
questions somewhat implicit but to spell them out precisely - why is stylelint throwing these two errors with a file that does not seem to have them, if the file has the errors how do I fix the file.
so - when it says Unknown rule no-invalid-position-at-import-rule I focused too hard on the no-invalid-position-at-import-rule when what I should have focused on it the Unknown rule part.
Stylelint was saying it did not know this rule - why did it not know this rule? Because we had recently updated our stylelint config but not our stylelint version, so there were rules in the configuration that stylelint did not know about.
For Visual Studio Code: uninstall the Stylelint extension and reinstall it, the errors should go away.
Related
I have my vscode set up to connect to a remote JupyterLab that connects to a spark cluster.
When printing a wide dataframe using df.show(false) the output wraps around and becomes unreadable.
What I have tried:
The same thing that works in JypterLab:
%%html
<style>
div.jp-OutputArea pre {
white-space: pre;
}
</style>
Setting Word Wrap to off in vscode (alt+z)
Google. I have found how to turn off wrapping the code, but nothing about the output.
I have and error of eslint in my code that I cannot understand how turn off, these are some examples:
As you can see there is a eslint(prettier/prettier) rule that is incomprehensible and I can't understand how to turn off.
This is my eslint and prettier config:
eslint
module.exports = {
root: true,
extends: ['#react-native-community'],
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
overrides: [
{
files: ['*.ts', '*.tsx'],
rules: {
'#typescript-eslint/no-shadow': ['error'],
'no-shadow': 'off',
'no-undef': 'off',
},
},
],
};
prettier
module.exports = {
printWidth: 100,
arrowParens: 'avoid',
bracketSameLine: false,
singleQuote: true,
tabWidth: 2
};
Oh Pierro... Its you again.
Your Prettier configuration is not in sync with your ESLint configuration.
When you set Prettier's print-width rule, you need to always make sure that you set ESLint's max-len rule to the same value. This is very import, and is likely causing your issue. You seem to have some other stuff going on though.
#see this post
You need to synchronize the two. Ir looks like a JSX configuration that's causing problems. Try changing the value of bracketSameLine in your prettier configuration to true, or try getting rid of it all together.
You see where it says that the rule prettier/prettier is causing the issue? That should be in your configuration.
That's odd... You don't seem to have your .eslintrc.* file configured properly. It looks like your not properly configuring the eslint-plugin-prettier plugin for ESLint.
If you look at the plugin's documentation, which is where the prettier/prettier rule comes from (the first prettier is the name if the plugin, the second prettier is the name of the rule) it says you need to add the following values to the correct settings in your .eslintrc.* configuration file.
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
Its odd that the prettier/prettier rule shows up at all without you having added that configuration.
#see this answer here, it thoroughly explains what the prettier/prettier rule is.
The if the prettier config file is not present, the auto-formatting properties of vscode are taken as the default. the settings.json in the .vscode settings should be in sync with the linter properties. In your case you don't have prettier configured thats why the error is being thrown from prettier/prettier
On the local machine everything works fine, when I try to run it on the server I get this error, it generates fine, but without the SVG logo included.
2019-07-12 09:09:01,956 [ERROR] [main] [LoggingEventListener] Image not available. URI: (instream-object). Reason: org.apache.xmlgraphics.image.loader.ImageException: The file format is not supported. No ImagePreloader found for null (No context info available)
org.apache.xmlgraphics.image.loader.ImageException: The file format is not supported. No ImagePreloader found for null
at org.apache.xmlgraphics.image.loader.ImageManager.preloadImage(ImageManager.java:181)
at org.apache.fop.render.intermediate.AbstractIFPainter.drawImageUsingDocument(AbstractIFPainter.java:317)
at org.apache.fop.render.pdf.PDFPainter.drawImage(PDFPainter.java:286)
Here is how it is included
<fo:block margin-right="1.5cm" text-align="right">
<fo:instream-foreign-object>
#include("Logo.vm")
</fo:instream-foreign-object>
</fo:block>
Here is the SVG Include File snippet Logo.vm:
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.0"
id="Ebene_1"
x="0px"
y="0px"
viewBox="0 0 175 40"
enable-background="new 0 0 115 40"
xml:space="preserve"
inkscape:version="0.48.4 r9939"
width="146"
height="38"
sodipodi:docname="DL_115x40.svg"><metadata
id="metadata3067"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/d/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs3065" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="492"
inkscape:window-height="309"
id="namedview3063"
showgrid="false"
inkscape:zoom="2.7826087"
inkscape:cx="57.5"
inkscape:cy="20"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="0"
inkscape:current-layer="Ebene_1" />
<path class="st0" d="M122.9 34.2c0 .8-.6 1.3-1 .... *MORE AND MORE NUMBERS COMMING*
For me, this problem occurred when using Amazon Corretto JDK. Java Corretto has some bug that causes issues with fonts, see issues on the Github: Broken Font support (Fontconfig) in AWS-Lambda (java11) and Generic Linux distro requires Fontconfig for font support (java8)
What actually solved this issue for us was installing package fontconfig on the OS (we are running Ubuntu virtual servers, so no problem with that):
sudo apt-get install fontconfig
After that SVG renderring was OK.
I have an issue where HTML file formatting in VSCode, "on-save", is different than Prettier's formatting when using the command line.
My user settings (changing these values doesn't seem to make any difference):
{
"[html]": {
"editor.formatOnSave": true
},
"prettier.eslintIntegration": false,
"html.format.enable": false
}
When I run Prettier from the command line, my HTML gets formatted like this:
prettier --write "./src/app/my-file.html"
my-file.html:
<a ng-hide="$last" href="" ng-click="doThis(thing)"
>{{ crumb.title }}</a
>
The same code when I save the file in VSCode (allowing the Prettier extension to do the formatting):
<a ng-hide="$last" href="" ng-click="doThis(thing)">{{
crumb.title
}}</a>
I know the extension is installed and working, because I see this icon in the bottom right hand side of the screen:
And, when I hover over this icon, I see a tooltip that says prettier#1.16.3, the same version I have installed on the command line prettier -v
Why am I getting different results with these 2 methods? I have not altered any settings, other than the above
I needed to create a .prettierrc file with the following contents:
{
"overrides": [
{
"files": "*.html",
"options": {
"parser": "html"
}
}
]
}
The command line was using the html parser, while VSCode was using the angular parser. This way they are both using the same parser for .html files.
Compilation from source error on using using php bin/magento setup:static-content:deploy after installation in magento 2.0.7:
frontend/Magento/blank/en_US/TemplateMonster_Megamenu/fonts/font-awesome-4.5.0/l
ess/animated.less
variable #fa-css-prefix is undefined in file C:/xampp/htdocs/projectname/var/view_preprocessed/css/frontend/Magento/blank/en_US/TemplateMonster_Megamenu/fonts/font-awesome-4.5.0/less/animated.less in animated.less on line 4, column 2
2| // --------------------------
3|
4| .#{fa-css-prefix}-spin {
5| -webkit-animation: fa-spin 2s infinite linear;
6| animation: fa-spin 2s infinite linear;
| }
I don't understand where and how to define the variable #fa-css-prefix in magento2 .less file
please help and thanks in advance.
Magento LESS variable file is already provided by Magento. Follow below path:
yourMagentoSetup\vendor\magento\theme-frontend-luma\web\css\source_variables.less
After this you can copy or directly create a custom theme web folder such as below path:
yourMagentoSetup\vendor\magento\theme-frontend-luma\web\css\source_variables.less
Now paste this file.
You can also create a new variable such as,
// Spacing
#section_horiontal_pad: 40px;
#section-vertical-pad: 60px;