Is there a method to tell the indent rule of ESLint to accept that? What I want
<BottomNavigation
showLabels
value={value}
onChange= {(…) => {
…
}}
>
<BottomNavigationAction component={Link} to="/contacts"…
icon={<ContactsIcon/>}/>
<BottomNavigationAction … />
<BottomNavigationAction
component={Link} to="/groups" … icon={<GroupIcon/>}/>
</BottomNavigation>
What it forces me to do: What it forces me
<BottomNavigation
showLabels
value={value}
onChange= {(…) => {
…
}}
>
<BottomNavigationAction component={Link} to="/contacts"…
icon={<ContactsIcon/>}/>
<BottomNavigationAction … />
<BottomNavigationAction component={Link} to="/groups" …
icon={<GroupIcon/>}/>
</BottomNavigation>
My indent rule values: Indent rule
"indent: [
"error",
4
],
I checked the documentation of the indent rule but they never mention HTML nodes. So I'm a bit lost there. (ESLint documentation on indent)
Related
I would like to know if it's possible to force prettier to write my "path" in one line:
This is what I have:
<a href="{{ path('product_conf', { slug: product.slug }) }}">
But prettier write this element like this:
<a href="{{
path(
'product_conf',
{
slug: product.slug
}
)
}}">
Same for my h3, p, etc :
<h3>
Let's go!
</h3>
(I would like: <h3> Let's go! </h3>)
My prettierrc.json
{
"singleQuote": true,
"useTabs": true,
"printWidth": 180,
"tabWidth": 2,
"singleAttributePerLine": true,
"plugins": [
"./node_modules/prettier-plugin-twig-melody"
]
}
Add "twigAlwaysBreakObjects": false in your .prettierrc.json.
I've the following code within my React component:
return (
<div>
<StyledTextField
value={otherFields}
onChange={handleInput}
variant='outlined'
placeholder='e.g. robotics, construction, material'
onFocus={toggleFocus.bind(null, true)}
onBlur={toggleFocus.bind(null, false)}
InputProps={{
endAdornment: (
<InputAdornment position='end'>
{(otherFields.length > 0) ? <StyledStar/> : '' }
</InputAdornment>
)
}}
/>
</div>
);
Which cause to eslint error, see screenshots below. I think it's related to prettier settings within eslint, but can't understand which one exactly. How can I identify and turn this rule off? Any general suggestions how to deal with such issues in the future?
My eslint/prettier code:
...
"prettier/prettier": [
"error",
{
"trailingComma": "none",
"singleQuote": true,
"bracketSpacing": false,
"printWidth": 120,
"useTabs": true,
"tabWidth": 2,
"arrowParens": "avoid",
"semi": true,
"jsxSingleQuote": true
}
]
...
It looks that the issue was related to printWidth, when I decreased it to 100 and following prettier official guidance it should be even less https://prettier.io/docs/en/options.html#print-width:
For readability we recommend against using more than 80 characters
The error disappeared.
When I select a tab, the name of the tab changes color. I want to understand how to change the icon color as well.
<BottomNavigationTab
title="Profile"
icon={(focused) => {
return (
<Icon
name="person-outline"
style={{height: 30, width: 30, marginTop: 5}}
fill={focused ? '#B9995A' : '#1f1f1f'}
/>
);
}}
style={tabStyle}
/>
Just listen to the state index and change the color with an if statement
const HomeIcon = (props) => (<Icon name={state.index == 0 ? 'home' : 'home-outline'} fill={state.index == 0 ? '#000' : ''#eee} />)
<BottomNavigation
selectedIndex={state.index}
onSelect={index => {
setTabIndex(index)
navigation.navigate(state.routeNames[index])
}}>
<BottomNavigationTab title="Home" icon={HomeIcon}/>
<BottomNavigationTab title="Search" icon={SearchIcon}/>
</BottomNavigation>
Udate:
Although I haven't been able to find out whether this is a feature or a bug. It seems url-loader can't process the assets used in the Svelte component unless those are loaded via require. So I would like to know what's the more common or recommended way to load/preprocess, using Webpack 4, a Svelte component source so that all image assets used in src/url in HTML tags and CSS styles get inlined, i.e. converted to use the embedded base64 data in the HTML or CSS output files.
Original Question
I want to have a tag <img src="./assets/logo.png"> in a svelte component to be converted to <img src="data:image/png;base64,iV...CC"> in the output, but if I add url-loader to my webpack.config.js file like so:
module: {
rules: [
//...
{
test: /logo.png/,
loader: (process.stdout.write("!!!\n"), 'url-loader')
}
The URL in src does still appear as "./assets/logo.png" in the output even is the console shows "!!!" during the webpack build process with no errors, why is url-loader not making the conversion? The file logo.png is about 3KB in size, but I'm not sure is that's the problem since it's small in size.
The image is being used here like so:
<div id="app">
{#if path === '/'}
<span on:click={navigateToSettings} id="menu"><div class="hamburger" /></span>
{/if}
{#if path === '/settings' && isStored()}
<span on:click={cancel} id="menu"><div class="close" /></span>
{/if}
<img class='logo' src='./assets/img/logo.png' alt='Spark'>
{#if connected}
<span id="status" class="green">•</span>
{:else}
<span id="status" class="red">•</span>
{/if}
<div id="content">
<RouterView />
</div>
</div>
And I'm adding the url-loader rule here before the rule for audio files:
module: {
rules: [
//...
{
test: /logo.png/,
loader: (process.stdout.write("!!!\n"), 'url-loader')
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader'
},
If you use webpack and url-loader with any of modern frontend frameworks it is a common practice to use images via require.
Example from react world:
import iconMore from “../path_to_image/name_of_image.jpg”;
const Icon = (props) => {
return <img src={iconMore} />
}
for more examples please see this question.
Also I found svelte-assets-preprocessor - you can use it in pair with url-loader without direct require, but under the hood it is the same technique:
module: {
rules: [
...
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options: {
outputPath: 'images',
}
},
{
test: /\.(html|svelte)$/,
exclude: /node_modules/,
use: {
loader: 'svelte-loader',
options: {
preprocess: require('svelte-assets-preprocessor')({ /* options */ exclude: [ (attr) => !/\.(png|svg|jpg|gif)$/.test(attr)} ])
},
},
},
...
]
}
Input
<img src="./example.png">
Output
<script>
import ___ASSET___1 from './example.png';
</script>
<img src="{___ASSET___1}">
The sample cypress jest spec tests have a "triple-slash directive" at the top of them which ESLint is reporting errors about.
It looks like this at the top of the actions.spec.js file:
/// <reference types="Cypress" />
ESLint is reporting this error:
Expected exception block, space or tab after '//' in comment. [spaced-comment]
I have added eslint-plugin-cypress to my .eslintrc file and it helped to remove some other ESLint error (so I know it's installed/configured correctly), but it seems like this error should not have to be suppressed directly.
I have added the following spaced-comment rule to my .eslintrc file which suppresses the error:
{
...,
"rules": {
"spaced-comment": [
"error",
"always",
{
"markers": ["/"]
}
]
}
...,
}
Is there a better way to suppress this error?
You can add the below line before the error line to suppress error
/eslint spaced-comment: ["error", "never", { "block": { "balanced": true } }]/
I added the spaced-comment rule with a line marker exception. This worked for me:
{
"rules": {
"spaced-comment": [
"error",
"always",
{
"line": {
"markers": ["/"]
}
}
]
}
}
You can suppress this error by adding a comment before the desired line:
// eslint-disable-next-line spaced-comment
/// <reference types="cypress" />
Or alternatively wrap it in the following way:
// eslint-disable spaced-comment
/// <reference types="cypress" />
// eslint-enable spaced-comment